5 ms·

I am working with two separate clients that need excel spreadsheet functionality in a browser. I evaluated all of the existing open source projects (this wasnt

I am working with two separate clients that need excel spreadsheet functionality in a browser. I evaluated all of the existing open source projects (this wasnt available at the time) and ended up going with fix-data-table-2 (fork of facebooks fix-data-table). fix-data-table is performant and easily extendable. I was able to create an editable grid similar to googlesheets in a months worth of work. working on open sourcing it soon.

deleted 10y ago
[deleted]
tlrobinson 10y ago
React Virtualized is also great: http://www.reactvirtualized.com http://www.reactvirtualized.com We (Metabase) switched from FixedDataTable to React Virtualized and are happier with it. The only major issue with it is doesn't have fixed columns/rows built in, but it's pretty easy to compose a couple Grids with ScrollSync to get that behavior (https://bvaughn.github.io/react-virtualized/#/components/ScrollSync https://bvaughn.github.io/react-virtualized/#/components/Scr...) FixedDataTable has performance issues with a larger number of columns because it doesn't "virtualize" columns (https://github.com/facebook/fixed-data-table/issues/49 https://github.com/facebook/fixed-data-table/issues/49). The DOM it generates is also much heavier (several elements for every cell vs. 1 with React Virtualized)
- misiti3780 10y ago
  Hi, Thanks for the response. My team fixed those performance issues in the source. It is one of the reasons we want to open source it.
- kevinwuhoo 10y ago
  +1 for React-Virtualized as well. FYI: there was a new "MultiGrid"[1] high level component that was added in 8.9.0 [2] which helps facilitate fixed columns/rows with less boilerplate. Though, nearly every time I've used the MultiGrid component, I've found myself eventually dropping back to ScrollSync + Grids/Lists. As the product grows in complexity, adding more complex interactions to MultiGrid is difficult as it doesn't expose all of the Grid API. [1]: https://bvaughn.github.io/react-virtualized/#/components/MultiGrid https://bvaughn.github.io/react-virtualized/#/components/Mul... [2]: https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md#890 https://github.com/bvaughn/react-virtualized/blob/master/CHA...
- finchisko 10y ago
  Yes, react-virtualized is awesome. You can also compose and mix grid and non-grid components eg. https://jsfiddle.net/mauron85/Lyc52ac2/ https://jsfiddle.net/mauron85/Lyc52ac2/
  - tlrobinson 10y ago
    > You can also compose and mix grid and non-grid components That's a good point. We probably don't need to use a Grid for the header (I've wrestled with trying to hide scrollbars in headers a fair amount)
- kamranasif 10y ago
  Maintainer of FDT2 here. One of the reasons we decided to maintain this library is that it does virtualize both columns and rows. We use it at Schrodinger for our enterprise platform and have demo'd support of billions of rows. This is possible because we don't use a wrapper DOM element to handle scrolling. Right now we are migrating all the state to Redux for better maintainability and performance and hope to make extending and optimizing the library more user friendly. misiti3780 would you be interested in collaborating with us to help us capture your improvements as well?
  - rch 10y ago
    Virtualized columns is key -- thank you.
  - TheAceOfHearts 10y ago
    I've gotta admit I'm weary of the usefulness of a table with billions of rows. Doesn't that just drown the user with noise? Have you explored alternative means of presenting the data? Billions of anything sounds like too much information for any human to make sense of and process. Could you explain a bit about your use-case?
    - kamranasif 10y ago
      Our application is similar to excel/google spreadsheets. We don't expect the user to scroll through all that data, but we give tools to do sorting, filtering, plotting, etc. over that data.
cheapsteak 10y ago
I did the same evaluation and ended up going with react-bootstrap-table [1], which comes built-in with some nice features like cell editing [2], keyboard navigation [3], but does _not_ have fixed-data-table-2's column reordering and resizing [1] https://github.com/AllenFang/react-bootstrap-table https://github.com/AllenFang/react-bootstrap-table [2] http://allenfang.github.io/react-bootstrap-table/example.html#celledit http://allenfang.github.io/react-bootstrap-table/example.htm... [3] http://allenfang.github.io/react-bootstrap-table/example.html#keyboard-navigation http://allenfang.github.io/react-bootstrap-table/example.htm...

deleted 10y ago

[deleted]

tlrobinson 10y ago

React Virtualized is also great: http://www.reactvirtualized.com http://www.reactvirtualized.com We (Metabase) switched from FixedDataTable to React Virtualized and are happier with it. The only major issue with it is doesn't have fixed columns/rows built in, but it's pretty easy to compose a couple Grids with ScrollSync to get that behavior (https://bvaughn.github.io/react-virtualized/#/components/ScrollSync https://bvaughn.github.io/react-virtualized/#/components/Scr...) FixedDataTable has performance issues with a larger number of columns because it doesn't "virtualize" columns (https://github.com/facebook/fixed-data-table/issues/49 https://github.com/facebook/fixed-data-table/issues/49). The DOM it generates is also much heavier (several elements for every cell vs. 1 with React Virtualized)

misiti3780 10y ago
Hi, Thanks for the response. My team fixed those performance issues in the source. It is one of the reasons we want to open source it.
kevinwuhoo 10y ago
+1 for React-Virtualized as well. FYI: there was a new "MultiGrid"[1] high level component that was added in 8.9.0 [2] which helps facilitate fixed columns/rows with less boilerplate. Though, nearly every time I've used the MultiGrid component, I've found myself eventually dropping back to ScrollSync + Grids/Lists. As the product grows in complexity, adding more complex interactions to MultiGrid is difficult as it doesn't expose all of the Grid API. [1]: https://bvaughn.github.io/react-virtualized/#/components/MultiGrid https://bvaughn.github.io/react-virtualized/#/components/Mul... [2]: https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md#890 https://github.com/bvaughn/react-virtualized/blob/master/CHA...
finchisko 10y ago
Yes, react-virtualized is awesome. You can also compose and mix grid and non-grid components eg. https://jsfiddle.net/mauron85/Lyc52ac2/ https://jsfiddle.net/mauron85/Lyc52ac2/
- tlrobinson 10y ago
  > You can also compose and mix grid and non-grid components That's a good point. We probably don't need to use a Grid for the header (I've wrestled with trying to hide scrollbars in headers a fair amount)
kamranasif 10y ago
Maintainer of FDT2 here. One of the reasons we decided to maintain this library is that it does virtualize both columns and rows. We use it at Schrodinger for our enterprise platform and have demo'd support of billions of rows. This is possible because we don't use a wrapper DOM element to handle scrolling. Right now we are migrating all the state to Redux for better maintainability and performance and hope to make extending and optimizing the library more user friendly. misiti3780 would you be interested in collaborating with us to help us capture your improvements as well?
- rch 10y ago
  Virtualized columns is key -- thank you.
- TheAceOfHearts 10y ago
  I've gotta admit I'm weary of the usefulness of a table with billions of rows. Doesn't that just drown the user with noise? Have you explored alternative means of presenting the data? Billions of anything sounds like too much information for any human to make sense of and process. Could you explain a bit about your use-case?
  - kamranasif 10y ago
    Our application is similar to excel/google spreadsheets. We don't expect the user to scroll through all that data, but we give tools to do sorting, filtering, plotting, etc. over that data.

cheapsteak 10y ago

I did the same evaluation and ended up going with react-bootstrap-table [1], which comes built-in with some nice features like cell editing [2], keyboard navigation [3], but does _not_ have fixed-data-table-2's column reordering and resizing [1] https://github.com/AllenFang/react-bootstrap-table https://github.com/AllenFang/react-bootstrap-table [2] http://allenfang.github.io/react-bootstrap-table/example.html#celledit http://allenfang.github.io/react-bootstrap-table/example.htm... [3] http://allenfang.github.io/react-bootstrap-table/example.html#keyboard-navigation http://allenfang.github.io/react-bootstrap-table/example.htm...