ResponsiveTable

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

All components · Theme builder · Implementation source

Live preview

Install

Shell

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.

TypeScript

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