Scroll X and Scroll Y and sticky rows and columns

[oleggrishechkin]

Scroll X and Scroll Y and sticky rows and columns

[oleggrishechkin]

Hi, @Arshad737 scroll in both axis at the same time is not supported. You can create a list where each row will be ViewportList but I can't recommend you this way. Also you can't use sticky elements - one of the possible ways to use sticky is grouping like:

<Scrollable>
  <Sticky />
  <ViewportList />
  <Sticky/>
  <ViewportList />
</Scrollable>

If your case is a big data table I think it's better to use other library like react-window. It also will be more performant in this case.

[Arshad737]

I have a grid with sticky rows and columns,
I have been using react-window for virtualization, but it doesn't work for the grids which have sticky columns because of position absolute.
I can work with y-scroll, but need columns to be virtualised

[oleggrishechkin]

Do you use native css position: sticky;? I don't know a virtualization library to support this. You should use js approach and react-virtualize and virtuoso support it.

If your columns have a fixed width and sticky rows are fixed too (I mean only some specific rows are sticky (maybe the first row) you can try to use solution described by me above:

Render vertical list before sticky row, render sticky row, render vertical list before next sticky row...
Each row is a horizontal list.
Not pretty solution, but this is what you can do to support css sticky.

@Arshad737 I created a simple demo with fixed cells (fixed width and fixed height)