React9k / react-timeline-9000

React Timeline
http://react-timeline-9000.s3-website-ap-southeast-2.amazonaws.com/
MIT License
288 stars 36 forks source link

[rt10000] Using a table together w/ the component (scroll sync, hierarchy, etc) #190

Closed cristian-spiescu closed 2 years ago

cristian-spiescu commented 4 years ago

It's a common use case to have a table in the left part of the Gantt. And I don't think it's the scope of this project to provide features such as: having multiple columns, resizeable columns, click on header => sort, hierarchical model, etc.

I propose an integration w/ a third party table component. This would replace the current "left part". A bi-directionnal communication would exist between the table and the Gantt. E.g. on Gantt scroll => scroll the table (and resize the rows, for the case of variable row width). And vice-versa. Idem for selection, etc.

I have a table component in mind: react-fixed-table2. It's the third React table that we've used and I think we'll stick to it this time. It has an approach quite similar to this component: it does a few things, and good. The rest is user's responsibility. We'd use this, and try to make some kind of interface; so that in theory, the Gantt could work with arbitrary tables, provided that someone writes the implementation for this interfae. And we'd provide the impl for react-fixed-table2, which would also become some kind of an optional dependency.

1) These are our first thoughts about this. What do you think? 2) A more technical question: do you have pointers regarding where we could add some hooks so that we can invoke the table, so that it can scroll + adjust the rows?

Thanks. Best regards, Cristian.

vasdee commented 4 years ago

I think this is a good approach. Using the state reducer pattern across both the timeline and gantt table seems like a sensible way to keep the two components in sync. In theory, any changes to the "user space" props in either of the components should then trigger a render in both components :+1:

If the scroll hooks aren't in there already, then you would want to take a look at https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md which is what is doing the heavy lifting for the timeline. If nothing else you might be able to use the grid ref to invoke the callback.

https://github.com/BHP-DevHub/react-timeline-9000/blob/master/src/components/body.js#L36

cristian-spiescu commented 4 years ago

Thanks for the pointers!

cristian-spiescu commented 2 years ago

We have added PR #243 for this issue.