DataTable

Composed table/list block with a shared header, row body, and footer seam.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add data-table

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Badge } from '@app/components/ui/badge.tsx';
import { DataTable } from '@app/components/ui/data-table.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><DataTable><DataTable.Header>Orders</DataTable.Header><DataTable.Body><DataTable.Row cols="2fr 1fr"><span>SO–10480 · Aiko Tanaka</span><Badge variant="success">Paid</Badge></DataTable.Row></DataTable.Body><DataTable.Footer>1 order</DataTable.Footer></DataTable></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`DataTableSectionProps`	`children`	`Renderable`	No
`DataTableSectionProps`	`class`	`string`	Yes
`DataTableProps`	`interactive`	`boolean`	Yes
`DataTableRowProps`	`cols`	`string`	Yes	CSS `grid-template-columns` for this row's cells, e.g. `'2fr 1fr 1fr'` or `'minmax(0, 1fr) auto'`. Without it the row is a single-column grid and cells stack — pass the same template to header and body rows to align them.

TypeScript

DataTableSectionProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children">
DataTableProps extends DataTableSectionProps
DataTableRowProps extends DataTableSectionProps

Keyboard

Presentation component; no component-specific keyboard interactions.

Tokens

Semantic contract roles: space/card/padding, space/inline/gap.

CSS custom properties referenced directly: --ns-border, --ns-border-width, --ns-card-bg, --ns-card-border, --ns-card-border-bottom, --ns-card-border-side, --ns-card-border-top, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-mono, --ns-font-sans, --ns-leading-body, --ns-leading-label, --ns-marker, --ns-muted-fg, --ns-radius-card, --ns-ring, --ns-selected, --ns-size-icon-sm, --ns-space-0-5, --ns-space-2, --ns-space-3, --ns-space-4, --ns-space-5, --ns-stack-gap, --ns-state-hover-opacity, --ns-table-cell-padding-x, --ns-table-head, --ns-table-head-rule, --ns-table-head-rule-width, --ns-table-hover, --ns-table-row-bg, --ns-table-row-height, --ns-table-row-rule, --ns-table-row-rule-width, --ns-text-body, --ns-text-label, --ns-tracking-body, --ns-tracking-label, --ns-weight-body, --ns-weight-label.

Contract and compatibility

Accessibility pattern: native rows and action controls

Native DOM attributes pass through where the implementation accepts them.
DataTable has compound slots; DataGrid is its rows/columns-driven package presentation. Native row links/buttons retain Tab/Enter/Space behavior, without an ARIA grid navigation claim.
Utility compatibility anatomy is included for existing shipped helpers; it does not implement a design gap.
Compatibility values describe already-shipped headless or Utility state hooks. They are separate from the settled canonical design vocabulary and must be retained by styles serving these public APIs.

Design contract values marked planned are not implementation props. The props above describe what ships today.