@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/data-grid.md

@@ -0,0 +1,237 @@
+<!-- index: ./index.md -->
+# data-grid
+
+`data-ui="data-grid"` · Table that sorts, filters and selects records.
+
+## Import
+
+```ts
+import {
+  SlDataGrid,
+  SlDataGridCellTemplate,
+  SlDataGridColumnHelp,
+  SlDataGridDetailTemplate,
+  SlDataGridEditorTemplate,
+  SlDataGridFooter,
+  provideDataGridDefaults,
+} from '@slotted/angular/data-grid';
+import type { GridColumn, GridQuery, GridColumnState } from '@slotted/core/grid';
+import { applyQuery, emptyQuery, toGridParams, fromGridParams } from '@slotted/core/grid';
+```
+
+Selector: `sl-data-grid` · exportAs: `slDataGrid`
+
+## Minimal example
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlDataGrid, SlDataGridCellTemplate } from '@slotted/angular/data-grid';
+
+interface Order {
+  id: string;
+  customer: string;
+  warehouse: string;
+  status: string;
+  placed: string;
+  total: number;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const WAREHOUSES = ['Reno', 'Columbus', 'Savannah'];
+const STATUSES = ['Processing', 'Shipped', 'On hold', 'Delivered'];
+
+const ORDERS: Order[] = Array.from({ length: 24 }, (_, index) => ({
+  id: `SO-${10421 + index}`,
+  customer: CUSTOMERS[(index * 5) % CUSTOMERS.length]!,
+  warehouse: WAREHOUSES[index % WAREHOUSES.length]!,
+  status: STATUSES[(index * 3) % STATUSES.length]!,
+  placed: `2026-09-${String(1 + (index % 28)).padStart(2, '0')}`,
+  total: 140 + ((index * 733) % 4100),
+}));
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const TONE: Record<string, 'accent' | 'secondary' | 'success' | 'warning'> = {
+  Delivered: 'success',
+  'On hold': 'warning',
+  Processing: 'accent',
+  Shipped: 'secondary',
+};
+
+const COLUMNS: GridColumn<Order>[] = [
+  { id: 'id', label: 'Order', accessor: 'id', rowHeader: true, width: 120, sortable: true },
+  {
+    id: 'customer',
+    label: 'Customer',
+    accessor: 'customer',
+    flex: 1,
+    minWidth: 180,
+    sortable: true,
+  },
+  { id: 'warehouse', label: 'Warehouse', accessor: 'warehouse', width: 130, sortable: true },
+  { id: 'status', label: 'Status', accessor: 'status', width: 130, sortable: true },
+  { id: 'placed', label: 'Placed', accessor: 'placed', kind: 'date', width: 130, sortable: true },
+  {
+    id: 'total',
+    label: 'Total',
+    accessor: 'total',
+    numeric: true,
+    width: 130,
+    sortable: true,
+    format: (value) => USD.format(value as number),
+  },
+];
+
+@Component({
+  selector: 'app-data-grid-basic',
+  imports: [SlBadge, SlDataGrid, SlDataGridCellTemplate],
+  template: `
+    <sl-data-grid
+      aria-label="Orders"
+      height="24rem"
+      rowKey="id"
+      selectionMode="multiple"
+      [columns]="columns"
+      [rows]="orders"
+    >
+      <ng-template slDataGridCell="status" let-value="value">
+        <span slBadge variant="soft" [tone]="tone[value]">{{ value }}</span>
+      </ng-template>
+    </sl-data-grid>
+  `,
+})
+export class DataGridBasic {
+  readonly orders = ORDERS;
+  readonly columns = COLUMNS;
+  readonly tone = TONE;
+}
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | sl-data-grid[role="grid"], exportAs="slDataGrid" | yes |
+| `scroll` | div | yes |
+| `head` | div[role="rowgroup"] | yes |
+| `header-row` | div[role="row"] | yes |
+| `column-group` | div[role="columnheader"] | no |
+| `column-header` | div[role="columnheader"] | yes |
+| `sort` | span | no |
+| `column-description` | span | no |
+| `column-actions` | span | yes |
+| `column-help` | button[slPopoverTrigger] | no |
+| `column-menu` | button[slMenuTriggerFor] | yes |
+| `column-menu-description` | div[aria-hidden] | no |
+| `resizer` | div[aria-hidden] | no |
+| `drop-indicator` | div | no |
+| `filter-row` | div[role="row"] | no |
+| `filter-cell` | div[role="gridcell"] | no |
+| `filter` | button | no |
+| `filter-panel` | div, drawn by sl-data-grid-filter-panel | no |
+| `filter-condition` | div | no |
+| `filter-operator` | div | no |
+| `filter-operand` | div | no |
+| `filter-join` | div | no |
+| `filter-actions` | div | no |
+| `body` | div[role="rowgroup"] | yes |
+| `pinned-rows` | div[role="rowgroup"] | no |
+| `row` | div[role="row"] | yes |
+| `row-header` | div[role="rowheader"] | no |
+| `cell` | div[role="gridcell"] | yes |
+| `editor` | div | no |
+| `selection` | div[role="gridcell"] | no |
+| `expander` | button | no |
+| `detail` | div[role="row"] | no |
+| `popin-header` | div[role="columnheader"] | no |
+| `popin` | div[role="gridcell"] | no |
+| `popin-field` | div | no |
+| `popin-label` | span | no |
+| `popin-value` | div | no |
+| `group-row` | div[role="row"] | no |
+| `group-toggle` | button | no |
+| `tree-toggle` | button | no |
+| `row-handle` | button | no |
+| `summary` | div[role="rowgroup"] | no |
+| `summary-cell` | div[role="gridcell"] | no |
+| `empty` | div | no |
+| `loader` | div[role="rowgroup"] | no |
+| `footer` | div | no |
+| `actions` | div | no |
+
+## Props
+
+See [data-grid.props.md](./data-grid.props.md).
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `queryChange` | `GridQuery` | The two-way half of the model: the query after a sort press, a filter applied, a search, a page or a group. |
+| `queryChangeRequest` | `DataGridQueryRequest` | Before the query moves. change says which part: sort \| filter \| search \| page \| group; the reason is pointer, keyboard, clear or programmatic; cancel() refuses it. |
+| `columnStateChange` | `GridColumnState` | The arrangement after a column is resized, moved, hidden or pinned. |
+| `columnStateChangeRequest` | `DataGridColumnStateRequest` | Before the arrangement moves. change says which: order \| width \| hidden \| pinned; 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. |
+| `outOfSpaceChange` | `GridOutOfSpace` | After the frame is measured, whenever the columns in the pop-in or the columns hidden for room change. |
+| `valueChange` | `string \| readonly string[] \| null` | The selected rows after a checkbox press, Shift+Space, Ctrl+A or the header checkbox. |
+| `valueChangeRequest` | `ChangeRequest<string \| readonly string[] \| null>` | Before the row selection moves, with pointer, keyboard, select (the header checkbox, Ctrl+A), clear or programmatic. |
+| `rangeChange` | `GridRange \| null` | The cell rectangle after the keyboard or a drag moved it, or null after Escape. |
+| `rangeChangeRequest` | `ChangeRequest<GridRange \| null>` | Before the rectangle moves, with pointer, keyboard, clear or programmatic. |
+| `currentChange` | `GridCell \| null` | The cursor after an arrow key, a press, or the grid settling it after its row left. |
+| `currentChangeRequest` | `ChangeRequest<GridCell \| null>` | Before the cursor moves, with pointer, keyboard or programmatic. |
+| `expandedChange` | `readonly string[]` | The rows whose detail is open, after one opened or closed. |
+| `expandedChangeRequest` | `ChangeRequest<readonly string[]>` | Before a detail opens or closes. |
+| `expandedGroupsChange` | `readonly string[] \| 'all'` | The open groups, after one opened or closed. |
+| `expandedGroupsChangeRequest` | `ChangeRequest<readonly string[] \| 'all'>` | Before a group opens or closes. |
+| `editStart / editCommit / editCancel` | `GridCell / DataGridEditCommit / GridCell` | When an editor opens; when a draft is committed by Enter, Tab, F2, a press elsewhere or blur — the commit carries key, column, value, previous, row, reason, every change of the row and wait(promise); when Escape cancels it. |
+| `activate` | `DataGridActivateEvent` | A double press or Enter on a text cell, or one touch or pen press, while activatable is true. |
+| `loadMore / retry / manageColumns` | `void` | The window nears the end with hasMore; the error state’s Try again; the column menu’s Manage columns. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `variant` | `plain`, `ruled`, `framed` | `ruled` |
+| `striped` | `true`, `false` | `false` |
+| `stickyHeader` | `true`, `false` | `true` |
+| `stickyTo` | `scroll`, `page` | `scroll` |
+| `selectionMode` | `none`, `single`, `multiple`, `range` | `none` |
+| `editMode` | `cell`, `row` | `cell` |
+| `mode` | `client`, `server` | — |
+| `filterRow` | `true`, `false` | `false` |
+| `virtualize` | `auto`, `true`, `false` | `auto` |
+| `columnOverflow` | `auto`, `popin`, `scroll` | `auto` |
+| `activatable` | `true`, `false` | `false` |
+| `align` | `start`, `center`, `end` | `start` |
+| `numeric` | `true`, `false` | `false` |
+| `text` | `wrap`, `truncate`, `nowrap` | `truncate` |
+| `density` | `comfortable`, `compact`, `dense` | — |
+
+## Rules
+
+- The host 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 Weight” — 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
+
+See [data-grid.examples.md](./data-grid.examples.md).

package/docs/data-grid.props.md

@@ -0,0 +1,81 @@
+<!-- index: ./index.md -->
+# data-grid
+
+`data-ui="data-grid"` · Table that sorts, filters and selects records.
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `rows` | `readonly Row[]` | — | sl-data-grid | The records; the grid never mutates them. Left out when a dataSource answers for them. |
+| `rowKey` | `keyof Row \| (row) => string` | — | sl-data-grid | A field name or a function: the key every state model names a row by. |
+| `columns` | `GridColumn<Row>[]` | — | sl-data-grid | 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. |
+| `description` | `string` | — | GridColumn | What the column is: the header’s accessible description, the caption atop its menu and the first line of its help popover. |
+| `priority` | `number` | — | GridColumn | 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. |
+| `popin` | `boolean` | true | GridColumn | Whether a column with no room moves into the row’s pop-in; false hides it instead. |
+| `density` | `'comfortable' \| 'compact' \| 'dense' \| null` | the page’s | sl-data-grid | This grid’s own density, written as data-slotted-density on the root; absent or null, the page’s. |
+| `outOfSpace` | `Signal<GridOutOfSpace>` | { popin: [], hidden: [] } | sl-data-grid | The columns a narrow frame took out by priority — those in the pop-in and those hidden — read through exportAs. Never part of columnState. |
+| `columnGroups` | `GridColumnGroup[]` | — | sl-data-grid | Headings spanning columns, drawn as a row above the names. |
+| `mode` | `'client' \| 'server'` | inferred | sl-data-grid | client applies the query to rows; server draws rows as given. server when totalCount or hasMore is present. |
+| `totalCount` | `number` | — | sl-data-grid | The whole set’s size in server mode; aria-rowcount and the range read it. |
+| `hasMore` | `boolean` | — | sl-data-grid | Whether a page past this one exists when the total is unknown; the footer offers Load more. |
+| `loading` | `boolean` | false | sl-data-grid | Skeleton rows with no rows to keep; aria-busy and a dimmed body over rows already shown. |
+| `error` | `string \| null` | — | sl-data-grid | The message of a failed load; draws the error state with Try again, which emits retry. |
+| `disabledKeys` | `string[]` | — | sl-data-grid | Rows that are neither selectable nor editable, drawn with data-disabled. |
+| `query` | `model<GridQuery>` | emptyQuery() | sl-data-grid | sort, filter, search, page and group in one object, two-way. An unbound grid starts from the model’s own initial value. |
+| `columnState` | `model<Partial<GridColumnState> \| undefined>` | — | sl-data-grid | order, widths, hidden and pinned, two-way; normalised against columns on every read. |
+| `selectionMode` | `'none' \| 'single' \| 'multiple' \| 'range'` | none | sl-data-grid | Rows, one or many, with the checkbox column in multiple; or a rectangle of cells. |
+| `value` | `model<string \| readonly string[] \| null>` | null | sl-data-grid | The selected row (single) or rows (multiple), two-way, and the value a form control holds through ControlValueAccessor. |
+| `range` | `model<GridRange \| null>` | null | sl-data-grid | The cell rectangle as anchor and focus, in range mode, two-way. |
+| `current` | `model<GridCell \| null>` | null | sl-data-grid | Where the cursor stands: a row key (or header, filter, summary, group:<key>) and a column id, two-way. |
+| `expanded` | `model<readonly string[]>` | [] | sl-data-grid | The rows whose detail is open, two-way. |
+| `expandedGroups` | `model<readonly string[] \| 'all'>` | all | sl-data-grid | The open groups, or all, two-way. |
+| `expandable` | `boolean \| (row) => boolean` | true with slDataGridDetail | sl-data-grid | Which rows have a detail. |
+| `editMode` | `'cell' \| 'row'` | cell | sl-data-grid | One cell at a time, or every editable cell of the row. |
+| `activatable` | `boolean` | false | sl-data-grid | A double press or Enter on a text cell emits activate with the row. |
+| `filterRow` | `boolean` | false | sl-data-grid | The row of operands under the header. |
+| `manageable` | `boolean` | false | sl-data-grid | Draws Manage columns in the column menu, for an application that answers manageColumns with its column-manager. |
+| `filterDebounce` | `number` | 300 | sl-data-grid | Milliseconds a text or number operand in the filter row waits before it applies. |
+| `virtualize` | `'auto' \| boolean` | auto | sl-data-grid | auto windows rows above a hundred and middle columns above twenty. |
+| `rowHeight` | `number \| 'auto'` | density | sl-data-grid | 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. |
+| `columnOverflow` | `'auto' \| 'popin' \| 'scroll'` | auto | sl-data-grid | 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. |
+| `overscan` | `number` | 6 | sl-data-grid | Rows mounted past each edge of the window. |
+| `tree` | `{ parentKey, column?, hasChildren? }` | — | sl-data-grid | Rows as a tree, each naming its parent by key; the open branches are expanded and the root is a treegrid. |
+| `loadChildren` | `{ key, row }` | — | sl-data-grid | Emitted when a branch hasChildren says has children opens and none are in rows. |
+| `dataSource` | `{ getRows(query, { signal }), cacheSize? }` | — | sl-data-grid | 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. |
+| `pinnedRows` | `{ top?: string[], bottom?: string[] }` | — | sl-data-grid | Rows held at the top or the bottom of the body, out of the query and always on screen. |
+| `rowsReorderable` | `boolean` | false | sl-data-grid | 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. |
+| `rowsReorder` | `{ key, from, to, reason, event }` | — | sl-data-grid | Where a row goes in rows: from, and the index it takes once moved. The consumer moves it. |
+| `highlightChanges` | `boolean \| number` | false | sl-data-grid | Marks a mounted cell whose value changed between two rows, for the stated milliseconds (true is 1200). |
+| `loadMoreThreshold` | `number` | 20 | sl-data-grid | Rows left below the window before loadMore is emitted. |
+| `skeletonRows` | `number` | 8 | sl-data-grid | Rows the first load draws. |
+| `pageSizes` | `number[]` | 25,50,100 | sl-data-grid | The sizes a page-size control in the footer offers, read through injectDataGridDefaults. |
+| `variant` | `'plain' \| 'ruled' \| 'framed'` | ruled | sl-data-grid | No rules, rules between rows, or the border and the radius. |
+| `striped` | `boolean` | false | sl-data-grid | Every second row tinted. |
+| `stickyHeader` | `boolean` | true | sl-data-grid | The header, the filter row and the summary stay while the rows scroll. |
+| `stickyTo` | `'scroll' \| 'page'` | scroll | sl-data-grid | What the header sticks inside: the grid’s own scroller, or the page — which gives up the grid’s own scrolling and windowing. |
+| `height` | `string \| number` | — | sl-data-grid | The frame’s height; without one the grid grows to its rows. |
+| `labelledBy` | `string` | — | sl-data-grid | The id of the element that names the grid; a static aria-label names it directly, and with neither the grid is named by messages.grid. |
+| `messages` | `Partial<DataGridMessages>` | — | sl-data-grid | 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. |
+| `locale` | `string` | the language in force | sl-data-grid | BCP 47, for the collator, the number and the date formats. |
+| `timeZone` | `string` | — | sl-data-grid | The zone a timestamp is read in. |
+| `showRange` | `boolean` | when paged | sl-data-grid | Whether the footer states the range. |
+| `slDataGridCell` | `ng-template, string` | — | ng-template[slDataGridCell] | What a cell draws, for the column named or for every column when unnamed. The context carries row, key, column, value, text, current and selected. |
+| `slDataGridEditor` | `ng-template, string` | — | ng-template[slDataGridEditor] | What a cell edits with. The context adds draft, setDraft, commit, cancel, invalid and message. |
+| `slDataGridHeader` | `ng-template, string` | — | ng-template[slDataGridHeader] | What a header draws in place of the label; the context carries the column, sorted, sortIndex and filtered. |
+| `slDataGridFilter` | `ng-template, string` | — | ng-template[slDataGridFilter] | The operand control in the panel and the row, for a kind the grid has no field for. |
+| `slDataGridDetail` | `ng-template` | — | ng-template[slDataGridDetail] | A row’s detail, handed the row; its presence draws the expander column. |
+| `slDataGridGroup` | `ng-template` | — | ng-template[slDataGridGroup] | What a group row draws beside its toggle; the context carries the node, its column and toggle(). |
+| `slDataGridEmpty` | `ng-template` | — | ng-template[slDataGridEmpty] | The empty, no-results or error state in place of the grid’s result state, handed the status. |
+| `slDataGridFooter` | `attribute` | — | [slDataGridFooter] | What stands in the bar under the grid, after the range: pagination, a page-size select, a count. |
+| `align` | `'start' \| 'center' \| 'end'` | start | GridColumn | Where the value sits; a number column sits at the end unless told otherwise. |
+| `numeric` | `boolean` | false | GridColumn | Tabular figures and end alignment; true for kind number. |
+| `text` | `'wrap' \| 'truncate' \| 'nowrap'` | truncate | GridColumn | What a long value does. |
+| `provideDataGridDefaults` | `provider` | — | Application | Sets variant, striped, stickyHeader, stickyTo, selectionMode, editMode, filterRow, virtualize, rowHeight, columnOverflow, overscan, pageSizes, filterDebounce, loadMoreThreshold and skeletonRows once for an injector. A grid that states one itself still wins. Its words and its locale come from the language in force (provideSlotted). |
+| `@slotted/core/grid` | `module` | — | Application | 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. |
+| `slDataGridCell, slDataGridEditor, slDataGridHeader, slDataGridFilter, slDataGridColumnHelp, slDataGridDetail, slDataGridGroup, slDataGridEmpty` | `ng-template directives` | — | sl-data-grid | Every surface a consumer replaces, projected as content; the four column-scoped ones name a column or serve every column, and slDataGridColumnHelp names one column and draws its help button. row, cell, head and body are fixed: the layout and the roles are theirs. |
+| `slDataGridFooter` | `attribute` | — | sl-data-grid | Pagination, a page-size select, a count: the consumer’s own controls projected into the bar the grid draws. |
+| `exportAs="slDataGrid"` | `template reference` | — | sl-data-grid | The imperative surface for what cannot be said declaratively: focusCell, scrollToRow, scrollToColumn, scrollToCell, startEdit, stopEdit, autofit (reason programmatic), hide, outOfSpace, getVisibleRows, toCsv, exportCsv, reload, selectAll, clearSelection, announce. |
+| `ControlValueAccessor` | `forms` | — | sl-data-grid | formControlName or ngModel on the host reads and writes the row selection; a disabled control neither selects nor edits. |
+| `native attributes` | `attributes` | — | sl-data-grid | id, class and any attribute written on the host stay on the root; a consumer’s (keydown) on the host runs before the grid’s and preventDefault stops it. |
+| `slFilterBar, slPagination, column-manager` | `families` | — | Beside the grid | The bar edits query.filter; pagination moves query.page in the footer; column-manager edits columnState. |