@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/data-grid.json

@@ -0,0 +1,1687 @@
+{
+  "family": "data-grid",
+  "ui": "data-grid",
+  "binding": "react",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Table that sorts, filters and selects records."
+  },
+  "axes": {
+    "variant": [
+      "plain",
+      "ruled",
+      "framed"
+    ],
+    "striped": [
+      true,
+      false
+    ],
+    "stickyHeader": [
+      true,
+      false
+    ],
+    "stickyTo": [
+      "scroll",
+      "page"
+    ],
+    "selectionMode": [
+      "none",
+      "single",
+      "multiple",
+      "range"
+    ],
+    "editMode": [
+      "cell",
+      "row"
+    ],
+    "mode": [
+      "client",
+      "server"
+    ],
+    "filterRow": [
+      true,
+      false
+    ],
+    "virtualize": [
+      "auto",
+      true,
+      false
+    ],
+    "columnOverflow": [
+      "auto",
+      "popin",
+      "scroll"
+    ],
+    "activatable": [
+      true,
+      false
+    ],
+    "align": [
+      "start",
+      "center",
+      "end"
+    ],
+    "numeric": [
+      true,
+      false
+    ],
+    "text": [
+      "wrap",
+      "truncate",
+      "nowrap"
+    ],
+    "density": [
+      "comfortable",
+      "compact",
+      "dense"
+    ]
+  },
+  "members": {
+    "data-grid": {
+      "nativeElement": "div",
+      "defaults": {
+        "variant": "ruled",
+        "striped": false,
+        "stickyHeader": true,
+        "stickyTo": "scroll",
+        "selectionMode": "none",
+        "editMode": "cell",
+        "filterRow": false,
+        "virtualize": "auto",
+        "columnOverflow": "auto",
+        "activatable": false,
+        "align": "start",
+        "numeric": false,
+        "text": "truncate",
+        "loading": false,
+        "overscan": 6,
+        "skeletonRows": 8,
+        "filterDebounce": 300,
+        "loadMoreThreshold": 20,
+        "pageSizes": [
+          25,
+          50,
+          100
+        ]
+      },
+      "capabilities": [
+        "sort",
+        "filter",
+        "columns",
+        "selection",
+        "current",
+        "open",
+        "virtualization",
+        "overflow",
+        "appearance",
+        "arrangement",
+        "content",
+        "loading",
+        "live",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "current",
+        "expanded",
+        "disabled",
+        "loading",
+        "invalid",
+        "readonly",
+        "dragging",
+        "drop-target",
+        "open"
+      ],
+      "parts": [
+        "root",
+        "scroll",
+        "head",
+        "header-row",
+        "column-group",
+        "column-header",
+        "sort",
+        "column-description",
+        "column-actions",
+        "column-help",
+        "column-menu",
+        "column-menu-description",
+        "resizer",
+        "drop-indicator",
+        "filter-row",
+        "filter-cell",
+        "filter",
+        "filter-panel",
+        "filter-condition",
+        "filter-operator",
+        "filter-operand",
+        "filter-join",
+        "filter-actions",
+        "body",
+        "pinned-rows",
+        "row",
+        "row-header",
+        "cell",
+        "editor",
+        "selection",
+        "expander",
+        "detail",
+        "popin-header",
+        "popin",
+        "popin-field",
+        "popin-label",
+        "popin-value",
+        "group-row",
+        "group-toggle",
+        "tree-toggle",
+        "row-handle",
+        "summary",
+        "summary-cell",
+        "empty",
+        "loader",
+        "footer",
+        "actions"
+      ]
+    }
+  },
+  "docs": {
+    "dataGrid": {
+      "imports": {
+        "source": "import { DataGrid, DataGridDefaultsProvider, type DataGridColumn } from '@slotted/react';\nimport type { GridColumn, GridQuery, GridColumnState } from '@slotted/core/grid';\nimport { applyQuery, emptyQuery, toGridParams, fromGridParams } from '@slotted/core/grid';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div[role=\"grid\"]",
+          "required": true,
+          "purpose": "The frame and the widget: data-ui=\"data-grid\", every axis, aria-rowcount, aria-colcount, aria-multiselectable, aria-busy, and the column template as --slotted-data-grid-template."
+        },
+        {
+          "part": "scroll",
+          "element": "div",
+          "required": true,
+          "purpose": "The scroller on both axes, and the window the virtualiser measures. Carries data-overflowing, data-at-start and data-at-end while the columns overflow."
+        },
+        {
+          "part": "head",
+          "element": "div[role=\"rowgroup\"]",
+          "required": true,
+          "purpose": "The header rows, sticky to the top of the scroller by default."
+        },
+        {
+          "part": "header-row",
+          "element": "div[role=\"row\"]",
+          "required": true,
+          "purpose": "One row of the header: the column groups, or the column names."
+        },
+        {
+          "part": "column-group",
+          "element": "div[role=\"columnheader\"]",
+          "required": false,
+          "purpose": "A group heading spanning its columns through aria-colspan."
+        },
+        {
+          "part": "column-header",
+          "element": "div[role=\"columnheader\"]",
+          "required": true,
+          "purpose": "A column’s name and its controls. Carries aria-sort on the first sort key, data-sorted, data-filtered, data-pinned, data-dragging, data-drop-target and data-resizing. The name truncates, and a name its box cuts opens a hint with the whole of it — shown rather than read, because the header already states the words."
+        },
+        {
+          "part": "sort",
+          "element": "span",
+          "required": false,
+          "purpose": "The direction mark on a sorted column, with data-index when the order holds more than one key."
+        },
+        {
+          "part": "column-description",
+          "element": "span",
+          "required": false,
+          "purpose": "The column’s description, visually hidden, referenced by the header’s aria-describedby and by the column menu’s; present whenever the column has a description."
+        },
+        {
+          "part": "column-actions",
+          "element": "span",
+          "required": false,
+          "purpose": "The slot at the trailing edge holding the column help, the filter trigger and the column menu. F2 on the header enters it, Tab cycles it, Escape leaves it."
+        },
+        {
+          "part": "column-help",
+          "element": "button",
+          "required": false,
+          "purpose": "The circled question mark on a column with a description or a help node, always shown. Opens a popover by click, Enter or Space — never by hover — holding both."
+        },
+        {
+          "part": "column-menu",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens the column’s menu: sort, filter, pin, fit, fit all, hide, manage."
+        },
+        {
+          "part": "column-menu-description",
+          "element": "div[aria-hidden]",
+          "required": false,
+          "purpose": "The description again, as a muted caption atop the column menu; hidden from the reader, who hears it once through the menu’s aria-describedby."
+        },
+        {
+          "part": "resizer",
+          "element": "div[aria-hidden]",
+          "required": false,
+          "purpose": "The pointer’s handle on the trailing edge; a double press fits the column."
+        },
+        {
+          "part": "drop-indicator",
+          "element": "div",
+          "required": false,
+          "purpose": "The line between two columns while one is dragged."
+        },
+        {
+          "part": "filter-row",
+          "element": "div[role=\"row\"]",
+          "required": false,
+          "purpose": "The row under the header, with filterRow, holding one operand per filterable column."
+        },
+        {
+          "part": "filter-cell",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "One cell of the filter row; data-filtered while its column has a rule."
+        },
+        {
+          "part": "filter",
+          "element": "button",
+          "required": false,
+          "purpose": "The funnel on a filtered column, and the shortest way back to its panel."
+        },
+        {
+          "part": "filter-panel",
+          "element": "div",
+          "required": false,
+          "purpose": "The compact panel in a popover, carrying data-ui itself because it is rendered outside the root."
+        },
+        {
+          "part": "filter-condition",
+          "element": "div",
+          "required": false,
+          "purpose": "One line of the panel: the operator and its operand(s); data-operands says how many."
+        },
+        {
+          "part": "filter-operator",
+          "element": "div",
+          "required": false,
+          "purpose": "The operator chooser: a select in the panel, a symbol button in the row."
+        },
+        {
+          "part": "filter-operand",
+          "element": "div",
+          "required": false,
+          "purpose": "The operand control(s), with data-kind and data-range for a between."
+        },
+        {
+          "part": "filter-join",
+          "element": "div",
+          "required": false,
+          "purpose": "And / Or between the two conditions of the panel."
+        },
+        {
+          "part": "filter-actions",
+          "element": "div",
+          "required": false,
+          "purpose": "Clear and Apply."
+        },
+        {
+          "part": "body",
+          "element": "div[role=\"rowgroup\"]",
+          "required": true,
+          "purpose": "The rows; carries the virtual window’s total height and start offset."
+        },
+        {
+          "part": "pinned-rows",
+          "element": "div[role=\"rowgroup\"]",
+          "required": false,
+          "purpose": "Rows held under the head or over the summary, out of the query."
+        },
+        {
+          "part": "row",
+          "element": "div[role=\"row\"]",
+          "required": true,
+          "purpose": "One record: aria-rowindex, aria-selected, data-selected, data-current, data-expanded, data-editing, data-disabled."
+        },
+        {
+          "part": "row-header",
+          "element": "div[role=\"rowheader\"]",
+          "required": false,
+          "purpose": "The cell of the column marked rowHeader, which a screen reader repeats for the record."
+        },
+        {
+          "part": "cell",
+          "element": "div[role=\"gridcell\"]",
+          "required": true,
+          "purpose": "One value: aria-colindex, data-align, data-numeric, data-text, data-pinned, data-current, data-in-range, data-range-edge, data-editing, data-invalid, data-loading, data-readonly."
+        },
+        {
+          "part": "editor",
+          "element": "div",
+          "required": false,
+          "purpose": "The control editing a cell, plain and sm, filling it."
+        },
+        {
+          "part": "selection",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "The checkbox column, always pinned to the start; in the header it selects every row the query left."
+        },
+        {
+          "part": "expander",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens a row’s detail; aria-expanded and aria-controls."
+        },
+        {
+          "part": "detail",
+          "element": "div[role=\"row\"]",
+          "required": false,
+          "purpose": "The open detail: one cell spanning every column, held to the frame’s width."
+        },
+        {
+          "part": "popin-header",
+          "element": "div[role=\"columnheader\"]",
+          "required": false,
+          "purpose": "The pop-in’s column, last in the header row while columns are out of space: messages.popinHeader, visually hidden, with no track."
+        },
+        {
+          "part": "popin",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "The last cell of a record’s row and of the summary while columns are out of space: the row’s second line, every track, held to the frame’s width; aria-colindex is the last."
+        },
+        {
+          "part": "popin-field",
+          "element": "div",
+          "required": false,
+          "purpose": "One column in the pop-in, in the order of the columns: its label over its value."
+        },
+        {
+          "part": "popin-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The column’s label, in the small muted type; left out for a column with none."
+        },
+        {
+          "part": "popin-value",
+          "element": "div",
+          "required": false,
+          "purpose": "The value, drawn by the column’s cell renderer with the cell’s own context; an editable column is read only here."
+        },
+        {
+          "part": "group-row",
+          "element": "div[role=\"row\"]",
+          "required": false,
+          "purpose": "A group heading: aria-level, aria-expanded, the value, the count, the aggregates."
+        },
+        {
+          "part": "group-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens and closes a group."
+        },
+        {
+          "part": "tree-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "Opens and closes a tree row’s children; a leaf keeps its room empty."
+        },
+        {
+          "part": "row-handle",
+          "element": "button",
+          "required": false,
+          "purpose": "The grip a row is dragged by; disabled while the query is not at rest."
+        },
+        {
+          "part": "summary",
+          "element": "div[role=\"rowgroup\"]",
+          "required": false,
+          "purpose": "The aggregates of the whole query, pinned to the end."
+        },
+        {
+          "part": "summary-cell",
+          "element": "div[role=\"gridcell\"]",
+          "required": false,
+          "purpose": "One aggregate."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "The result-state for no rows, no results or an error, held to the frame’s width."
+        },
+        {
+          "part": "loader",
+          "element": "div[role=\"rowgroup\"]",
+          "required": false,
+          "purpose": "Skeleton rows on a first load."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The bar under the grid: the range, the consumer’s pagination, load more."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "Row actions inside a cell of kind actions, revealed by hover and by the cursor."
+        }
+      ],
+      "api": [
+        {
+          "name": "rows",
+          "type": "readonly Row[]",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The records; the grid never mutates them. Left out when a dataSource answers for them."
+        },
+        {
+          "name": "rowKey",
+          "type": "keyof Row | (row) => string",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "A field name or a function: the key every state model names a row by."
+        },
+        {
+          "name": "columns",
+          "type": "GridColumn<Row>[]",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The column model: id, label, description, kind, accessor, format, compare, width, minWidth, maxWidth, flex, priority, sortable, filterable, searchable, editable, resizable, reorderable, hideable, rowHeader, options, aggregate, validate, parse — and help, a node for the column’s help popover."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DataGridColumn",
+          "description": "What the column is: the header’s accessible description, the caption atop its menu and the first line of its help popover."
+        },
+        {
+          "name": "help",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGridColumn",
+          "description": "The column’s own help, under the description in the popover the column-help button opens. Its presence alone draws the button."
+        },
+        {
+          "name": "priority",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "DataGridColumn",
+          "description": "The lower, the longer the column stays when the frame is too narrow. A column without one leaves before every numbered one; the identity column and an actions column never leave."
+        },
+        {
+          "name": "popin",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "DataGridColumn",
+          "description": "Whether a column with no room moves into the row’s pop-in; false hides it instead."
+        },
+        {
+          "name": "columnGroups",
+          "type": "GridColumnGroup[]",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Headings spanning columns, drawn as a row above the names."
+        },
+        {
+          "name": "mode",
+          "type": "'client' | 'server'",
+          "defaultValue": "inferred",
+          "appliesTo": "DataGrid",
+          "description": "client applies the query to rows; server draws rows as given. server when totalCount or hasMore is present."
+        },
+        {
+          "name": "totalCount",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The whole set’s size in server mode; aria-rowcount and the range read it."
+        },
+        {
+          "name": "hasMore",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Whether a page past this one exists when the total is unknown; the footer offers Load more."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DataGrid",
+          "description": "Skeleton rows with no rows to keep; aria-busy and a dimmed body over rows already shown."
+        },
+        {
+          "name": "error",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The message of a failed load; draws the error state with Try again when onRetry is set."
+        },
+        {
+          "name": "disabledKeys",
+          "type": "string[]",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Rows that are neither selectable nor editable, drawn with data-disabled."
+        },
+        {
+          "name": "query",
+          "type": "GridQuery",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "sort, filter, search, page and group in one object. Present puts the query in controlled mode."
+        },
+        {
+          "name": "defaultQuery",
+          "type": "GridQuery",
+          "defaultValue": "emptyQuery()",
+          "appliesTo": "DataGrid",
+          "description": "The query an uncontrolled grid starts from, read once."
+        },
+        {
+          "name": "onQueryChange",
+          "type": "(query, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked before the query moves; the request carries change: sort | filter | search | page | group, the reason, and cancel()."
+        },
+        {
+          "name": "columnState",
+          "type": "GridColumnState",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "order, widths, hidden and pinned. Present puts the arrangement in controlled mode; it is normalised against columns."
+        },
+        {
+          "name": "defaultColumnState",
+          "type": "Partial<GridColumnState>",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The arrangement an uncontrolled grid starts from, read once."
+        },
+        {
+          "name": "onColumnStateChange",
+          "type": "(state, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked before the arrangement moves; the request carries change: order | width | hidden | pinned."
+        },
+        {
+          "name": "onManageColumns",
+          "type": "() => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Called by the column menu’s Manage columns; the application opens its column-manager."
+        },
+        {
+          "name": "onOutOfSpaceChange",
+          "type": "(outOfSpace: GridOutOfSpace) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Called when the columns a narrow frame took out by priority change — those in the pop-in and those hidden. Never part of columnState."
+        },
+        {
+          "name": "density",
+          "type": "'comfortable' | 'compact' | 'dense' | null",
+          "defaultValue": "the page’s",
+          "appliesTo": "DataGrid",
+          "description": "This grid’s own density, written as data-slotted-density on the root; absent or null, the page’s."
+        },
+        {
+          "name": "selectionMode",
+          "type": "'none' | 'single' | 'multiple' | 'range'",
+          "defaultValue": "none",
+          "appliesTo": "DataGrid",
+          "description": "Rows, one or many, with the checkbox column in multiple; or a rectangle of cells."
+        },
+        {
+          "name": "value",
+          "type": "string | string[] | null",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The selected row (single) or rows (multiple). Present puts the selection in controlled mode."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | string[] | null",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The selection an uncontrolled grid starts from."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked before the selection moves, with pointer, keyboard, select, clear or programmatic."
+        },
+        {
+          "name": "range",
+          "type": "GridRange | null",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The cell rectangle as anchor and focus, in range mode. Present puts it in controlled mode."
+        },
+        {
+          "name": "defaultRange",
+          "type": "GridRange | null",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The rectangle an uncontrolled grid starts from."
+        },
+        {
+          "name": "onRangeChange",
+          "type": "(range, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked before the rectangle moves, with pointer, keyboard, clear or programmatic."
+        },
+        {
+          "name": "current",
+          "type": "GridCell | null",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Where the cursor stands: a row key (or header, filter, summary, group:<key>) and a column id. Present puts the cursor in controlled mode."
+        },
+        {
+          "name": "defaultCurrent",
+          "type": "GridCell | null",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Where an uncontrolled cursor starts."
+        },
+        {
+          "name": "onCurrentChange",
+          "type": "(cell, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked before the cursor moves, with pointer, keyboard or programmatic."
+        },
+        {
+          "name": "expanded",
+          "type": "string[]",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The rows whose detail is open. Present puts it in controlled mode."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "string[]",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The open details an uncontrolled grid starts with."
+        },
+        {
+          "name": "onExpandedChange",
+          "type": "(keys, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked before a detail opens or closes."
+        },
+        {
+          "name": "expandedGroups",
+          "type": "string[] | 'all'",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The open groups, or all. Present puts it in controlled mode."
+        },
+        {
+          "name": "defaultExpandedGroups",
+          "type": "string[] | 'all'",
+          "defaultValue": "all",
+          "appliesTo": "DataGrid",
+          "description": "The open groups an uncontrolled grid starts with: every group."
+        },
+        {
+          "name": "onExpandedGroupsChange",
+          "type": "(keys, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked before a group opens or closes."
+        },
+        {
+          "name": "expandable",
+          "type": "boolean | (row) => boolean",
+          "defaultValue": "true with renderDetail",
+          "appliesTo": "DataGrid",
+          "description": "Which rows have a detail."
+        },
+        {
+          "name": "editMode",
+          "type": "'cell' | 'row'",
+          "defaultValue": "cell",
+          "appliesTo": "DataGrid",
+          "description": "One cell at a time, or every editable cell of the row."
+        },
+        {
+          "name": "onEditStart",
+          "type": "(cell) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "An editor opened."
+        },
+        {
+          "name": "onEditCommit",
+          "type": "(commit) => void | Promise<void>",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "A draft committed: key, column, value, previous, row, reason and every change of the row. A rejected promise reopens the editor with the draft and the error."
+        },
+        {
+          "name": "onEditCancel",
+          "type": "(cell) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "A draft cancelled."
+        },
+        {
+          "name": "activatable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DataGrid",
+          "description": "A double press or Enter on a text cell reports the row through onActivate."
+        },
+        {
+          "name": "onActivate",
+          "type": "(event) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The row’s key, the reason and the event."
+        },
+        {
+          "name": "filterRow",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DataGrid",
+          "description": "The row of operands under the header."
+        },
+        {
+          "name": "filterDebounce",
+          "type": "number",
+          "defaultValue": "300",
+          "appliesTo": "DataGrid",
+          "description": "Milliseconds a text or number operand in the filter row waits before it applies."
+        },
+        {
+          "name": "virtualize",
+          "type": "'auto' | boolean",
+          "defaultValue": "auto",
+          "appliesTo": "DataGrid",
+          "description": "auto windows rows above a hundred and middle columns above twenty."
+        },
+        {
+          "name": "rowHeight",
+          "type": "number | 'auto'",
+          "defaultValue": "density",
+          "appliesTo": "DataGrid",
+          "description": "Pixels per row, read once from the first row when unstated; auto measures every row, capped by --slotted-data-grid-row-max-block-size. While a pop-in is drawn every row is measured, as under auto."
+        },
+        {
+          "name": "columnOverflow",
+          "type": "'auto' | 'popin' | 'scroll'",
+          "defaultValue": "auto",
+          "appliesTo": "DataGrid",
+          "description": "What a frame too narrow for the template does: popin moves columns into each row’s pop-in by priority; scroll keeps them and scrolls sideways; auto pops in on a frame under 600px, or under 1024px when the main pointer is coarse — a phone, a small tablet — and scrolls elsewhere, where a mouse or a trackpad scrolls and the columns keep their layout."
+        },
+        {
+          "name": "overscan",
+          "type": "number",
+          "defaultValue": "6",
+          "appliesTo": "DataGrid",
+          "description": "Rows mounted past each edge of the window."
+        },
+        {
+          "name": "tree",
+          "type": "{ parentKey, column?, hasChildren? }",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Rows as a tree, each naming its parent by key; the open branches are expanded and the root is a treegrid."
+        },
+        {
+          "name": "onLoadChildren",
+          "type": "({ key, row }) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Called when a branch hasChildren says has children opens and none are in rows."
+        },
+        {
+          "name": "dataSource",
+          "type": "{ getRows(query, { signal }), cacheSize? }",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The grid asks for its own rows per query, aborting the request before, keeping answers by query; server mode with its own loading and error."
+        },
+        {
+          "name": "pinnedRows",
+          "type": "{ top?: string[], bottom?: string[] }",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Rows held at the top or the bottom of the body, out of the query and always on screen."
+        },
+        {
+          "name": "rowsReorderable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DataGrid",
+          "description": "A grip per row; the pointer drags it and Alt with the vertical arrows moves it. Only while the query is at rest and without a tree."
+        },
+        {
+          "name": "onRowsReorder",
+          "type": "({ key, from, to, reason, event }) => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Where a row goes in rows: from, and the index it takes once moved. The consumer moves it."
+        },
+        {
+          "name": "highlightChanges",
+          "type": "boolean | number",
+          "defaultValue": "false",
+          "appliesTo": "DataGrid",
+          "description": "Marks a mounted cell whose value changed between two rows, for the stated milliseconds (true is 1200)."
+        },
+        {
+          "name": "loadMoreThreshold",
+          "type": "number",
+          "defaultValue": "20",
+          "appliesTo": "DataGrid",
+          "description": "Rows left below the window before onLoadMore is called."
+        },
+        {
+          "name": "onLoadMore",
+          "type": "() => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Asked for the next page when hasMore is true."
+        },
+        {
+          "name": "onRetry",
+          "type": "() => void",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The error state’s Try again."
+        },
+        {
+          "name": "skeletonRows",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "DataGrid",
+          "description": "Rows the first load draws."
+        },
+        {
+          "name": "pageSizes",
+          "type": "number[]",
+          "defaultValue": "25,50,100",
+          "appliesTo": "DataGrid",
+          "description": "The sizes a page-size control in the footer offers, read through useDataGridDefaults."
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'ruled' | 'framed'",
+          "defaultValue": "ruled",
+          "appliesTo": "DataGrid",
+          "description": "No rules, rules between rows, or the border and the radius."
+        },
+        {
+          "name": "striped",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "DataGrid",
+          "description": "Every second row tinted."
+        },
+        {
+          "name": "stickyHeader",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "DataGrid",
+          "description": "The header, the filter row and the summary stay while the rows scroll."
+        },
+        {
+          "name": "stickyTo",
+          "type": "'scroll' | 'page'",
+          "defaultValue": "scroll",
+          "appliesTo": "DataGrid",
+          "description": "What the header sticks inside: the grid’s own scroller, or the page — which gives up the grid’s own scrolling and windowing."
+        },
+        {
+          "name": "height",
+          "type": "string | number",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The frame’s height; without one the grid grows to its rows."
+        },
+        {
+          "name": "labelledBy",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The id of the element that names the grid; a native aria-label names it directly, and with neither the grid is named by messages.grid."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DataGridMessages>",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Words laid over the language in force, key by key: every control, state and announcement, the grid’s name (grid), and filterYes and filterNo for a boolean cell. The operator names and symbols are the groups filterOperators and filterSymbols."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the language in force",
+          "appliesTo": "DataGrid",
+          "description": "BCP 47, for the collator, the number and the date formats."
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The zone a timestamp is read in."
+        },
+        {
+          "name": "renderCell",
+          "type": "(context) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "What a cell draws; cellRenderers does it per column and wins."
+        },
+        {
+          "name": "renderEditor",
+          "type": "(context) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "What a cell edits with; editorRenderers per column wins. The context carries draft, setDraft, commit and cancel."
+        },
+        {
+          "name": "renderHeader",
+          "type": "(context) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "What a header draws in place of the label."
+        },
+        {
+          "name": "renderDetail",
+          "type": "(row, key) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "A row’s detail; its presence draws the expander column."
+        },
+        {
+          "name": "renderGroup",
+          "type": "(context) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "What a group row draws beside its toggle."
+        },
+        {
+          "name": "renderEmpty",
+          "type": "(status) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The empty, no-results or error state in place of the grid’s result state."
+        },
+        {
+          "name": "renderFilterOperand",
+          "type": "(context) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The operand control in the panel and the row, for a kind the grid has no field for."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "What stands in the bar under the grid, after the range."
+        },
+        {
+          "name": "showRange",
+          "type": "boolean",
+          "defaultValue": "when paged",
+          "appliesTo": "DataGrid",
+          "description": "Whether the footer states the range."
+        },
+        {
+          "name": "handle",
+          "type": "RefObject<DataGridHandle>",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "focusCell, scrollToRow, scrollToColumn, scrollToCell, startEdit, stopEdit, autofit (one column, or every resizable column as one request, reason programmatic), getOutOfSpace, getVisibleRows, toCsv, exportCsv, reload, selectAll, clearSelection, element."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "GridColumn",
+          "description": "Where the value sits; a number column sits at the end unless told otherwise."
+        },
+        {
+          "name": "numeric",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "GridColumn",
+          "description": "Tabular figures and end alignment; true for kind number."
+        },
+        {
+          "name": "text",
+          "type": "'wrap' | 'truncate' | 'nowrap'",
+          "defaultValue": "truncate",
+          "appliesTo": "GridColumn",
+          "description": "What a long value does."
+        }
+      ],
+      "composition": [
+        {
+          "name": "DataGridDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold and skeletonRows once for a subtree. A grid that states one itself still wins. Its words and its locale come from the language in force (SlottedProvider)."
+        },
+        {
+          "name": "@slotted/core/grid",
+          "type": "module",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "applyQuery, emptyQuery, withSortPress, withColumnFilter, withSearch, withPageIndex, withGroup, toGridParams, fromGridParams, normalizeColumnState, serializeColumnState, parseColumnState: the engine the grid runs on, for a server mock, a URL and a saved view."
+        },
+        {
+          "name": "renderCell, renderEditor, renderHeader, renderDetail, renderGroup, renderEmpty, renderFilterOperand",
+          "type": "render props",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Every surface a consumer replaces, per grid or per column through cellRenderers and editorRenderers. row, cell, head and body are fixed: the layout and the roles are theirs."
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Pagination, a page-size select, a count: the consumer’s own controls in the bar the grid draws."
+        },
+        {
+          "name": "handle",
+          "type": "DataGridHandle",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "The imperative surface for what cannot be said declaratively: focusCell, scrollToRow, scrollToColumn, startEdit, stopEdit, autofit, getOutOfSpace, getVisibleRows, toCsv, exportCsv, reload, selectAll, clearSelection."
+        },
+        {
+          "name": "native props",
+          "type": "attributes",
+          "defaultValue": "—",
+          "appliesTo": "DataGrid",
+          "description": "Anything a div takes reaches the root; a consumer’s onKeyDown runs before the grid’s and preventDefault stops it. ref reaches the root element."
+        },
+        {
+          "name": "FilterBar, Pagination, ColumnManager",
+          "type": "families",
+          "defaultValue": "—",
+          "appliesTo": "Beside the grid",
+          "description": "The bar edits query.filter; pagination moves query.page in the footer; column-manager edits columnState."
+        }
+      ],
+      "events": [
+        {
+          "name": "onQueryChange",
+          "payload": "(query: GridQuery, request: DataGridQueryRequest)",
+          "when": "Before the query moves: a sort press, a filter applied, a search, a page, a group. request.change says which; the reason is pointer, keyboard, clear or programmatic; cancel() refuses it."
+        },
+        {
+          "name": "onColumnStateChange",
+          "payload": "(state: GridColumnState, request: DataGridColumnStateRequest)",
+          "when": "Before a column is resized, moved, hidden or pinned. request.change says which; the reason is pointer, keyboard or programmatic. A hide is announced; the columns in value.hidden and not in previous.hidden are what an undo shows again."
+        },
+        {
+          "name": "onOutOfSpaceChange",
+          "payload": "(outOfSpace: GridOutOfSpace)",
+          "when": "After the frame is measured, whenever the columns in the pop-in or the columns hidden for room change."
+        },
+        {
+          "name": "onValueChange",
+          "payload": "(value: string | string[] | null, request)",
+          "when": "Before the row selection moves: a checkbox press, Shift+Space, Ctrl+A, the header checkbox (reason select), or clearSelection (programmatic)."
+        },
+        {
+          "name": "onRangeChange",
+          "payload": "(range: GridRange | null, request)",
+          "when": "Before the cell rectangle moves, or is cleared with Escape (reason clear)."
+        },
+        {
+          "name": "onCurrentChange",
+          "payload": "(cell: GridCell | null, request)",
+          "when": "Before the cursor moves: an arrow key, a press, or the grid settling the cursor after its row left (programmatic)."
+        },
+        {
+          "name": "onExpandedChange",
+          "payload": "(keys: string[], request)",
+          "when": "Before a detail opens or closes."
+        },
+        {
+          "name": "onExpandedGroupsChange",
+          "payload": "(keys: string[] | 'all', request)",
+          "when": "Before a group opens or closes."
+        },
+        {
+          "name": "onEditStart / onEditCommit / onEditCancel",
+          "payload": "(cell) / (commit: DataGridEditCommit) / (cell)",
+          "when": "When an editor opens; when a draft is committed by Enter, Tab, F2, a press elsewhere or blur (the commit may return a promise); when Escape cancels it."
+        },
+        {
+          "name": "onActivate",
+          "payload": "(event: DataGridActivateEvent)",
+          "when": "A double press or Enter on a text cell, or one touch or pen press, while activatable is true."
+        },
+        {
+          "name": "onLoadMore / onRetry / onManageColumns",
+          "payload": "()",
+          "when": "The window nears the end with hasMore; the error state’s Try again; the column menu’s Manage columns."
+        }
+      ],
+      "accessibility": [
+        "The root is role=\"grid\": a composite widget with one tab stop. The current cell — or the single simple widget inside it, a link, a button or a checkbox — is the only element with tabindex=\"0\"; Tab enters there and leaves the grid to the next control of the page, which is what the APG requires of a grid and what a table cannot give.",
+        "Every row carries aria-rowindex against aria-rowcount on the root, and every cell aria-colindex against aria-colcount, always: the grid windows its rows and columns, so the DOM is never the whole set, and the counts are what let a screen reader say “row 4,812 of 9,000”.",
+        "aria-sort is written on the first sort key’s header only — the practice says more than one is ambiguous — and the whole order is announced through the live announcer: “Sorted by Carrier ascending, Weight descending”. A resize announces the column and its width; a filter announces its sentence through describeFilter; a copy announces the count.",
+        "A cell that does not edit while others do carries aria-readonly=\"true\"; a draft that fails carries aria-invalid and its message in the title. A selected row carries aria-selected; a cell in a range carries it too, and the root aria-multiselectable in multiple and range.",
+        "A column with a description is described by it: the header carries aria-describedby to a visually hidden span, and the column menu points at the same span while showing the text aria-hidden, so the words are heard once. The column help is a button with a name — “About ARR” — reached by F2 on the header; Tab cycles the header’s widgets and Escape returns to the cell. Hiding a column is announced as “Carrier hidden”.",
+        "The header checkbox names what it covers — “Select all 3,412 rows”, or the page in server mode — because a selection over a whole result set is a decision only the query can make. Every control the grid draws has a name: the column menu, the filter trigger, the expander, the group toggle, the operator symbol."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-md",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-data-grid-band-surface",
+    "--slotted-data-grid-block-size",
+    "--slotted-data-grid-border-color",
+    "--slotted-data-grid-border-color-strong",
+    "--slotted-data-grid-border-width",
+    "--slotted-data-grid-cell-padding-block",
+    "--slotted-data-grid-cell-padding-inline",
+    "--slotted-data-grid-changed-surface",
+    "--slotted-data-grid-color",
+    "--slotted-data-grid-color-muted",
+    "--slotted-data-grid-control-radius",
+    "--slotted-data-grid-cursor-color",
+    "--slotted-data-grid-filter-operator-size",
+    "--slotted-data-grid-filter-panel-size",
+    "--slotted-data-grid-filter-panel-size-date",
+    "--slotted-data-grid-filter-panel-size-datetime",
+    "--slotted-data-grid-font-family",
+    "--slotted-data-grid-font-size",
+    "--slotted-data-grid-gap",
+    "--slotted-data-grid-head-block-size",
+    "--slotted-data-grid-header-surface",
+    "--slotted-data-grid-header-surface-hover",
+    "--slotted-data-grid-icon-size",
+    "--slotted-data-grid-indent",
+    "--slotted-data-grid-pin-shadow-color",
+    "--slotted-data-grid-pin-shadow-size",
+    "--slotted-data-grid-radius",
+    "--slotted-data-grid-range-surface",
+    "--slotted-data-grid-row-block-size",
+    "--slotted-data-grid-row-color-selected",
+    "--slotted-data-grid-row-max-block-size",
+    "--slotted-data-grid-row-surface-hover",
+    "--slotted-data-grid-row-surface-selected",
+    "--slotted-data-grid-row-surface-selected-hover",
+    "--slotted-data-grid-row-surface-stripe",
+    "--slotted-data-grid-shadow",
+    "--slotted-data-grid-sticky-offset",
+    "--slotted-data-grid-sticky-offset-end",
+    "--slotted-data-grid-surface",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-long",
+    "--slotted-duration-loop",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-ground",
+    "--slotted-line-height-md",
+    "--slotted-popover-gap",
+    "--slotted-popover-padding-block-sm",
+    "--slotted-popover-padding-inline-sm",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-scrim",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-8",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-sticky"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Every capability on one listing of shipments: sort with a press and Shift, filter from the funnel or the row, select with the checkboxes, edit a cell with Enter, pin and resize from the header. The toolbar switches scheme, density and direction.",
+      "language": "tsx",
+      "source": "<DataGrid\n  columns={columns}\n  height=\"100%\"\n  label=\"Shipments\"\n  rowKey=\"id\"\n  rows={shipments}\n  selectionMode=\"multiple\"\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "columns",
+      "title": "Columns",
+      "note": "Each column declares its kind, and the kind decides the comparator, the operators, the editor and the alignment: a number column sits its digits at the end in tabular figures, a date column formats the ISO day in the reader’s locale, a set column names its values.",
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(8);\n\nexport default function DataGridColumns() {\n  return (\n    <DataGrid aria-label=\"Shipments\" columns={COLUMNS} rowKey=\"id\" rows={ROWS} height=\"22rem\" />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "column-groups",
+      "title": "Column groups",
+      "note": "A second header row above the columns: each group spans the columns it names, wherever the reader has laid them out, and a column no group names spans itself.",
+      "language": "tsx",
+      "source": "import type { GridColumn, GridColumnGroup } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst GROUPS: GridColumnGroup[] = [\n  { id: 'shipment', label: 'Shipment', columns: ['id', 'customer', 'destination'] },\n  { id: 'transport', label: 'Transport', columns: ['carrier', 'status', 'shipped'] },\n  { id: 'charges', label: 'Charges', columns: ['weight', 'cost'] },\n];\n\nconst ROWS = shipments(8);\n\nexport default function DataGridColumnGroups() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      columnGroups={GROUPS}\n      height=\"22rem\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sorting",
+      "title": "Sorting",
+      "note": "A press on a header sorts ascending, a second descending, a third removes the key; Shift with the press appends the column to the order instead, and the second and third keys carry their index beside the mark. Enter on the header does the same from the keyboard.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\nexport default function DataGridSorting() {\n  const [query, setQuery] = useState<GridQuery>({\n    ...emptyQuery(),\n    sort: [\n      { column: 'carrier', direction: 'ascending' },\n      { column: 'cost', direction: 'descending' },\n    ],\n  });\n  const order = query.sort.map((key) => `${key.column} ${key.direction}`).join(', ') || 'none';\n\n  return (\n    <Stack gap={3}>\n      <Text size=\"sm\" tone=\"muted\">\n        Sorted by: {order}\n      </Text>\n      <DataGrid\n        aria-label=\"Shipments\"\n        columns={COLUMNS}\n        rowKey=\"id\"\n        rows={ROWS}\n        height=\"22rem\"\n        onQueryChange={setQuery}\n        query={query}\n      />\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-panel",
+      "title": "The filter panel",
+      "note": "Ctrl+Enter on a header or its menu opens the panel: one line per condition — operator and operand in sm — the join as two words on the second line once the first is complete, Clear and Apply at the end. Nothing reaches the query until Apply.",
+      "language": "tsx",
+      "source": "<DataGrid\n  defaultQuery={\n    withColumnFilter(emptyQuery(), 'customer', {\n      kind: 'text',\n      join: 'or',\n      conditions: [\n        { operator: 'contains', value: 'nord' },\n        { operator: 'startsWith', value: 'B' },\n      ],\n    }).query\n  }\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filter-row",
+      "title": "The filter row",
+      "note": "With filterRow the row under the header holds one operand per column, plain, with the operator as a symbol at its start — press it for the names in full. Text and number apply after the debounce and on Enter; a set, a boolean and a date apply on change. The cursor walks the row.",
+      "language": "tsx",
+      "source": "import { emptyQuery, withColumnFilter, type GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst INITIAL_QUERY = withColumnFilter(emptyQuery(), 'status', {\n  kind: 'set',\n  join: 'and',\n  conditions: [{ operator: 'anyOf', value: ['Delayed', 'Customs'] }],\n}).query;\n\nconst ROWS = shipments(24);\n\nexport default function DataGridFilterRow() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      defaultQuery={INITIAL_QUERY}\n      filterRow\n      height=\"24rem\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-bar",
+      "title": "With a filter bar",
+      "note": "One descriptor, two families: the bar above edits query.filter and the grid evaluates it, nested groups included. A rule written in a column header appears as a chip in the bar, and a chip removed in the bar clears the header’s funnel.",
+      "language": "tsx",
+      "source": "<>\n  <FilterBar\n    fields={fields}\n    onValueChange={(filter) => setQuery(withFilter(query, filter).query)}\n    value={query.filter}\n  />\n  <DataGrid columns={columns} onQueryChange={setQuery} query={query} rowKey=\"id\" rows={shipments} />\n</>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "search",
+      "title": "Search",
+      "note": "One condition that belongs to no column: query.search is matched against the text of every searchable column through the locale collator, so \"agua\" finds \"Água\". The field that writes it is the consumer’s own text-field.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(24);\n\nexport default function DataGridSearch() {\n  const [query, setQuery] = useState<GridQuery>({ ...emptyQuery(), search: 'graz' });\n\n  return (\n    <Stack gap={3}>\n      <TextField\n        aria-label=\"Search shipments\"\n        clearable\n        onValueChange={(text) => setQuery((current) => withSearch(current, text).query)}\n        placeholder=\"Search shipments\"\n        value={query.search}\n      />\n      <DataGrid\n        aria-label=\"Shipments\"\n        columns={COLUMNS}\n        rowKey=\"id\"\n        rows={ROWS}\n        height=\"22rem\"\n        onQueryChange={setQuery}\n        query={query}\n      />\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "selection",
+      "title": "Row selection",
+      "note": "single chooses one row with a press; multiple draws the checkbox column, pinned to the start: Shift extends from the anchor, Shift+Space toggles the row from any cell, Ctrl+A and the header checkbox cover every row the query left and say so in their name.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Text } from '@slotted/react/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\nexport default function DataGridSelection() {\n  const [value, setValue] = useState<string | readonly string[] | null>(['SH-3302', 'SH-3303']);\n  const count = Array.isArray(value) ? value.length : value === null ? 0 : 1;\n\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      disabledKeys={['SH-3305']}\n      footer={\n        <Text size=\"sm\" tone=\"muted\">\n          {count} selected\n        </Text>\n      }\n      height=\"24rem\"\n      onValueChange={setValue}\n      selectionMode=\"multiple\"\n      value={value}\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "range",
+      "title": "Cell range",
+      "note": "range selects a rectangle of cells: Shift with the arrows extends it from the anchor, Shift with a press sets it, a drag paints it, Ctrl+Space takes the column and Shift+Space the row. Ctrl+C copies it as tab-separated text; Escape clears it.",
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\nexport default function DataGridRange() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      defaultCurrent={{ row: 'SH-3303', column: 'weight' }}\n      height=\"24rem\"\n      selectionMode=\"range\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "editing",
+      "title": "Editing a cell",
+      "note": "Enter, F2, a double press or a typed key open the cell’s editor — the field family of its kind, plain, filling the cell. Enter commits and moves one row down, Tab commits and moves to the next editable cell, Escape cancels. The commit may return a promise; the cell dims until it settles.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst EDIT_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>\n  column.id === 'weight'\n    ? {\n        ...column,\n        editable: true,\n        validate: (value: unknown) =>\n          typeof value === 'number' && value <= 0 ? 'Enter a weight above zero.' : null,\n      }\n    : ['customer', 'destination', 'carrier'].includes(column.id)\n      ? { ...column, editable: true }\n      : column,\n);\n\nconst ROWS = shipments(8);\n\nexport default function DataGridEditing() {\n  const [rows, setRows] = useState(ROWS);\n\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={EDIT_COLUMNS}\n      rowKey=\"id\"\n      rows={rows}\n      editMode=\"cell\"\n      height=\"22rem\"\n      onEditCommit={({ key, changes }) =>\n        setRows((current) => current.map((row) => (row.id === key ? { ...row, ...changes } : row)))\n      }\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "editing-row",
+      "title": "Editing a row",
+      "note": "editMode=\"row\" opens every editable cell of the row at once: Tab moves between them, Enter commits the row with every change in one request, Escape cancels them all.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst EDIT_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>\n  column.id === 'weight'\n    ? {\n        ...column,\n        editable: true,\n        validate: (value: unknown) =>\n          typeof value === 'number' && value <= 0 ? 'Enter a weight above zero.' : null,\n      }\n    : ['customer', 'destination', 'carrier'].includes(column.id)\n      ? { ...column, editable: true }\n      : column,\n);\n\nconst ROWS = shipments(8);\n\nexport default function DataGridEditingRow() {\n  const [rows, setRows] = useState(ROWS);\n\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={EDIT_COLUMNS}\n      rowKey=\"id\"\n      rows={rows}\n      editMode=\"row\"\n      height=\"22rem\"\n      onEditCommit={({ key, changes }) =>\n        setRows((current) => current.map((row) => (row.id === key ? { ...row, ...changes } : row)))\n      }\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "validation",
+      "title": "Validation, failure and conflict",
+      "note": "A column’s validate refuses a draft with a message: the cell turns invalid and keeps what was typed. A commit that rejects reopens the editor with the draft and the error. A row that changes under an open editor is a conflict, said in the same place.",
+      "language": "tsx",
+      "source": "const columns = [\n  {\n    id: 'weight',\n    label: 'Weight',\n    kind: 'number',\n    editable: true,\n    validate: (value) => (value < 0 ? 'A weight is not negative' : null),\n  },\n];\n<DataGrid columns={columns} onEditCommit={() => Promise.reject(new Error('Offline'))} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "activation",
+      "title": "Row activation",
+      "note": "activatable turns a double press or Enter on a text cell into onActivate with the row’s key — opening the record is a different act from choosing it, and the two never share a key. An editable cell keeps Enter for its editor. On a touch screen or with a pen one press activates, except on a widget in the cell or a cell in edit, and the double press that follows within 500ms is ignored.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\nexport default function DataGridActivation() {\n  const [opened, setOpened] = useState<string | null>(null);\n\n  return (\n    <Stack gap={3}>\n      <Text size=\"sm\" tone=\"muted\">\n        {opened ? `Opened ${opened}` : 'Double-click a row, or press Enter on its shipment cell.'}\n      </Text>\n      <DataGrid\n        aria-label=\"Shipments\"\n        columns={COLUMNS}\n        rowKey=\"id\"\n        rows={ROWS}\n        activatable\n        height=\"22rem\"\n        onActivate={({ key }) => setOpened(key)}\n      />\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pinning",
+      "title": "Pinned columns",
+      "note": "A column pinned to the start or the end stays while the others scroll; the checkbox column is always pinned. Pin from the column menu or the state; the last column of each zone draws the edge, darker while something is hidden under it.",
+      "language": "tsx",
+      "source": "<DataGrid defaultColumnState={{ pinned: { start: ['id'], end: ['actions'] } }} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "resize",
+      "title": "Resizing",
+      "note": "Drag the handle on a column’s trailing edge; Escape during the drag restores the width. From the keyboard, Ctrl+Shift+ArrowRight widens by eight pixels and announces the width; Ctrl+Shift+Enter and a double press on the handle fit the column to its mounted cells.",
+      "language": "tsx",
+      "source": "<DataGrid\n  columnState={state}\n  onColumnStateChange={(next, request) => request.change === 'width' && setState(next)}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reorder",
+      "title": "Reordering",
+      "note": "Drag a header along the row: the drop indicator shows the boundary it lands on, and a column never leaves its pin zone. Alt+ArrowLeft and Alt+ArrowRight move the column one place from the keyboard. Every move is announced.",
+      "language": "tsx",
+      "source": "<DataGrid defaultColumnState={{ order: ['customer', 'id', 'carrier'] }} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "column-menu",
+      "title": "The column menu",
+      "note": "Revealed by the pointer and by the cursor, opened with Ctrl+Enter, a secondary press on the header (at the press; Shift keeps the browser’s menu) or Shift+F10 and the Menu key (on the header cell): sort ascending, descending or remove; filter; pin to either edge or unpin; fit to content, and fit all columns in one request; hide; and manage columns, which hands over to the application’s column-manager. A fit chosen by pointer carries reason pointer, by keyboard reason keyboard; Shift with a double press on the resizer fits every column.",
+      "language": "tsx",
+      "source": "<DataGrid onManageColumns={() => setManagerOpen(true)} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "column-help",
+      "title": "A column that explains itself",
+      "note": "ARR and Margin carry a description; Status carries a help node with a link. The circled question mark stays shown, because a coarse pointer has no hover; it opens a popover on a press, Enter or Space, and never sorts. The description is also the header’s accessible description and the caption atop its menu. F2 on a header reaches the button without a pointer.",
+      "language": "tsx",
+      "source": "const columns: DataGridColumn<Account>[] = [\n  {\n    id: 'arr',\n    label: 'ARR',\n    kind: 'number',\n    description: 'Annual recurring revenue, in US dollars',\n  },\n  { id: 'status', label: 'Status', help: <StatusGlossary /> },\n];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "undo-hide",
+      "title": "Undoing a hidden column",
+      "note": "Hide column announces “Carrier hidden” and asks with change: hidden. The application answers with a toast whose Undo shows that column again through withColumnHidden: a hide moves no order, width or pin, so the column returns to its place and its width, and whatever the reader changed after the hide stays. Writing back request.previous would undo those changes too.",
+      "language": "tsx",
+      "source": "<DataGrid\n  columnState={state}\n  onColumnStateChange={(next, request) => {\n    setState(next);\n    if (request.change !== 'hidden') return;\n    const shown = next.hidden.filter((column) => !request.previous.hidden.includes(column));\n    const id = toaster.show({\n      title: 'Column hidden',\n      actions: (\n        <Button\n          onClick={() => {\n            setState((current) =>\n              shown.reduce((state, column) => withColumnHidden(state, column, false), current),\n            );\n            toaster.dismiss(id, 'pointer');\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          Undo\n        </Button>\n      ),\n    });\n  }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "column-state",
+      "title": "Saving a view",
+      "note": "A view is the column state, the query and the density as one line of text: serializeGridView writes it, parseGridView reads it back and drops a column the model no longer has. usePersistedGridView keeps that line under a key in localStorage (or any store with getItem, setItem and removeItem; null keeps it in memory), reads it once on mount, writes it after every change, and resets to the defaults by removing the entry. Hand reset, onDensityChange and setView — which replaces the whole view in one write, as applying a saved view does — to the controls that call them, and spread the rest on the grid. Selection, cursor and expansion are session state and are not kept.",
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(12);\n\nexport default function DataGridColumnState() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      defaultColumnState={{ pinned: { start: ['id'], end: ['cost'] }, widths: { customer: 240 } }}\n      height=\"24rem\"\n      selectionMode=\"multiple\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "grouping",
+      "title": "Grouping",
+      "note": "query.group names the columns the rows are grouped by, outermost first. A group row carries its level, its count and the aggregates of its rows; ArrowLeft closes it and ArrowRight opens it. expandedGroups is the set of open groups, all by default.",
+      "language": "tsx",
+      "source": "import { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst INITIAL_QUERY: GridQuery = {\n  ...emptyQuery(),\n  group: ['carrier'],\n  sort: [{ column: 'id', direction: 'ascending' }],\n};\n\nconst ROWS = shipments(20);\n\nexport default function DataGridGrouping() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      defaultQuery={INITIAL_QUERY}\n      height=\"26rem\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "summary",
+      "title": "Aggregates",
+      "note": "A column with aggregate — sum, avg, min, max, count or a function — draws the summary row, pinned to the end of the scroller, over every row the query kept; a grouped grid draws the same aggregate on each group row.",
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst SUM_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>\n  column.id === 'weight' || column.id === 'cost'\n    ? { ...column, aggregate: 'sum' as const }\n    : column,\n);\n\nconst ROWS = shipments(10);\n\nexport default function DataGridSummary() {\n  return (\n    <DataGrid aria-label=\"Shipments\" columns={SUM_COLUMNS} rowKey=\"id\" rows={ROWS} height=\"24rem\" />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "detail",
+      "title": "Row detail",
+      "note": "renderDetail gives a row a detail: the expander column appears, ArrowRight on it opens the detail under the row as one cell spanning every column and held to the frame, ArrowLeft closes it. expanded is the set of open rows.",
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Text } from '@slotted/react/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(8);\n\nexport default function DataGridDetail() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      defaultExpanded={['SH-3301']}\n      height=\"26rem\"\n      renderDetail={(row) => (\n        <Text size=\"sm\">\n          {row.carrier} picked up {row.weight.toFixed(1)} kg on {row.shipped} for {row.destination}.\n          Charged {money(row.cost)}.\n        </Text>\n      )}\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "virtualization",
+      "title": "Ten thousand rows",
+      "note": "Above a hundred rows the grid windows them: the body is as tall as every row and only the ones in view, plus the overscan, are in the DOM. Scroll, or jump with Ctrl+End — the last row is mounted and focused. Above twenty middle columns the same happens sideways.",
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(10_000);\n\nexport default function DataGridVirtualization() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments, 10,000 rows\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      height=\"26rem\"\n      selectionMode=\"multiple\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "server",
+      "title": "Server mode",
+      "note": "With totalCount or hasMore the grid draws the rows it is given and reports the query instead of applying it: sorting, filtering, searching and paging all arrive as one request saying what changed, and a server answers with the page.",
+      "language": "tsx",
+      "source": "<DataGrid\n  loading={pending}\n  onQueryChange={(next, request) => fetchPage(next, request.change)}\n  query={query}\n  rows={page.rows}\n  totalCount={page.total}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "data-source",
+      "title": "A data source",
+      "note": "dataSource hands the grid its own fetching: getRows is called with the query on every change and an AbortSignal, the request before it aborted; the answer — rows, total or hasMore — is kept by the query’s text (cacheSize, default 20), so a page the reader comes back to is on screen at once. The grid is in server mode with the loading and the error states of its own: a rejection is the error state with the message thrown, Try again asks the same query, handle.reload() drops the cache. rows, totalCount, loading, error and onRetry are the source’s and are not read.",
+      "language": "tsx",
+      "source": "const shipments: DataGridDataSource<Shipment> = {\n  getRows: (query, { signal }) =>\n    fetch(`/api/shipments?${toGridParams(query)}`, { signal }).then((response) => response.json()),\n};\n<DataGrid\n  columns={columns}\n  dataSource={shipments}\n  defaultQuery={emptyQuery({ index: 0, size: 25 })}\n  rowKey=\"id\"\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "pagination",
+      "title": "Pagination",
+      "note": "query.page carries the index and the size; the pagination family in the footer moves both, in the bar a table carries: a page size, the range and the two triggers, at the inline end. The status states the range, so showRange is off. A change of filter, search or group puts the page back at the start in the same request.",
+      "language": "tsx",
+      "source": "<DataGrid\n  footer={\n    <Pagination\n      count={total}\n      onPageChange={(page) => setQuery(withPageIndex(query, page - 1).query)}\n      onPageSizeChange={(size) => setQuery(withPageSize(query, size).query)}\n      page={query.page.index + 1}\n      pageSize={query.page.size}\n      pageSizeOptions={[25, 50, 100]}\n    >\n      <PaginationPageSize />\n      <PaginationStatus />\n      <PaginationPrevious />\n      <PaginationNext />\n    </Pagination>\n  }\n  query={query}\n  showRange={false}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "load-more",
+      "title": "Load more",
+      "note": "With an unknown total the footer states the range without one and offers Load more; when the grid windows its rows, onLoadMore is called on its own as the window nears the end.",
+      "language": "tsx",
+      "source": "<DataGrid\n  hasMore={hasMore}\n  onLoadMore={fetchMore}\n  query={{ ...emptyQuery(), page: { cursor, size: 50 } }}\n  rows={rows}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty-and-loading",
+      "title": "Empty, no results, error, loading",
+      "note": "Three states a body can hold instead of rows, each a result-state: nothing at all; nothing after the filter, with Clear filters; and a failed load, with Try again. A first load draws skeleton rows; a refresh over rows already shown dims them and moves nothing.",
+      "language": "tsx",
+      "source": "<DataGrid error={error} loading={loading} onRetry={reload} rows={rows} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variant",
+      "title": "Variants",
+      "note": "plain draws no rules and no band; ruled draws a rule between rows; framed adds the border, the radius and the footer inside. striped tints every second row under every state.",
+      "language": "tsx",
+      "source": "<DataGrid striped variant=\"framed\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "text",
+      "title": "Long values",
+      "note": "truncate is the default — a column has a width — and keeps the whole value in the cell’s title; wrap breaks an unbroken token rather than widening the column; nowrap keeps a code on one line. A value keeps its own direction in a right-to-left grid.",
+      "language": "tsx",
+      "source": "const columns = [\n  { id: 'customer', label: 'Customer', text: 'wrap' },\n  { id: 'hash', label: 'Hash', text: 'nowrap' },\n];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "density",
+      "title": "Density",
+      "note": "The row reads the theme’s control scale: 34 pixels at comfortable, 28 at compact, 26 at dense, with the type and the inset stepping with it. Without density the grid takes the page’s, which the toolbar switches; with density it writes data-slotted-density on its own root and holds that one whatever the page says. The menu and the popovers it opens are portals and stay at the page’s density.",
+      "language": "tsx",
+      "source": "<DataGrid columns={columns} density=\"dense\" rowKey=\"id\" rows={shipments} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "responsive-priority",
+      "title": "Columns that yield to a phone",
+      "note": "The same grid in a phone-wide room. When the frame is too narrow for the template, columns leave the row: first those without a priority, the last first, then the highest priority; the identity column — the first rowHeader — and an actions column never leave. A column that leaves moves into the row’s pop-in, its label over its value drawn by the same cell renderer; one with popin: false is hidden instead. The root states the pop-in’s count as data-popin, rows grow to their fields, and onOutOfSpaceChange reports both sets — but the column state is untouched, so nothing is persisted and a wider frame brings them back. That is columnOverflow=\"auto\", the default, under 600px, or under 1024px with a coarse pointer; wider, with a mouse, it scrolls. columnOverflow=\"popin\" pops in at every width, and \"scroll\" keeps every column and scrolls.",
+      "language": "tsx",
+      "source": "const columns: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Tracking', rowHeader: true },\n  { id: 'status', label: 'Status', priority: 1 },\n  { id: 'eta', label: 'ETA', kind: 'datetime', priority: 2 },\n  { id: 'carrier', label: 'Carrier', priority: 3 },\n  { id: 'cost', label: 'Cost', kind: 'number', popin: false },\n];\n<DataGrid columns={columns} onOutOfSpaceChange={setOut} rowKey=\"id\" rows={rows} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the grid did not choose",
+      "note": "A hundred-character customer name, an unbroken identifier, a right-to-left name, a disabled row, an empty cell in a numeric column and a value with a dash: each holds where the family says it holds.",
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { Avatar } from '@slotted/react/avatar';\nimport { Badge } from '@slotted/react/badge';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Inline } from '@slotted/react/inline';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst TONE: Record<string, 'secondary' | 'success' | 'danger' | 'warning'> = {\n  'In transit': 'secondary',\n  Delivered: 'success',\n  Delayed: 'danger',\n  Customs: 'warning',\n};\n\nconst ROWS = shipments(10);\n\nexport default function DataGridContent() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      cellRenderers={{\n        customer: ({ row }) => (\n          <Inline align=\"center\" gap={2}>\n            <Avatar name={row.customer} size=\"sm\" />\n            {row.customer}\n          </Inline>\n        ),\n        status: ({ value }) => (\n          <Badge tone={TONE[String(value)]} variant=\"soft\">\n            {String(value)}\n          </Badge>\n        ),\n      }}\n      height=\"24rem\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "media",
+      "title": "Pictures in cells",
+      "note": "A renderer draws anything: an avatar beside the name, a thumbnail in a custom column. A stated rowHeight is the drawn row as well as the windowed one, so ten thousand rows of 56 pixels scroll to the right place. A cell with a picture and a name is one flex row of the renderer’s own; the grid lays out the renderer’s first element as the value.",
+      "language": "tsx",
+      "source": "<DataGrid\n  cellRenderers={{\n    customer: ({ row }) => (\n      <span className=\"customer\">\n        <Avatar name={row.customer} size=\"sm\" />\n        <span>{row.customer}</span>\n      </span>\n    ),\n    photo: ({ row }) => <Image alt=\"\" radius=\"sm\" ratio=\"landscape\" src={row.photo} />,\n  }}\n  columns={[...columns, { id: 'photo', label: 'Cargo', kind: 'custom', sortable: false }]}\n  rowHeight={56}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "realtime",
+      "title": "Realtime",
+      "note": "rows is compared with the rows before it, by key, on the mounted rows only: a cell whose value changed is marked for the time highlightChanges states (true is 1200 ms) and fades on the accent’s subtle ground; under reduced motion the ground stays flat and leaves with the mark. A row that arrived is not a change. Selection, cursor, expansion and scroll survive every tick because the key is the identity.",
+      "language": "tsx",
+      "source": "<DataGrid highlightChanges rows={feed.rows} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tree",
+      "title": "Tree data",
+      "note": "tree names each row’s parent by key; a row whose parent is not in rows is a root. The root is a treegrid, every row carries aria-level and a branch aria-expanded. The open branches are expanded — the same state the detail uses; a branch opens its children, a leaf its detail. Filter and search keep a row that matches or has a descendant that matches, with its ancestors; sorting is among siblings; the page is a slice of the open rows; query.group is ignored. In the tree column, ArrowRight opens a closed branch, ArrowLeft closes an open one and climbs to the parent from a leaf. A row hasChildren says has children not yet in rows asks for them through onLoadChildren when opened, and shows the wait until they arrive.",
+      "language": "tsx",
+      "source": "import type { GridColumn, GridTree } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Location {\n  id: string;\n  parent: string | null;\n  name: string;\n  kind: string;\n  units: number;\n}\n\nconst LOCATIONS: Location[] = [\n  { id: 'reno', parent: null, name: 'Reno, NV', kind: 'Warehouse', units: 4210 },\n  { id: 'reno-a', parent: 'reno', name: 'Zone A — dry goods', kind: 'Zone', units: 2630 },\n  { id: 'reno-a-01', parent: 'reno-a', name: 'Aisle 01', kind: 'Aisle', units: 1410 },\n  { id: 'reno-a-02', parent: 'reno-a', name: 'Aisle 02', kind: 'Aisle', units: 1220 },\n  { id: 'reno-b', parent: 'reno', name: 'Zone B — chilled', kind: 'Zone', units: 1580 },\n  { id: 'columbus', parent: null, name: 'Columbus, OH', kind: 'Warehouse', units: 3075 },\n  { id: 'columbus-a', parent: 'columbus', name: 'Zone A — dry goods', kind: 'Zone', units: 3075 },\n  { id: 'savannah', parent: null, name: 'Savannah, GA', kind: 'Warehouse', units: 1890 },\n  { id: 'savannah-a', parent: 'savannah', name: 'Zone A — bonded', kind: 'Zone', units: 1890 },\n];\n\nconst COLUMNS: GridColumn<Location>[] = [\n  { id: 'name', label: 'Location', accessor: 'name', rowHeader: true, flex: 1, minWidth: 220 },\n  { id: 'kind', label: 'Type', accessor: 'kind', width: 130 },\n  { id: 'units', label: 'Units on hand', accessor: 'units', kind: 'number', width: 150 },\n];\n\nconst TREE: GridTree<Location> = { parentKey: (row) => row.parent };\n\nexport default function DataGridTree() {\n  return (\n    <DataGrid\n      aria-label=\"Stock by location\"\n      columns={COLUMNS}\n      defaultExpanded={['reno', 'reno-a']}\n      height=\"22rem\"\n      rowKey=\"id\"\n      rows={LOCATIONS}\n      tree={TREE}\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "pinned-rows",
+      "title": "Pinned rows",
+      "note": "pinnedRows holds rows at the top or the bottom of the body, by key, in the stated order. A held row leaves the query — never sorted, filtered or paged — and stays on screen, under the head and over the summary, at the heights the grid measures for each. It is a row like any other: the cursor walks through it, it selects, edits and exports with the rest, and it counts in aria-rowcount.",
+      "language": "tsx",
+      "source": "<DataGrid pinnedRows={{ top: ['SHP-20487'], bottom: ['SHP-20481'] }} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reorder-rows",
+      "title": "Reordering rows",
+      "note": "rowsReorderable draws a grip per row in a reserved column. The pointer drags from the grip and drops in a gap, with the same guide a column shows; Alt with the vertical arrows moves the row from any of its cells, and the move is announced. The grid keeps no order of its own: onRowsReorder says where the row goes in rows (from and to, the index it takes once moved) and the consumer moves it. Only while the query is at rest — no sort, filter, search or group — and without a tree, because elsewhere the position on screen is not the position in rows; the grip is disabled otherwise.",
+      "language": "tsx",
+      "source": "<DataGrid\n  onRowsReorder={({ from, to }) => setRows((rows) => arrayMove(rows, from, to))}\n  rows={rows}\n  rowsReorderable\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "export",
+      "title": "Export and print",
+      "note": "handle.exportCsv builds the file by toCsv — RFC 4180, each cell as the grid draws it — from the rows the query left (every page in client mode) and the columns not hidden in the reader’s order, or the selected rows and every column on request, and hands it to the browser as a download; handle.toCsv returns the text for a consumer who sends it elsewhere. In print, the frame grows to its rows, nothing scrolls or sticks, and the pointer’s controls are not on paper; a windowed grid prints the rows it has mounted, so a consumer who prints ten thousand turns the window off first. Excel is the consumer’s: SheetJS reads the same text.",
+      "language": "tsx",
+      "source": "<>\n  <Button onClick={() => grid.current?.exportCsv({ filename: 'shipments.csv' })}>CSV</Button>\n  <Button onClick={() => grid.current?.exportCsv({ rows: 'selected', bom: true })}>\n    Selected, for Excel\n  </Button>\n  <Button onClick={() => window.print()}>Print</Button>\n</>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Tab enters on the current cell and leaves the grid. The arrows move one cell, Home and End along the row, Ctrl+Home and Ctrl+End to the corners, PageUp and PageDown a view. Enter and F2 enter a cell, Escape leaves it. On a header: Enter sorts, Shift+Enter appends, Ctrl+Enter, Shift+F10 and the Menu key open the menu, Ctrl+Shift+arrows resize, Alt+arrows move. The pop-in is the last cell of a row.",
+      "language": "tsx",
+      "source": "<DataGrid\n  defaultCurrent={{ row: 'SHP-20481', column: 'customer' }}\n  onCurrentChange={(cell) => log(cell)}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "A grid named by aria-label; every row with its index in the whole set and every cell with its column index; aria-sort on the first key and the rest announced; the selection’s size in the header checkbox’s name; a resize as a width; a filter as its sentence. Inspect the tree with a screen reader.",
+      "language": "tsx",
+      "source": "<DataGrid\n  aria-label=\"Shipments\"\n  messages={{\n    selectAllFiltered:\n      '{count, plural, one {Select the # shipment} other {Select all # shipments}}',\n  }}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { Badge } from '@slotted/react/badge';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Order {\n  id: string;\n  customer: string;\n  warehouse: string;\n  status: string;\n  placed: string;\n  total: number;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst WAREHOUSES = ['Reno', 'Columbus', 'Savannah'];\nconst STATUSES = ['Processing', 'Shipped', 'On hold', 'Delivered'];\n\nconst ORDERS: Order[] = Array.from({ length: 24 }, (_, index) => ({\n  id: `SO-${10421 + index}`,\n  customer: CUSTOMERS[(index * 5) % CUSTOMERS.length]!,\n  warehouse: WAREHOUSES[index % WAREHOUSES.length]!,\n  status: STATUSES[(index * 3) % STATUSES.length]!,\n  placed: `2026-09-${String(1 + (index % 28)).padStart(2, '0')}`,\n  total: 140 + ((index * 733) % 4100),\n}));\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst TONE: Record<string, 'accent' | 'secondary' | 'success' | 'warning'> = {\n  Delivered: 'success',\n  'On hold': 'warning',\n  Processing: 'accent',\n  Shipped: 'secondary',\n};\n\nconst columns: GridColumn<Order>[] = [\n  { id: 'id', label: 'Order', accessor: 'id', rowHeader: true, width: 120, sortable: true },\n  {\n    id: 'customer',\n    label: 'Customer',\n    accessor: 'customer',\n    flex: 1,\n    minWidth: 180,\n    sortable: true,\n  },\n  { id: 'warehouse', label: 'Warehouse', accessor: 'warehouse', width: 130, sortable: true },\n  { id: 'status', label: 'Status', accessor: 'status', width: 130, sortable: true },\n  { id: 'placed', label: 'Placed', accessor: 'placed', kind: 'date', width: 130, sortable: true },\n  {\n    id: 'total',\n    label: 'Total',\n    accessor: 'total',\n    numeric: true,\n    width: 130,\n    sortable: true,\n    format: (value) => USD.format(value as number),\n  },\n];\n\nexport default function DataGridBasic() {\n  return (\n    <DataGrid\n      aria-label=\"Orders\"\n      cellRenderers={{\n        status: ({ value }) => (\n          <Badge tone={TONE[String(value)]} variant=\"soft\">\n            {String(value)}\n          </Badge>\n        ),\n      }}\n      columns={columns}\n      height=\"24rem\"\n      rowKey=\"id\"\n      rows={ORDERS}\n      selectionMode=\"multiple\"\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "empty",
+      "title": "empty.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = [] as Shipment[];\n\nexport default function DataGridEmpty() {\n  return (\n    <DataGrid aria-label=\"Shipments\" columns={COLUMNS} rowKey=\"id\" rows={ROWS} height=\"18rem\" />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "error",
+      "title": "error.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = [] as Shipment[];\n\nexport default function DataGridError() {\n  const [attempts, setAttempts] = useState(0);\n\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      error=\"The shipments service did not answer within 30 seconds.\"\n      height=\"18rem\"\n      onRetry={() => setAttempts(attempts + 1)}\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import type { GridColumn } from '@slotted/core/grid';\nimport { DataGrid } from '@slotted/react/data-grid';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = [] as Shipment[];\n\nexport default function DataGridLoading() {\n  return (\n    <DataGrid\n      aria-label=\"Shipments\"\n      columns={COLUMNS}\n      rowKey=\"id\"\n      rows={ROWS}\n      height=\"18rem\"\n      loading\n    />\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "shipments-workspace",
+      "title": "shipments-workspace.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';\nimport { Button } from '@slotted/react/button';\nimport { DataGrid } from '@slotted/react/data-grid';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\ninterface Shipment {\n  id: string;\n  customer: string;\n  destination: string;\n  carrier: string;\n  status: string;\n  shipped: string;\n  weight: number;\n  cost: number;\n  priority: boolean;\n}\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst DESTINATIONS = [\n  'Berlin, DE',\n  'Marseille, FR',\n  'Graz, AT',\n  'Bräcke, SE',\n  'Rio de Janeiro, BR',\n  'Cowes, UK',\n  'Boise, US',\n  'Oulu, FI',\n];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];\n\nfunction shipments(count: number): Shipment[] {\n  let seed = 7;\n  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;\n  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;\n  return Array.from({ length: count }, (_, index) => {\n    const weight = Math.round(next() * 9000) / 10;\n    return {\n      id: `SH-${3301 + index}`,\n      customer: pick(CUSTOMERS),\n      destination: pick(DESTINATIONS),\n      carrier: pick(CARRIERS),\n      status: pick(STATUSES),\n      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,\n      weight,\n      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,\n      priority: next() < 0.3,\n    };\n  });\n}\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\nconst money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');\nconst kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');\n\nconst COLUMNS: GridColumn<Shipment>[] = [\n  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },\n  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },\n  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },\n  {\n    id: 'carrier',\n    label: 'Carrier',\n    accessor: 'carrier',\n    kind: 'set',\n    width: 110,\n    options: CARRIERS.map((value) => ({ value, label: value })),\n  },\n  {\n    id: 'status',\n    label: 'Status',\n    accessor: 'status',\n    kind: 'set',\n    width: 120,\n    options: STATUSES.map((value) => ({ value, label: value })),\n  },\n  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },\n  {\n    id: 'weight',\n    label: 'Weight',\n    accessor: 'weight',\n    kind: 'number',\n    width: 110,\n    format: kilograms,\n  },\n  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },\n];\n\nconst ROWS = shipments(60);\n\nexport default function DataGridShipmentsWorkspace() {\n  const [query, setQuery] = useState<GridQuery>(emptyQuery());\n  const [value, setValue] = useState<string | readonly string[] | null>([]);\n  const count = Array.isArray(value) ? value.length : 0;\n\n  return (\n    <Stack gap={3}>\n      <TextField\n        aria-label=\"Search shipments\"\n        clearable\n        onValueChange={(text) => setQuery((current) => withSearch(current, text).query)}\n        placeholder=\"Search by shipment, customer or destination\"\n        value={query.search}\n      />\n      <DataGrid\n        aria-label=\"Shipments\"\n        columns={COLUMNS}\n        rowKey=\"id\"\n        rows={ROWS}\n        footer={\n          <Inline align=\"center\" gap={3}>\n            <Text size=\"sm\" tone=\"muted\">\n              {count} selected\n            </Text>\n            <Button disabled={count === 0} size=\"sm\" variant=\"outline\">\n              Print labels\n            </Button>\n          </Inline>\n        }\n        height=\"26rem\"\n        onQueryChange={setQuery}\n        onValueChange={setValue}\n        query={query}\n        selectionMode=\"multiple\"\n        value={value}\n      />\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}