SenseDataGrid — ArtificialSense UI

Overview

Category: Compound / data display. Selector: sense-data-grid. Import: import { SenseDataGridComponent } from '@artificialsenselabs/ui'; Business logic lives in GridEditEngine; the Angular component is a thin view layer.

Inputs

Input	Type	Description
`rows`	`readonly TRow[]`	Dataset; each row must include `id: string`.
`columns`	`readonly GridColumnDef[]`	Column definitions (type, editability, sort, resize, renderer key).
`can`	`PermissionChecker`	RBAC hook for edit/save/discard actions.
`validate`	`CellValidator`	Per-cell validation before save.
`persist`	`PersistHandler`	Async save handler receiving the changeset.
`customRenderers`	`Record<string, Type<unknown>>`	Registry of custom cell renderer components keyed by `rendererKey`.
`virtualize`	`boolean`	Enable viewport virtualization (default `true`).
`getRowHeight`	`(row, index) => number`	Optional variable row height callback.
`initialMultiSort`	`GridMultiSortState`	Initial ordered sort columns.

Outputs

Output	Payload	When
`saved`	`changeCount: number`	Successful persist.
`saveFailed`	`message: string`	Validation or persist failure.
`sortChange`	`GridMultiSortState`	User changes column sort order.
`columnWidthsChange`	`Record<string, number>`	User resizes a column.

Keyboard interactions

Context	Key	Action
Column header sort button	Click / Enter / Space	Cycle sort (asc → desc → cleared). Shift+click adds multi-sort.
Column resize handle	Arrow Left / Right	Decrease / increase width by 8px.
Column resize handle	Home / End	Jump to min / max width.
Editable cells	Tab	Move between native inputs/selects.

Sortable headers expose aria-sort (ascending, descending, none).
Resize handles are focusable separators with aria-valuenow / min / max.
Editable inputs use programmatic aria-label and aria-invalid when invalid.
Save status messages use role="status".
Audit trail section has aria-label="Audit trail".
Unit tests run axe-core; E2E scans run via Playwright in CI.