question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for sticky columns to Table component

See original GitHub issue

Update: This issue has morphed into the MultiGrid component (see PR #499)

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:8
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
skipjackcommented, Aug 2, 2018

Jumping in late here, and I could definitely be missing something seeing as I’m fairly new to react-virtualized, but doesn’t MultiGrid also not support column definitions through the <Column> component? IMHO the loss of the relatively straightforward <Column> api to a need for a lot of complexity within the cellRenderer method is another significant downside (maybe even more so than sorting).

In examples like this one, the MultiGrid seems great but that cellRenderer method will get much more complex once you get into things like customized header cells, customized normal cells and more. Maybe this could be offset by creating a custom <Column> that cellRenderer uses to support these features? Then at least those attributes could be specified in the data, I guess.

2reactions
bvaughncommented, Jan 8, 2017

This ticket was primarily about sticky/fixed column support. True, that was possible with ScrollSync but the amount of boilerplate required made it an unpalatable option. That is no longer the case as of v8.9.0.

Table really doesn’t do much to enable sortable columns. It doesn’t actually sort data. It doesn’t even maintain which attribute the data is currently sorted by. It just adds click-handlers and a basic sort icon to the header row- something that could also be done with MultiGrid.

The main useful thing Table does over Grid is declare flex layouts for its columns so they grow or shrink to fit within the available width. Because this is the primary purpose of Table- its design doesn’t adapt well to horizontal scrolling and so the concept of fixed/sticky columns within a Table doesn’t make much sense. (After all, without horizontal scrolling all columns are “sticky”.)

I did experiment a bit with enabling horizontal scroll within a Table but was unhappy with the results. All of the above went into my thought processes when deciding that MultiGrid is probably a better solution for this than Table. The missing feature- sortable rows- is pretty easy to add to a MultiGrid- much easier than to add horizontal scrolling support to a Table. 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

A table with both a sticky header and a sticky first column
We've covered that individual cells, and can be position: sticky. It's pretty easy to make the header of a table stick to.
Read more >
How I implemented sticky columns in tables using directives ...
Making the first column in a table sticky is super simple, you basically add the sticky class to the column. ... Here you...
Read more >
Fixed column in ReactTable component - Stack Overflow
react-table does not support fixed columns, issue is opened Sticky columns. But there is already implemented workaround, ...
Read more >
Sticky Table Headers & Columns - Codrops
A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table...
Read more >
Sticky Table Header with React Hooks - Miroslav Nikolov
How to turn the table header sticky with the help of React in that case? ... Control Columns via Header Cells; Header and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found