DataGrid

Sortable, filterable, pageable table. The server renders every row, so no-JS readers and search engines see the full table; the script enhances in place with sorting, filtering, pagination, and row selection.

Invoices

Filter Invoices

Invoices
Customer	Amount	Status
Ada Lovelace	1200	Paid
Grace Hopper	850	Pending
Alan Turing	2300	Overdue
Katherine Johnson	1450	Paid
Margaret Hamilton	1980	Pending
Barbara Liskov	1100	Paid
Frances Allen	1750	Overdue
Carol Shaw	960	Pending
Anita Borg	1620	Paid
Radia Perlman	2100	Pending
Lynn Conway	1340	Paid
Sophie Wilson	1875	Overdue

Page 1 of 3Showing 1–5 of 12

<DataGrid
  id="invoices"
  label="Invoices"
  name="invoices"
  columns={invoiceColumns}
  rows={invoices}
  rowKey="id"
  selectable
  pageSize={5}
/>

Plain variant

A grid with no sorting, filtering, selection, or pagination chrome: all rows, always visible.

Team
Name	Role
Ada Lovelace	Engineer
Grace Hopper	Lead
Alan Turing	Researcher

Page 1 of 1Showing 1–3 of 3

<DataGrid
  id="team"
  label="Team"
  columns={teamColumns}
  rows={team}
  rowKey="id"
  filterable={false}
  pageSize={10}
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Grid id; prefixes the filter input id.
`label`	`string`	-	Table caption and filter input name.
`name`	`string`	`id`	Hidden inputs form name (selected ids).
`columns`	`Array<{ key; header; sortable?; align? }>`	-	Column defs; `sortable` enables header sorting.
`rows`	`Array<Record<string, string \| number>>`	-	All rows, rendered server-side.
`rowKey`	`string`	-	Column key holding the unique row id.
`selectable`	`boolean`	`false`	Row checkboxes plus select-all header.
`filterable`	`boolean`	`true`	Show the filter search input.
`pageSize`	`number`	`5`	Rows per client page.
`striped`	`boolean`	`false`	Alternating row treatment.
`class`	`string`	-	Style passthrough.

No-JS behavior

Without JavaScript the full table renders: every row, realth scope="col" headers, caption, and visible row checkboxes. Sorting, filtering, and pagination are enhancements only.

Events

Selection changes dispatch ink:grid:change with{ selected: string[] }. Selected ids also submit with the form via hidden inputs named name.

Accessibility

Sortable headers carry aria-sort and toggle with click, Enter, or Space.
The status line is a live region (role="status"): page and range counts announce politely.
Row checkboxes are native and labelled (Select row …); the header box selects all and shows indeterminate state.
Pagination buttons disable at the first and last page instead of linking nowhere.