# ResponsiveTable

Semantic table block that collapses dense operational rows into labeled mobile cells.

[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/responsive-table.tsx)

## Live preview

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

## Install

```bash
netscript ui:add responsive-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 { ResponsiveTable } from '@app/components/ui/responsive-table.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><ResponsiveTable caption="Orders" rows={[{id:"SO–10480",customer:"Aiko Tanaka"}]} getRowKey={(row)=>row.id} columns={[{key:"id",label:"Order",priority:"primary",cell:(row)=>row.id},{key:"customer",label:"Customer",cell:(row)=>row.customer}]} /></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 |
| --- | --- | --- | --- | --- |
| `ResponsiveTableProps` | `columns` | `[object Object]` | No |  |
| `ResponsiveTableProps` | `rows` | `[object Object]` | No |  |
| `ResponsiveTableProps` | `getRowKey` | `(row: Row, index: number) => string \| number` | No |  |
| `ResponsiveTableProps` | `caption` | `Renderable` | Yes |  |
| `ResponsiveTableProps` | `emptyState` | `Renderable` | Yes |  |
| `ResponsiveTableProps` | `summary` | `Renderable` | Yes |  |
| `ResponsiveTableProps` | `class` | `string` | Yes |  |

```typescript
type ResponsiveTableAlign = "start" | "center" | "end"
type ResponsiveTablePriority = "primary" | "secondary" | "tertiary"
ResponsiveTableProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children">
```

## Keyboard

No S3 keyboard contract is registered for this item. Native controls retain browser keyboard behavior.

## Tokens

No S3 token contract is registered for this item.

CSS custom properties referenced directly: `--ns-border`, `--ns-border-subtle`, `--ns-card`, `--ns-card-bg`, `--ns-card-fg`, `--ns-card-footer`, `--ns-font-mono`, `--ns-font-sans`, `--ns-leading-body`, `--ns-leading-label`, `--ns-leading-small`, `--ns-muted-fg`, `--ns-radius-card`, `--ns-radius-lg`, `--ns-shadow-xs`, `--ns-space-2`, `--ns-space-3`, `--ns-space-4`, `--ns-space-5`, `--ns-space-6`, `--ns-surface`, `--ns-table-cell-padding-x`, `--ns-table-head`, `--ns-table-hover`, `--ns-table-row-height`, `--ns-table-row-rule`, `--ns-text-body`, `--ns-text-label`, `--ns-text-small`, `--ns-tracking-body`, `--ns-tracking-label`, `--ns-tracking-small`, `--ns-weight-body`, `--ns-weight-label`, `--ns-weight-small`.

## Contract and compatibility

This registry item ships without an S3 entry. Implementation prop documentation is authoritative.