React table v7 fixed column with react-window

Question

I have a table with react-table v7. Have used react-window for virtualisation. Now the table has last column fixed but I am unable to fix the last column of the table. React-window's internal element has overflow: auto which is not letting the column to be sticky at last.

Here's the link reproduce the issue.

I am trying to achieve something around these lines.

If you see the issue link, I want the last row to be fixed at a position and keep the rest horizontally scrollable.

@priyanshusinha are you trying to say the firstname and lastname and last column needs to be sticky ? — strek, May 23 '20 at 08:18
@XxSTREKxX I want the entire `Row Index` column to be sticky. — priyanshu sinha, May 23 '20 at 08:24
@priyanshusinha Have you tried https://github.com/tannerlinsley/react-virtual? It's from the author of react-table itself and very easy to setup. Here is an example: https://github.com/tannerlinsley/react-virtual#sample — Hardik Modha, May 23 '20 at 09:06
since react-window is being used all through the application I would like to stick to react-window if it's possible @HardikModha — priyanshu sinha, May 23 '20 at 10:18
also, I don't think using react-virtual will solve the problem. @HardikModha — priyanshu sinha, May 23 '20 at 10:54
Did you find a solution to this? I have the exact the issue? — envy, Nov 09 '20 at 20:36

score 2 · Answer 1 · answered May 10 '21 at 10:09

For sticky header you should implement innerElementType props as react-window said like this.

But for sticky column maybe more standard way of that is to use another grid or list beside that and sync their scroll position like this one.

you could also use react-base-table which implement whole side sticky rows and columns.

score 1 · Answer 2 · answered Jul 27 '20 at 20:59

1

I encountered this exact same issue. I came up with a solution that:

Add a className to the <FixedSizeList className={styles.fixedList} ...>
Add css to override the scroll: .fixedList { overflow: unset !important; }

Once I did this, it allowed my sticky column to be 'sticky' again. I hope this helps you as well.

answered Jul 27 '20 at 20:59

Jason Neal

11
3

Doesnt work, as you then cant scroll, due to the dependence of overflow:hidden - Or at least, that's what im experiencing... Do you have an example of this where it works with sticky columns and scroll still working? – envy Nov 09 '20 at 20:55

score 0 · Answer 3 · answered Jun 10 '21 at 18:03

0

Sticky columns and rows could be implemented by using innerElementType property of FixedSizeList provided by react-window.

Here's a working example:

https://codesandbox.io/s/dazzling-field-48x39?file=/src/App.tsx

answered Jun 10 '21 at 18:03

Michał Zbytniewski

51
1
5

score 0 · Answer 4 · answered Aug 30 '23 at 11:20

Hi I created this reusable react component

it uses only react-window with custom sticky columns implementation
i have lot of columns so i need column virtualization too

https://codesandbox.io/s/react-window-sticky-grid-forked-kkcf2z?file=/src/CustomVirtualGrid.js

React table v7 fixed column with react-window

4 Answers4

Linked