Data Tables

Data tables are central to our dataset showcase and almost any kind of data presentation.

We have researched and summarized the best options. Our current recommendation is:

• tanstack table (previously react table). This is best headless table component and we recommend headless.

If you want a non-headless option these are two recommended:

• Material UI X: https://mui.com/x/react-data-grid/
• https://github.com/ag-grid/ag-grid

Why headless?

• Headless makes it much easier to style the grid to the surroundings and we need to do that.
  • we are building the table into an app (DataHub etc)
  • That requires customizing table to suit the style
  • Plus we have bespoke sites for clients which requires further styling
  • This is easier with headless
• Furthermore, tanstack table

Research the best one (2022)

We want to research and summarize the existing JS libraries for presenting data so that we can choose the best one plus to have a nice bloggable summary to share with others (this is nice exercise in publishing product comparisons using data-literate model)

For some inspiration see https://github.com/datopian/line-charts

Acceptance

Overall

• We have a detailed list showing the pros and cons of different data table libraries published as post on datahub.io/blog (or if better as a separate mini site e.g. table-libraries.datahub.io …)

Bonus

• Content/code lives in a public "dataset-like" repo where others can update it over time (an experiment in community driven product evaluation)

Detailed

• List of JS data table/grid libraries with basic info e.g.
  • url / github url
  • name
  • stars
  • last updated
  • brief description
• Quick pass evaluation notes (internal) leading to a shortlisting of 2-4 that we dig into depth
• Working demos for each one

Research on Existing Designs / Implementations

• Figma with dataset showcase page research: https://www.figma.com/file/oJjkJH4ULP5WWeLIDuKv03/Default-Dataset-Page ~anu

Libraries

#todo list existing libraries we have come across …

• tanstack table (react-table v8 became generic) seems to be far the best headless now.
• ag-grid: this seems the next best if you want a "component" (vs headless). recommended by tanstack. Have open source and enterprise version. Open source is pretty good. Enterprise is ~1k.
• material ui is good especially https://mui.com/x/react-data-grid/. We used this for portal.js in 2022. however, it is not headless. Have open source (MIT) and paid version.
• https://jspreadsheets.com
• handsontable is fully closed source since 2019 (no open source option) https://handsontable.com/blog/articles/2019/3/handsontable-drops-open-source-for-a-non-commercial-license