Table

The id (TanStack row id — `getRowId`, else the row index) of the current row, e.g. the playing track. That row gets `data-row-active` and `aria-current="true"` and the table's active look: the next step of its own surface ramp behind the cells (over any stripe) with bold text. `null` keeps the active styling armed with no row active (no restyle when one becomes active later).

Text shown when the row model is empty. Wins over `labels.empty`.

The uncontrolled seed: the state the table starts from (sorting, pagination, grouping, filters, selection…) and returns to on reset. The table owns these slices afterwards — use `state` to control one.

The next per-column filters. Required to move a controlled `state.columnFilters`; otherwise an observer.

The next column widths (`{ [columnId]: px }`). Required to move a controlled `state.columnSizing`; otherwise an observer.

The next column visibility (`{ [columnId]: boolean }`). Required to move a controlled `state.columnVisibility`; otherwise an observer.

The next expanded rows (`true` for all, or `{ [rowId]: true }`). Required to move a controlled `state.expanded`; otherwise an observer.

The next global filter value. Required to move a controlled `state.globalFilter`; otherwise an observer.

The next grouped column ids. Required to move a controlled `state.grouping`; otherwise an observer.

The next page index / page size. Required to move a controlled `state.pagination`; otherwise an observer.

The next row selection (`{ [rowId]: true }`). Required to move a controlled `state.rowSelection`; otherwise an observer.

The next sort state after an interaction. Required to move a controlled `state.sorting`; otherwise an observer.

Observes the whole state snapshot after every change (internal or controlled), e.g. to re-fetch server-side data.

Controlled state: each slice present here is owned by you — the table shows it and reports changes through the slice's `on<Slice>Change` (`onSortingChange`, `onPaginationChange`, …) instead of applying them. Pass the callback's value back to move the table. Slices left out stay internal (seed them with `initialState`).

Panel-inherited surface background token — same values as Panel and Card.

Panel-inherited border token — same values as Panel and Card.

Render vertical cell borders — the same as `dividers="grid"`. An explicit `dividers` wins.

The Card the table renders itself in. The table is card-based by default: its caption becomes the card heading (a visually-hidden `<caption>` keeps naming the table), the toolbar (global filter, column menu, `toolbar` slot) moves into the header's trailing slot and the pagination into the footer's trailing slot; the table itself is the card's edge-to-edge content. Pass Card props here — `heading`, `subheading`, `leading`, `trailing`, `footer`, `size`, `contentBackground` (inset content)… — to style or extend that frame. The table's own surface props (`background`, `border`, `radius`…) are the card's defaults. `false` renders the bare table root instead (no Card — the pre-card DOM), for composites that supply their own frame.

Row height — `compact` tightens vertical padding.

Which hairlines separate the cells: `"rows"` between rows, `"columns"` between columns, `"grid"` both, `"none"` neither. The header→body rule always stays.

The hairlines' colour: the decorative `border.muted` tier, or the stronger default `border` tier.

Panel-inherited emphasis token — same values as Panel and Card.

Highlight the body row under the pointer with the raised hover step.

The hovered row's colour (with `hoverable`). `"overlay"` lays a translucent tint of the text colour over whatever the row already shows (body, stripe or tint), so every row gets the same contrast on any surface — lighter in dark mode, darker in light. A surface step (or `"raised"`, the step the table derives from its `background`) paints that exact opaque colour instead.

Panel-inherited corner radius token — same values as Panel and Card.

Round each body row's fill — the hover, active and stripe backgrounds — at its first and last cell (logical corners, so RTL flips them). The table switches to separated borders; row dividers move onto the cells, and the hovered row drops its edge lines. Pairs best with `dividers="none"`.

Panel-inherited shadow token — same values as Panel and Card.

Cell padding and font-size variant.

The row stripe's colour: the neutral raised surface step, or that step tinted toward a tone family. No effect without `striped`.

Zebra-stripe the rows: `true` / `"even"` fills every even row, `"odd"` every odd one. The fill is the header's raised surface step, or a tint picked by `stripeColor`.

Alternate a faint fill on every even column — for wide numeric tables. Layers over row stripes, tints and the hover fill.

Panel-inherited tone token — same values as Panel and Card.

Panel-inherited translucent surface flag — same values as Panel and Card.

Fill the parent's height: the table stretches to its container (in a column-flex parent, to the space its siblings leave) and only the rows scroll, with the header row pinned (`stickyHeader`) and the card header/footer — or the toolbar and pagination — in view. The parent needs a definite height (or to be a column flexbox that has one). Composes with `maxHeight` / `minHeight`. `"shrink"` hugs the rows instead of stretching: a short table stays short, and in a column-flex parent with a definite height a long one stops at the space its siblings leave and scrolls its rows past it.

Cap the table's scroll area at this CSS length (e.g. `"24rem"`, `"calc(100dvh - 20rem)"`): the rows scroll inside it while the header row stays pinned (`stickyHeader`) and the card header/footer — or, with `card={false}`, the toolbar and pagination — stay in view.

Keep the table's scroll area at least this tall (a CSS length), so a `fill` table in a short container never collapses to its header.

Panel-inherited padding token — same values as Panel and Card.

Pin the header to the top of the scroll container. On by default when the height is bounded (`maxHeight` / `minHeight` / `fill`); pass `false` to let the header scroll away with the rows.

Register only the aggregation functions your columns name (`{ sum: aggregationFn_sum }`). The keys become the only valid `aggregationFn` names (see `filterFns`).

Placeholder for the per-column filter inputs.

TanStack column definitions. Required unless `table` is supplied. Accepts `accessorKey`, `header`, `cell`, `enableSorting`, `enableGrouping`, `aggregationFn`, etc.

Row data. Required unless `table` is supplied. Each row is a plain object matching your column accessors.

Wire per-column filtering + TanStack faceted row models (unique values / min-max). Implied by `showColumnFilters`.

Enable column resizing via TanStack.

Opt-in flag indicating columns can be shown/hidden (consumers render the toggle UI).

Enable expandable sub-rows. Usually paired with `getSubRows`.

Enable filtering (global filter + per-column `setFilterValue`).

Enable grouping by column. Usually paired with `enableExpanding` and `initialState.grouping`.

Allow multi-select. Defaults to true when selection is on.

Enable the pagination row model.

Enable row selection. Accepts `true`/`false` or a `(row) => boolean` predicate.

Enable sorting. Click headers to cycle asc/desc/none.

Register only the filter functions your columns name so the rest tree-shake out: `{ includesString: filterFn_includesString }` (the built-ins are exported individually by `@tanstack/table-core`), plus any custom ones by name. The registry's keys become the only valid `filterFn` / `globalFilterFn` names — a column naming an unregistered one is a compile error.

Stable id for each row (recommended for selection persistence).

Per-row `<tr>` attributes and handlers, called with the row's data and its TanStack row: `data-*` / `aria-*` / `tabindex` / `style`, a `class` (merged with the row's own) and DOM-named event handlers — `ondblclick`, `onkeydown`, `onclick`… (lowercase, the native names; React/Vue/Solid rename them at the boundary). Return `undefined` for no extras. The row's own `data-row-selected` / `data-row-active` always win. In Astro the server render keeps the attributes and drops the handlers — pass `getRowProps` to the client runtime's `update()` to wire them.

Resolver for nested rows. Return the children array for a given row.

Placeholder for the global-filter input.

Switch filtering to server-side mode — Pindoba won't re-process rows; supply the slice you want rendered.

Switch pagination to server-side mode — Pindoba won't re-process rows; supply the slice you want rendered.

Switch sorting to server-side mode — Pindoba won't re-process rows; supply the slice you want rendered.

Initial page size when pagination is on.

Options shown in the built-in page-size `<select>`.

Total row count (required with `manualPagination` for accurate page counts).

Render a leading selection column: a `<Checkbox>` per row and a select-all `<Checkbox>` in its header (other headers keep sorting — no custom `header` renderer needed). Pass an object to tune it (see {@link TableSelectionColumnOptions}). It leaves `enableRowSelection` alone: a predicate there disables the checkbox of every row it rejects, and `enableRowSelection={false}` disables them all. The header checkbox reflects and toggles the whole collection — every selectable row that passes the filters, on every page — when all rows are in the client; checked when every one is selected, indeterminate when some are. With server-side data (`manualPagination`, or a `rowCount` larger than the loaded rows) it can't reach the rows it doesn't have, so it reflects and toggles the current page instead. With `enableMultiRowSelection={false}` the header has no checkbox (one row at a time can't be "all").

Render the built-in per-column filter row (one input per filterable column). Implies `enableColumnFilters`.

Render the built-in global-filter `<input>` above the table.

Whether to render built-in pagination controls. Defaults to `enablePagination`. Set `false` to keep pagination active but render your own UI (use the `pagination` snippet).

Register only the sort functions your columns name (`{ datetime: sortFn_datetime }`). The keys become the only valid `sortFn` names (see `filterFns`).

Optional `<caption>` text rendered above the table rows.

Localize every string the table renders: the empty message, the filter inputs' labels and placeholders, the "Columns" menu trigger, the grouped-row expand/collapse labels and readout, and — via `labels.pagination` — the built-in pagination footer. Labels built from runtime values (`columnFilter`, `columnFilterPlaceholder`, `group`) accept a function or a `{placeholder}` template string, so any word order works. Omitted keys keep the English defaults; the dedicated `emptyMessage` / `*Placeholder` props win over their `labels` counterparts. In Astro, prefer template strings for dynamic labels — functions can't cross the SSR → client boundary.

Optional custom cell renderer (fallback is String(value)).

Optional custom header renderer.

Optional pagination renderer (replaces built-in pagination controls).

Optional toolbar rendered above the table (replaces built-in filter).

Bindable root element reference — the Card root (default) or the bare root (`card={false}`).

Bindable reference to the live TanStack Table instance.

Per-slot style/attribute override bag — inject Panda styles or extra HTML attributes into any rendered slot.

Astro / vanilla: serialize the props into `data-table-config` so the client runtime hydrates this instance and `getPindoba(el, "table")` can `update()` it. The Astro table sets it whenever it builds its own store (not with a headless `table`). Frameworks with their own reactivity don't need it.

Advanced (static): pass a pre-built TanStack Table instance for SSR rendering. `data`/`columns`/feature flags are ignored and the table does NOT re-render on interaction. For interactive custom setups, prefer `tableOptions`.

Reactive escape hatch: consumer-authored TanStack `TableOptions` merged over Pindoba's defaults. The wrapper builds its reactive store from these, so sort/filter/paginate stay interactive. In Astro, function-valued options can't cross the SSR→client boundary (pass those through the hydrated instance's `update()`).