Describe the bug
When we have more than one locked column in a TreeList and scroll the content of the component horizontally, in scenarios when two locked columns are one by one, the layout of the component is breaking.
The first two columns(Name and Position) should stay locked and the content of the other columns should be scrolled below them.
Currently, the Chip component provides the option to add an image to it by using a CSS class whose background-color property has a value of the image we want to be displayed in the Chip.
While the above works in a scenario with a smaller number of Chips, where the values of the Chips are pre-defined, this approach can't be used when we have dynamic data that holds different URL links. To be able to pass an image URL to the Chip component one of the following can be implemented:
With the default code in the example, when first scrolling the skip is not accurate. If the grid is scrolled extremely slowly, you can see the skip is not incremented at first. If scrolling quickly, it is very jumpy.
The faster you attempt to scroll, the stranger the skip behavior becomes unlike with simply removing the grouping grid prop in the same example. I've been able to get into situations it in the provided StackBlitz by scrolling down and scrolling back up quickly where it hangs on row counts and where it will scroll past the 0 indexed row causing an empty grid, then scrolling down again with either jump with a large skip number or sometimes throw an error.
Possibly provide more flexibility to the scenario
skip and cache are working correctly
There is an issue with white space that appears when you scroll a Grid with Groupable and Virtualization configurations switched on.
When you scroll the linked above example there is a strange "jumping" of the rows.