Heavy flickering on pinned columns when scrolling

[elementalTIMING]

[x] bug report => search github for a similar issue or PR before submitting [ ] feature request [ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

**Current behavior**

when you pin some columns, a heavy flickering occurs when scrolling horizontally. The problem seems to be caused by the function `translateXY()` or the used style change function `translate3d()`.

**Expected behavior**

smooth scrolling

**What is the motivation / use case for changing the behavior?**

bug fixing and better user experience

**Please tell us about your environment:**


- **Table version:**
20 (most current)

- **Angular version:**
13.3 (most current)

- **Browser:** 

Chrome/Safari/Firefox (latest versions)

[elementalTIMING]

I solved the flickering by modifying the method calcStylesByGroup in body-row.component.ts. It's a quick fix and I'm not really sure if it works in any configurations of ngx-datatable.

body-row.component.ts

calcStylesByGroup(group: string) {
	const widths = this._columnGroupWidths;
	const offsetX = this.offsetX;

	const styles = {
		width: `${widths[group]}px`,
		// modified by adding the three properties
		position: 'sticky',
		left: 0,
		right: 0,
		top: 0,
	};

	if (group === 'left') {
		// orig code
		// translateXY(styles, offsetX, 0);

		// modified code
		translateXY(styles, 0, 0);
	} else if (group === 'right') {
		// const bodyWidth = parseInt(this.innerWidth + '', 0);
		// const totalDiff = widths.total - bodyWidth;
		// const offsetDiff = totalDiff - offsetX;
	 	// const offset = (offsetDiff + this.scrollbarHelper.width) * -1;

		// orig code
		// translateXY(styles, offset, 0);

		// modified code
		translateXY(styles, 0, 0);
	}

	return styles;
}

optimized short method

calcStylesByGroup(group: string) {
	const widths = this._columnGroupWidths;

	const styles = {
		width: `${widths[group]}px`,
		position: 'sticky',
		top: 0,
		left: null,
		right: null,
	};

	if (group === 'left') {
		styles.left = 0;
		translateXY(styles, 0, 0);
	}

	if (group === 'right') {
		styles.right = 0;
		translateXY(styles, 0, 0);
	}

	return styles;
}