Skip to content

[Prototype] {table} :filterable: option — search + auto-facets - #4130

Draft
alexandra5000 wants to merge 1 commit into
mainfrom
prototype/filterable-table
Draft

alexandra5000 wants to merge 1 commit into
mainfrom
prototype/filterable-table

Conversation

@alexandra5000

@alexandra5000 alexandra5000 commented Sep 17, 2026

Copy link
Copy Markdown
Contributor

What

Prototype of an opt-in :filterable: option on the {table} directive. It wraps the server-rendered table in a <filterable-table> custom element that adds a search box and auto-generated facet dropdowns (for low-cardinality columns), with AND semantics and an aria-live "Showing N of M" count.

Why

Long reference tables (for example the EDOT Collector components list, but we have many of these, some have 1000s of rows) are hard to scan. This is a reusable, opt-in per table.

Design notes

  • Progressive enhancement: the table renders and is fully usable with no JS; controls are added on load and hidden in print.
  • Vanilla custom element (no React/EUI). Could wrap EUI later for visual consistency (flagging as an open question).
  • Composes with the existing :matrix: and :widths: options.
  • Parser hook mirrors :matrix: exactly (PropBool("filterable")); the view-model wraps the rendered output; the component registers using one line in loadWebComponents.ts.

Status: prototype

I'm just tinkering with things to see where it goes.

  • See the Tables syntax page in the docs preview for a live example (syntax/tables.md).

Opt-in :filterable: option on the {table} directive:
- Parser (TableDirectiveBlock) reads PropBool("filterable"), mirroring :matrix:.
- View-model wraps the server-rendered table in a <filterable-table> host element
  (composes with :matrix: and :widths:).
- Vanilla custom element (progressive enhancement, no framework/hydration cost)
  adds a search box + auto-generated facet dropdowns for low-cardinality columns,
  with AND semantics and an aria-live 'Showing N of M' count.
- Jest suite (6 tests), CSS, and author docs in syntax/tables.md.

Prototype to de-risk a site-wide filterable-table component.

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant