Table

The source shown unchanged: point data at a relation and it draws every row and column. Where charts compute from their source, Table just displays it.

Connecting…

<Table data="db.iris" />

Query, count, and filter

Swap data for a query to show a shaped result. showRowCount adds a footer tally, filterable turns on the filter bar, and maxHeight caps the grid so it scrolls instead of growing.

Connecting…

<Table
  query="SELECT species, avg(petal_length) AS petal, avg(sepal_length) AS sepal FROM db.iris GROUP BY species"
  showRowCount
  filterable
  maxHeight={320}
/>

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`maxHeight`	`number` \| `string`	Caps the grid height; rows scroll past it.
`showRowCount` / `showRowIndex`	`bool`	A footer row tally, and a leading index column.
`filterable`	`bool`	Show the per-column filter bar.
`columnOrder` / `hiddenColumns`	`string[]`	Reorder or hide columns by name.
`selectable`	`bool`	Add row-selection checkboxes.
`canEditRows` / `canInsert`	`bool`	Allow inline edits and new rows (writes go through the source).

Expressions in query and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

Table ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // Table, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}