# DataTable

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

[All components](https://rickylabs.github.io/netscript/design-system/components/) · [Theme builder](https://rickylabs.github.io/netscript/create/) · [Implementation source](https://github.com/rickylabs/netscript/blob/main/packages/fresh-ui/registry/components/ui/data-table.tsx)

## Live preview

[Open live data-table preview](https://rickylabs.github.io/netscript/assets/fresh-ui/preview/?component=data-table&theme=studio-utility)

## Install

```bash
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.

```tsx
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.