React-virtualized: Add support for sticky columns to Table component

[bvaughn]

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

[sontek]

I'd love to help with this but I'm just now getting into react-virtualized so I can't offer much code help but I can help to offer:

• Testing a real world example
• QA on multiple browsers/devices

Is this something you are actively working on or just an idea you put here so you didn't forget? I'm currently working on moving to Grid + ScrollSync for sticky columns and removing my usage of the tables. If this feature is coming I'll just live without the sticky columns for a bit!

Thanks for your work!

[bvaughn]

Hey @sontek. Actively working on it, but time is limited, so can't promise a specific turn around time. I'll share a beta release with you once I have something ready to test though, if you're still willing. Cheers!

[leonprou]

I made the sticky column feature using two tables (and adding some code to the virtualized table component). The problem I having now is that the wheel event doesn't work on the main table and you can scroll the table with wheel just from the sticky column.

Maybe anyone has any idea?
I'll try to solve it or find other solution.

[bvaughn]

@leonprou: This seems like a question to direct to Stack Overflow _or_ the react-virtualized Gitter channel along with a link to a Plnkr _or at least a minimal code sample_. 😄

Edit I see you already made mention of this approach in Gitter. Still, diagnosing a problem with only a short video to look at is pretty difficult. Code sample is probably required.

[bvaughn]

PR #499 was merged and the new MultiGrid component released in version 8.9.0.

[sontek]

@bvaughn I don't know if this quite solves this ticket but maybe you had different plans than what I understood this ticket was planning. For me the big reason to use Table is because it supports sortable columns. The problem with the current sticky columns support is it was using a grid with scrollsync so you didn't get the sortable columns.

As far as I can tell MultiGrid provides less boilerplate but it provides no additional features on top of the ScrollSync version, right? We still don't get the features that Table supports and this ticket was labeled "Add support for sticky columns to Table component".

Should we create a new ticket for sticky columns on Table or sortable columns on grid?

[bvaughn]

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. 😄

[skipjack]

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.