Sorting

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

	const data = people(12);
	const ORDER = ['Active', 'Away', 'Invited'];
	const columns: Column<Person>[] = memberColumns().map((column) =>
		column.id === 'status'
			? { ...column, compare: (a, b) => ORDER.indexOf(String(a)) - ORDER.indexOf(String(b)) }
			: column.id === 'joined'
				? { ...column, sortable: false }
				: column
	);
	let tableState = $state<Partial<TableState>>(defaultState({ sorting: [{ id: 'revenue', desc: true }] }));
</script>

<!-- Click a header to cycle none, ascending, descending; Shift+click adds a second column. -->
<DataTable {data} {columns} getRowId={(row) => row.id} bind:state={tableState} pagination={false} label="Members" />

<pre>{JSON.stringify(tableState.sorting)}</pre>

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

	const data = people(12);
	const FIELDS = [
		{ id: 'joined', label: 'Joined date' },
		{ id: 'progress', label: 'Progress' }
	];
	const columns: Column<Person>[] = [
		...pick(memberColumns(), ['name', 'team']),
		{ ...memberColumns().find((c) => c.id === 'revenue')!, sortDescFirst: true },
		{
			id: 'activity',
			header: 'Activity',
			accessor: (row) => `${row.joined} · ${row.progress}%`,
			width: 190,
			sortable: false,
			sortKeys: FIELDS.map((field) => field.id),
			headerCell: activity
		},
		// Hidden columns give the client row model values to sort the two keys by.
		{ id: 'joined', header: 'Joined' },
		{ id: 'progress', header: 'Progress' }
	];
	let tableState = $state<Partial<TableState>>({ hidden: ['joined', 'progress'] });
</script>

{#snippet activity({ column, sort, setSorting }: HeaderContext<Person>)}
	<span class="head">
		{column.header}
		<button
			type="button"
			class="trigger"
			popovertarget="activity-sort"
			aria-label="Sort {column.header}"
			data-active={sort ? '' : undefined}
		>
			<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"
				><path d="M2.5 4h11M4.5 8h7M6.5 12h3" /></svg
			>
		</button>
	</span>
	<div id="activity-sort" popover data-slean="popover" data-slean-side="bottom" data-slean-align="end">
		<label>
			Order by
			<select
				value={sort?.id ?? ''}
				onchange={(e) =>
					setSorting(
						e.currentTarget.value ? [{ id: e.currentTarget.value, desc: sort?.desc ?? true }] : []
					)}
			>
				<option value="">Unsorted</option>
				{#each FIELDS as field (field.id)}<option value={field.id}>{field.label}</option>{/each}
			</select>
		</label>
		<label>
			Direction
			<select
				value={sort?.desc === false ? 'asc' : 'desc'}
				disabled={!sort}
				onchange={(e) =>
					sort && setSorting([{ id: sort.id, desc: e.currentTarget.value === 'desc' }])}
			>
				<option value="desc">Newest or highest first</option>
				<option value="asc">Oldest or lowest first</option>
			</select>
		</label>
	</div>
{/snippet}

<DataTable
	{data}
	{columns}
	getRowId={(row) => row.id}
	bind:state={tableState}
	pagination={false}
	label="Members: custom sort control"
/>
<pre class="state" aria-label="Sort state">{JSON.stringify(tableState.sorting ?? [])}</pre>