Layout

The renderer writes data-density, data-striped, data-bordered and data-hoverable on its root and leaves the drawing to CSS. style.css is one file with neutral defaults; each color, radius and duration is a --slean-table-* custom property that falls back to a --slean-* token when @svelte-lean/styles is present. Nothing about presentation is computed in JavaScript, so switching density on a thousand rows is one attribute write.

Two props affect structure rather than paint. height limits the scroll region and makes it a keyboard Tab stop, because a region that scrolls must be reachable without a pointer. tableLayout chooses between the fixed algorithm, which applies the column widths, and the automatic one, which sizes columns from content.

Density and borders

Switch density, stripes and cell borders without changing the row model.

<script lang="ts">
	import { DataTable } from '@svelte-lean/table';
	import '@svelte-lean/styles/radio-group.css';
	import '@svelte-lean/styles/checkbox.css';
	import { memberColumns } from '$lib/demo/columns';
	import { people } from '$lib/demo/data';

	const data = people(6);
	const columns = memberColumns();
	// Presentation props change attributes on the root; the row model is untouched.
	let density = $state<'compact' | 'comfortable' | 'spacious'>('comfortable');
	let striped = $state(false);
	let bordered = $state(true);
</script>

<fieldset data-slean="radio-group">
	<legend>Density</legend>
	{#each ['compact', 'comfortable', 'spacious'] as value (value)}
		<label><input type="radio" name="density" {value} bind:group={density} /> {value}</label>
	{/each}
</fieldset>
<label><input type="checkbox" data-slean="checkbox" bind:checked={striped} /> Stripes</label>
<label><input type="checkbox" data-slean="checkbox" bind:checked={bordered} /> Borders</label>

<DataTable {data} {columns} getRowId={(row) => row.id} {density} {striped} {bordered} pagination={false} label="Members: density and borders" />

• Row hover is a fourth attribute, data-hoverable, on by default.
• Under forced-colors: active the stylesheet uses system colors for selection and ranges.

Sticky header

Keep headers visible inside a constrained scrolling surface.

<script lang="ts">
	import { DataTable } from '@svelte-lean/table';
	import { memberColumns } from '$lib/demo/columns';
	import { people } from '$lib/demo/data';

	const data = people(36);
	const columns = memberColumns();
</script>

<!-- height limits the scroll region; the region becomes a Tab stop so keyboard users can scroll it. -->
<DataTable
	{data}
	{columns}
	getRowId={(row) => row.id}
	stickyHeader
	height="18rem"
	pagination={false}
	label="Members: sticky header"
	caption="All rows in one scrolling region"
/>

• stickyHeader is on by default. With height the header sticks inside the region. Without it, the header sticks to the page while the table fits its width: the region then stops being a scroll container (data-page-sticky), and --slean-table-sticky-top moves the header below a fixed application bar. Once the table is wider than its container the region scrolls sideways again; a region that scrolls sideways captures sticky positioning, so the header scrolls with the rows unless the region also scrolls down, and is then not sticky at all (a sticky box in a scroller is composited, and every row painted under it costs compositing work). A ResizeObserver switches between these.
• The scroll event is available through onScroll; scrollTo() scrolls to a row by id or index.

Grid layout for long pages

A native table lays out every row to size its columns, and the browser cannot skip the rows it does not show. For pages of hundreds of rows, layout="grid" keeps the same elements and the same features but lays each row out as a CSS grid over one track list, with explicit ARIA roles (table, rowgroup, row, cell) so the semantics survive the changed display.

• Body rows stand in sections of 50, one <tbody> each, under content-visibility: auto: the browser styles, lays out and paints only the sections near the screen. Nothing is virtualized; every row stays in the document, so find-in-page, printing and assistive technology reach it.
• A skipped section assumes the height of the rows already drawn, so the page is about as tall before a section is drawn as after. Once a page is complete, sections are laid out ahead in idle time, nearest the screen first, so a fast scroll mostly pays for paint.
• Column widths are measured once from the content, on hidden copies of the header and a sample of rows, never on the rows on screen; they only grow while the columns stay the same. A declared width is a minimum and maxWidth (default 480) caps a measured width; a capped column clips with an ellipsis. Spare width is shared in proportion to the content.
• tableLayout and cell span do not apply. Combine with progressive so a large page mounts in slices.

Naming and structure

label names the region and the table for assistive technology and defaults to "Data table"; give every table a name that means something in the page. caption renders a visible native caption. showHeader removes the whole thead for lists that do not need column names, and class adds a hook on the root for application CSS.

<DataTable
	{data}
	{columns}
	getRowId={(row) => row.id}
	label="Invoices"
	caption="Open invoices, updated hourly"
	tableLayout="auto"
	showHeader={false}
	rowHoverable={false}
	class="invoices"
/>

/* Retint one table; every property has a neutral fallback in style.css. */
.slean-table.invoices {
	--slean-table-accent: var(--brand);
	--slean-table-border: var(--hairline);
	--slean-table-radius: 0;
	--slean-table-selection-width: 36px;
}

Styling

style.css is written for overriding. Every rule sits in the slean.components cascade layer of @svelte-lean/styles and every selector is wrapped in :where(), so any application rule outside a layer wins without !important, whatever its specificity. The generic control rules target the table's own parts (.slean-table-button, .slean-table-input), so a Button, an Input or any other primitive placed in a cell keeps its own look, and the selection checkboxes carry data-slean="checkbox": with @svelte-lean/styles/checkbox.css loaded they are the Checkbox primitive, otherwise a native checkbox in the accent color.

Each token reads the matching --slean-* token when @svelte-lean/styles is present. Without it, the fallbacks are the same defaults, written with light-dark(): they follow the page's color-scheme, so a page that declares color-scheme: dark (or light dark under a dark system preference) gets a dark table with no extra CSS. Set tokens on .slean-table or on the class passed through class; every table resets them on its own root, so a table nested in a detail row does not inherit the outer table's overrides.

Restyle with tokens

<script lang="ts">
	import { DataTable } from '@svelte-lean/table';
	import { memberColumns, pick } from '$lib/demo/columns';
	import { people } from '$lib/demo/data';

	const data = people(6);
	const columns = pick(memberColumns(), ['name', 'status', 'team', 'revenue']);
</script>

<DataTable
	{data}
	{columns}
	getRowId={(row) => row.id}
	striped
	pagination={false}
	class="ledger"
	label="Members: restyled with tokens"
/>

<style>
	:global(.slean-table.ledger) {
		--slean-table-radius: 6px;
		--slean-table-header-bg: transparent;
		--slean-table-header-fg: var(--site-text-muted);
		--slean-table-header-font-size: 0.6875rem;
		--slean-table-header-font-weight: 600;
		--slean-table-header-text-transform: uppercase;
		--slean-table-header-letter-spacing: 0.06em;
		--slean-table-row-stripe: color-mix(in oklab, var(--site-surface-2) 70%, transparent);
		--slean-table-cell-padding-x: 1rem;
		--slean-table-cell-padding-y: 0.375rem;
	}
</style>

Row tints

Body cells paint var(--slean-table-row-bg, var(--slean-table-bg)), and hover, stripes and selection work by setting --slean-table-row-bg on the row. A class from rowClass that sets the same variable tints the whole row, pinned and selection cells included. Mix the tint into --slean-table-bg with color-mix() rather than using a transparent color, so pinned cells stay opaque over the columns scrolling under them. Application CSS is outside the layer and wins over hover and selection; restate them for tinted rows when they should show.

<script lang="ts">
	import { DataTable, type Column } from '@svelte-lean/table';
	import { memberColumns } from '$lib/demo/columns';
	import { people, type Person } from '$lib/demo/data';

	const data = people(6);
	const columns: Column<Person>[] = memberColumns().map((column) =>
		column.id === 'name' ? { ...column, pin: 'left' } : column
	);
	const tone = (row: Person) =>
		row.status === 'Invited' ? 'tone-warning' : row.progress < 40 ? 'tone-danger' : '';
</script>

<DataTable
	{data}
	{columns}
	getRowId={(row) => row.id}
	rowClass={tone}
	selection="multiple"
	pagination={false}
	label="Members: row tints"
/>

<style>
	:global(.slean-table tr.tone-warning) {
		--slean-table-row-bg: color-mix(in oklab, var(--slean-warning) 16%, var(--slean-table-bg));
	}

	:global(.slean-table tr.tone-danger) {
		--slean-table-row-bg: color-mix(in oklab, var(--slean-danger) 12%, var(--slean-table-bg));
	}

	/* Keep hover and selection feedback on tinted rows: a stronger tint, then the selection. */
	:global(.slean-table tr.tone-warning:hover) {
		--slean-table-row-bg: color-mix(in oklab, var(--slean-warning) 26%, var(--slean-table-bg));
	}

	:global(.slean-table tr.tone-danger:hover) {
		--slean-table-row-bg: color-mix(in oklab, var(--slean-danger) 20%, var(--slean-table-bg));
	}

	:global(.slean-table tr:is(.tone-warning, .tone-danger)[data-selected='true']) {
		--slean-table-row-bg: var(--slean-table-row-selected);
	}
</style>

API

Related

• Columns
• Localization & RTL
• Styling