2

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.

Improve this question
8
  • can you add some code as well? thanks Commented May 23, 2020 at 7:00
  • have updated the question @tudor.gergely Commented May 23, 2020 at 7:13
  • @priyanshusinha are you trying to say the firstname and lastname and last column needs to be sticky ? Commented May 23, 2020 at 8:18
  • @XxSTREKxX I want the entire Row Index column to be sticky. Commented May 23, 2020 at 8:24
  • @priyanshusinha Have you tried github.com/tannerlinsley/react-virtual? It's from the author of react-table itself and very easy to setup. Here is an example: github.com/tannerlinsley/react-virtual#sample Commented May 23, 2020 at 9:06

4 Answers 4

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

1 Comment

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?
1

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

Improve this answer

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.