Data tables (with sorting, filtering, etc.)

From the preliminary State of HTML 2023 data, it looks like the missing element respondents seem to need the most (even more than tabs!) is …a humble data table:

(34,794 total selections spread across 12,472 responses)

For context, this was the question:

There have been a few issues discussing aspects of data tables:

• https://github.com/openui/open-ui/issues/803 (no discussion)
• https://github.com/openui/open-ui/issues/800
• https://github.com/openui/open-ui/issues/799
• (Can’t find anything for filtering)

There has been some discussion about doing this in a new element (e.g. <datagrid>), or augmenting the existing <table> element. The former allows us to start from a clean slate and avoid the many warts of tables, but ultimately, I think progressive enhancement should prevail. Doing it by augmenting <table> also allows us to ship this as individual composable features, rather than one monolithic new element that will take years.

That said, there are relationships between them: Sorting would require some mechanism of specifying what value to sort by (otherwise we're either stuck with lexicographical sorting, which is rarely what you want, or parsing numbers from contents which is another can of worms), which filtering could also take advantage of.

In terms of the features discussed above, it seems that if we want to tackle from easiest to hardest, the order would be:

1. Show/hide columns (just a matter of allowing existing primitives to work together)
2. Sorting (well established UI conventions, minimal UI surface)
3. Searching
4. Filtering (requires a lot of UI, which to be useful needs to be stylable)

Start by reviewing issues 803, 800, and 799, then compare the proposed approaches of augmenting

and introducing . Define the scope and relationships among column visibility, sorting, searching, and filtering; done means the project has an agreed direction for the data-table work.