Using react-table with react-window and sticky columns
Asked Answered
H

0

6

I have a react-table v7 (with sticky header and footer) which renders thousands of virtualized rows using react-window.

A new requirement needs the table to have sticky columns as well but I cannot have it working as react-window adds a couple of nested divs for the virtualization breaking the stickiness of the columns.

There's already a hook (https://github.com/GuillaumeJasmin/react-table-sticky) that allows creating sticky columns but it breaks as well once the react-window is used; some devs have pointed to some great workarounds but the footer won't be sticky anymore (https://github.com/GuillaumeJasmin/react-table-sticky/issues/5).

At this stage, I have also tried using two tables side by side (one for the sticky columns and one for the rest of the columns) but given the virtualization applied, the rows get desynchronized when scrolling up/down. I also tried using another virtualization component (https://github.com/bvaughn/react-virtualized) but got the same problem.

Has anyone faced the same or similar issue and found a way to have it working?

Thanks in advance.

Hesiod answered 21/5, 2021 at 1:28 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.