Best solution for elegant and functional tables (like React Table)?

Hi all -

I’m new to Observable, but I’m really impressed with its power. I’m looking for something that has a rich table formatting similar to what you can do with a React-Table.

Specifically, I’m looking for the following features

Critical:

  • Ability to click on a row and have it take action elsewhere in the notebook (e.g. click a row, and have it update a graph)
  • Ability to click on two rows (with a checkbox?) and have it take a second action (e.g. compare and disable all other checkboxes until one of the check marks has been disabled)

Nice to have

  • Filtering within a column (could be achieved with an external element, but it’s nice the way that React-table has done it)
  • Sorting/filtering with a drop down/slider (again, see react-table)
  • Ability to group by clicking on an icon

You can see how React-table does all these - are there any good libraries integrated with Observable Notebooks? React-table is way too heavyweight to import :confused:

I did look at Tom’s Tables and they’re pretty good! Missing the click functionality though :frowning: Tables / Kyle Hubert / Observable

I am not sure I would call it the best - but here is a wrapper for the venerable dgrid: https://observablehq.com/@gordonsmith/hpcc-js-dgrid

A couple of examples: https://raw.githack.com/hpcc-systems/Visualization/master/demos/gallery/gallery.html?./samples/table

1 Like