CODEWITHSUNDEEP
cssreactjsreact-tablereact-window
priyanshu sinha
priyanshu sinha

Reputation: 625

React table v7 fixed column with react-window

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.

Upvotes: 2

Views: 9555

Answers (4)

Mohsin Ejaz
Mohsin Ejaz

Reputation: 414

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

enter image description here

Upvotes: 0

Michał Zbytniewski
Michał Zbytniewski

Reputation: 61

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

Upvotes: 1

Lord Pooria
Lord Pooria

Reputation: 572

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.

Upvotes: 2

Jason Neal
Jason Neal

Reputation: 11

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

  1. Add a className to the <FixedSizeList className={styles.fixedList} ...>
  2. 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.

Upvotes: 1

Related Questions