Our great sponsors
-
react-table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
-
perspective
A data visualization and analytics component, especially well-suited for large and/or streaming datasets.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
If you want to bring your own UI, TanStack Table (formerly React Table) [0], if you want something that's batteries included, MUI [1]. There are of course other options with either close or full feature parity, but these are the two I see most often with least pain across different companies. While we're on the topic of recommendations, avoid any- and everything by Telerik.
[0] https://tanstack.com/table/
[1] https://mui.com/material-ui/react-table/
I haven't looked extensively at react-datasheet. It looks like it is trying to build more of a full product than the other data tables.
I have used ag-grid extensively, its an impressive product. Some pieces are a little awkward to use, particularly auto-sizing. But generally ag-grid has thought of most functionality and has a solution. The creator of ag-grid had a great interview on Javascript Jabber [1].
The other serious data table component that I have seen is FinOS Perspective [2]. This is extremely high performance, also more specialized and probably harder to customize. I think Perspective renders to a canvas element from Rust/C++ compiled to WASM (not 100% sure). It is also made for streaming updates.
AG-Grid supports streaming updates... but only in the commercial version.
Eventually the data model for these types of tables becomes tricky. I will be investigating parquet-wasm for my use case. Hit me up if you want to collaborate.
[1] https://blog.ag-grid.com/javascript-jabber-podcast/
[2] https://perspective.finos.org/
Agree about virtualization in principle. Not that nightmarish though.
My Sciter supports built-in virtualization out of the box. But I shall admit that this is second approach to the problem.
Currently Sciter's behavior:virtual-list supports as fixed-height items (that's easy) as variable-height items like messages [1] in chats.
API is relatively simple [2]: single event "contentrequired" that virtual-list sends to JS. In response JS shall either append or prepend requested number of DOM elements to the container (a.k.a. sliding window scroller). Example, grid showing 20000 records: https://gitlab.com/sciter-engine/sciter-js-sdk/-/blob/main/s...
[1] https://sciter.com/behaviorvirtual-list-for-sciter-and-scite...