Columns

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

	const data = people(6);
	// A cell snippet receives { row, value, rowId, index, column }.
	const columns: Column<Person>[] = [
		{ id: 'name', header: 'Member', cell: member },
		{ id: 'status', header: 'Status', cell: status },
		{ id: 'team', header: 'Team' },
		{ id: 'progress', header: 'Progress', align: 'end', cell: progress }
	];
</script>

{#snippet member({ row }: { row: Person })}
	<span class="member"><strong>{row.name}</strong><small>{row.email}</small></span>
{/snippet}
{#snippet status({ value }: { value: unknown })}
	<span class="status" data-status={value}>{value}</span>
{/snippet}
{#snippet progress({ value }: { value: unknown })}
	<meter min="0" max="100" value={Number(value)}>{value}%</meter>
{/snippet}

<DataTable {data} {columns} getRowId={(row) => row.id} pagination={false} label="Members: custom cells" />

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

	const data = people(8);
	const base = memberColumns();
	// A column with children renders as a group header spanning its leaves.
	const columns: Column<Person>[] = [
		{ id: 'identity', header: 'Identity', children: pick(base, ['name', 'status']) },
		{ id: 'organization', header: 'Organization', children: pick(base, ['team', 'region']) },
		{ id: 'activity', header: 'Activity', children: pick(base, ['revenue', 'progress', 'joined']) }
	];
</script>

<DataTable {data} {columns} getRowId={(row) => row.id} pagination={false} label="Members: grouped headers" />

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

	const data = people(12);
	// pin is the initial edge; tableState.pinning overrides it at run time.
	const columns = memberColumns().map((column) =>
		column.id === 'name'
			? { ...column, pin: 'left' as const }
			: column.id === 'joined'
				? { ...column, pin: 'right' as const }
				: { ...column, width: 220 }
	);
</script>

<DataTable {data} {columns} getRowId={(row) => row.id} height="20rem" pagination={false} label="Members: pinned columns" />

<script lang="ts">
	import { onMount } from 'svelte';
	import { DataTable, defaultState, type TableState } from '@svelte-lean/table';
	import type { MenuSelectDetail } from '@svelte-lean/primitives/menu';
	import '@svelte-lean/styles/popover.css';
	import '@svelte-lean/styles/menu.css';
	import { memberColumns } from '$lib/demo/columns';
	import { people } from '$lib/demo/data';

	const data = people(6);
	const columns = memberColumns();
	let tableState = $state<Partial<TableState>>(defaultState({ hidden: ['progress'] }));
	let menu: HTMLElement;

	// The menu behavior toggles aria-checked and dispatches slean:select; the table state follows.
	onMount(() => {
		const onSelect = (event: Event) => {
			const { value, checked } = (event as CustomEvent<MenuSelectDetail>).detail;
			event.preventDefault(); // keep the menu open for the next column
			const hidden = tableState.hidden ?? [];
			tableState = { ...tableState, hidden: checked ? hidden.filter((id) => id !== value) : [...hidden, value] };
		};
		menu.addEventListener('slean:select', onSelect);
		return () => menu.removeEventListener('slean:select', onSelect);
	});
</script>

<button
	type="button"
	id="columns-button"
	data-slean="button"
	data-variant="outline"
	popovertarget="columns-menu"
	aria-haspopup="menu"
>
	Columns
</button>
<div
	id="columns-menu"
	popover="auto"
	role="menu"
	aria-labelledby="columns-button"
	data-slean="menu"
	bind:this={menu}
>
	{#each columns as column (column.id)}
		<button
			type="button"
			role="menuitemcheckbox"
			aria-checked={!(tableState.hidden ?? []).includes(column.id)}
			data-slean-value={column.id}
			disabled={column.hideable === false}
		>
			{column.header}
		</button>
	{/each}
</div>

<DataTable {data} {columns} getRowId={(row) => row.id} bind:state={tableState} pagination={false} label="Members: column visibility" />

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

	const data = people(6);
	const columns = memberColumns();
	// Widths, order and pins live in the state: persist it and the layout comes back.
	let tableState = $state<Partial<TableState>>(defaultState());
</script>

<DataTable {data} {columns} getRowId={(row) => row.id} bind:state={tableState} columnControls pagination={false} label="Members: resize and reorder" />

<pre>{JSON.stringify({ widths: tableState.widths, order: tableState.order, pinning: tableState.pinning })}</pre>

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

	const data = people(6);
	const columns: Column<Person>[] = [
		{ id: 'name', header: 'Member', width: 120, ellipsis: { showTitle: true } },
		{ id: 'email', header: 'Email', width: 160, ellipsis: true },
		{ id: 'team', header: 'Team', width: 110 },
		{ id: 'region', header: 'Region', width: 110 }
	];
</script>

<DataTable {data} {columns} getRowId={(row) => row.id} pagination={false} label="Members: ellipsis" />

<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);
	// The first row's name cell spans two columns; the covered status cell returns { columns: 0 }.
	const columns: Column<Person>[] = memberColumns().map((column) =>
		column.id === 'name'
			? { ...column, span: ({ row }) => (row.id === 1 ? { columns: 2 } : undefined) }
			: column.id === 'status'
				? { ...column, span: ({ row }) => (row.id === 1 ? { columns: 0 } : undefined) }
				: column
	);
</script>

<DataTable {data} {columns} getRowId={(row) => row.id} pagination={false} label="Members: cell spans" />