Data Grid

The capability levels are Table (semantic rendering), DataTable (sorting, filtering, selection, pagination), Virtual Table (large row counts, not shipped) and Data Grid (cell focus, arrow-key navigation, editing, pinning, range selection, copy and paste, grouping and tree). Nothing in the grid level is a separate runtime: the renderer already contains the keyboard model and enables it when onEdit or onCellRangeChange is set. Without them, cells carry no tabindex and the table is a table.

The output stays a native <table>. There is no role="grid" emulation over divs: header cells keep scope, sorted columns keep aria-sort, and assistive technology reads the table as a table. The grid keyboard pattern of the ARIA Authoring Practices is applied to the body: one Tab stop, arrow keys inside.

<!-- A body cell in grid mode, as rendered: focusable by structure, not by role="grid". -->
<td data-cell data-column="price" tabindex="-1" style="text-align:end;">
	<div class="slean-table-cell">
		12.00
		<button type="button" class="slean-table-edit" tabindex="-1" aria-label="Edit: Price">…</button>
	</div>
</td>

What exists today

Keyboard

With cell focus enabled. Outside grid mode the body has no keyboard model of its own.

Composition

A grid is a composition of props and entry points. The example enables editing and ranges, pins the identity column, limits the height, and binds copy to the keyboard in the application, because which key copies is a product decision, not the table's.

<script lang="ts">
	import { DataTable, type CellRange, type EditEvent } from '@svelte-lean/table';
	import { applyEdit } from '@svelte-lean/table/editing';
	import { copyRange } from '@svelte-lean/table/clipboard';
	import '@svelte-lean/table/style.css';

	let rows = $state(load());
	let range = $state<CellRange | null>(null);
	// Editable columns, a pinned identity column, a wide scrolling middle.
	const columns = [
		{ id: 'sku', header: 'SKU', pin: 'left' as const, width: 120 },
		{ id: 'name', header: 'Product', editable: true, width: 240 },
		{ id: 'price', header: 'Price', align: 'end' as const, editable: true, editor: 'number' as const },
		{ id: 'stock', header: 'Stock', align: 'end' as const, editable: true, editor: 'number' as const }
	];
</script>

<!-- onEdit and onCellRangeChange switch the body to the grid pattern: one Tab stop, arrow keys, Enter/F2. -->
<DataTable
	data={rows}
	{columns}
	getRowId={(row) => row.sku}
	onEdit={(event: EditEvent<Product>) => (rows = applyEdit(rows, event, columns, (row) => row.sku))}
	cellRange={range}
	onCellRangeChange={(next) => (range = next)}
	stickyHeader
	height="32rem"
	pagination={false}
	label="Inventory"
/>

<svelte:document
	onkeydown={(event) => {
		if (range && event.key === 'c' && (event.metaKey || event.ctrlKey)) {
			navigator.clipboard.writeText(copyRange(range, rows, columns, (row) => row.sku));
		}
	}}
/>

Scale

Rows are not virtualized, so the cost of a large grid is the cost of its DOM. The numbers below are the medians the playground benchmark recorded for the whole table in the document, with the environment of that run; they are read from the benchmark file and say nothing about other hardware or other libraries. A missing file renders "not measured".

Environment: chromium 153.0.8010.53, Apple M2 (8 cores, 16 GiB), darwin 27.0.0, Node v22.23.3, production build, headless yes, run 2026-09-27. Reproduce with yarn workspace @svelte-lean/playground bench.

API

Related

• Editing
• Clipboard & Export
• Performance results