Skip to main content

Data Surfaces

4 pages

Tables with the toolbar, the chart and the comparison already wired.

ChartFrame (expand / flip-to-table / download-CSV) wired to @elabs-ai/components-data: full TanStack DataTable on flip and downloadCsv on export.

2 examples

The canonical plan/feature comparison matrix (brand-ui's Compare gap): a header with one featured column (badge + recessed wash), feature rows with check / dash / value cells, a price row, and a per-plan CTA row.

1 example

Which tables are there, and how do they hang together?

An entity-relationship view of a database on the flow canvas: custom table nodes with a row per column (keys, nullability, personal data), foreign keys as custom edges with crow’s-foot end marks that meet each table at the right row, a table list by schema with search and visibility, an all-columns / keys-only / names-only switch, auto-layout, and an inspector with columns, followable relations, indexes and a readable CREATE TABLE. Renders a plain DataModel object.

6 examples

Filterable, sortable, paginated TanStack data table with toolbar.

1 example