Table

1<script lang="ts">2	import { Table, type TableColumn } from 'omaris';3​4	type Order = { id: string; customer: string; city: string; total: number };5​6	const ROWS: Order[] = [7		{ id: '4021', customer: 'Kurdistan Roasters', city: 'Erbil', total: 480000 },8		{ id: '4022', customer: 'Dijla Grocers', city: 'Baghdad', total: 125000 },9		{ id: '4023', customer: 'Shatt Café', city: 'Basra', total: 62500 }10	];11​12	const COLUMNS: TableColumn<Order>[] = [13		{ key: 'id', header: 'Order' },14		{ key: 'customer', header: 'Customer' },15		{ key: 'city', header: 'City' },16		{17			key: 'total',18			header: 'Total',19			format: { style: 'currency', currency: 'IQD', maximumFractionDigits: 0 }20		}21	];22</script>23​24<Table columns={COLUMNS} rows={ROWS} label="Recent orders" />

1<script lang="ts">2	import { Table, formatCell, type TableColumn } from 'omaris';3​4	type Account = {5		name: string;6		usdDebit?: number;7		usdCredit?: number;8		iqdDebit?: number;9		iqdCredit?: number;10		moved: Date;11	};12​13	const ROWS: Account[] = [14		{ name: 'Ahmed Jasim', usdCredit: 1653.99, iqdCredit: 53077, moved: new Date(2026, 7, 25) },15		{ name: 'Ali Hussein', usdCredit: 7663.56, iqdCredit: 12537676, moved: new Date(2026, 7, 25) },16		{17			name: 'Mohammed Karim',18			usdCredit: 553.99,19			iqdCredit: 395629181,20			moved: new Date(2026, 7, 20)21		},22		{ name: 'Mustafa Nouri', usdCredit: 101, iqdDebit: 871851, moved: new Date(2026, 7, 24) },23		{ name: 'Omar Shakir', usdDebit: 106.5, iqdDebit: 720345, moved: new Date(2026, 7, 20) },24		{ name: 'Yousif Tariq', usdCredit: 61, iqdDebit: 171966, moved: new Date(2026, 7, 20) },25		{ name: 'Zaid Firas', usdCredit: 1001030.68, iqdCredit: 573400, moved: new Date(2026, 7, 14) },26		{ name: 'Haider Adil', usdCredit: 590, iqdCredit: 5360630, moved: new Date(2026, 7, 16) },27		{ name: 'Fatima Ali', usdCredit: 7705, iqdCredit: 388460, moved: new Date(2026, 7, 20) },28		{ name: 'Ruqaya Shihab', usdDebit: 1274, iqdCredit: 12000000, moved: new Date(2026, 7, 24) }29	];30​31	const COLUMNS: TableColumn<Account>[] = [32		{ key: 'name', header: 'Name', sortable: true, width: '32%' },33		{ key: 'usdDebit', header: 'Debit', group: 'USD', format: 'decimal', summary: 'sum' },34		{ key: 'usdCredit', header: 'Credit', group: 'USD', format: 'decimal', summary: 'sum' },35		{ key: 'iqdDebit', header: 'Debit', group: 'IQD', format: 'number', summary: 'sum' },36		{ key: 'iqdCredit', header: 'Credit', group: 'IQD', format: 'number', summary: 'sum' },37		{ key: 'moved', header: 'Last movement', format: 'date', sortable: true, hideBelow: 'sm' }38	];39​40	const sum = (rows: Account[], key: keyof Account) =>41		rows.reduce((total, row) => total + ((row[key] as number | undefined) ?? 0), 0);42</script>43​44<Table columns={COLUMNS} rows={ROWS} rowNumbers fullscreen search label="Customer balances">45	{#snippet foot({ rows, cell })}46		<tr>47			<td colspan={2} class={cell}>Net</td>48			<td colspan={2} class={[cell, 'text-center tabular-nums']}>49				<span dir="ltr"50					>{formatCell('decimal', sum(rows, 'usdDebit') - sum(rows, 'usdCredit'))}</span51				>52			</td>53			<td colspan={2} class={[cell, 'text-center tabular-nums']}>54				<span dir="ltr">{formatCell('number', sum(rows, 'iqdDebit') - sum(rows, 'iqdCredit'))}</span55				>56			</td>57			<td class={cell}></td>58		</tr>59	{/snippet}60</Table>

1<script lang="ts">2	import { Table } from 'omaris';3​4	type Person = { name: string; role: string; city: string; commits: number };5​6	const ROWS: Person[] = [7		{ name: 'Amina Yusuf', role: 'Engineer', city: 'Erbil', commits: 812 },8		{ name: 'Dilan Karim', role: 'Designer', city: 'Baghdad', commits: 143 },9		{ name: 'Hevi Salih', role: 'Engineer', city: 'Duhok', commits: 967 },10		{ name: 'Karwan Ali', role: 'Support', city: 'Basra', commits: 54 },11		{ name: 'Rania Hadi', role: 'Engineer', city: 'Erbil', commits: 401 }12	];13​14	const COLUMNS = [15		{ key: 'name', header: 'Name', sortable: true },16		{ key: 'role', header: 'Role', sortable: true },17		{ key: 'city', header: 'City', sortable: true, hideBelow: 'sm' as const },18		{ key: 'commits', header: 'Commits', numeric: true, sortable: true }19	];20</script>21​22<Table columns={COLUMNS} rows={ROWS} search label="Team" />

1<script lang="ts">2	import { Button, Table } from 'omaris';3​4	const ROWS = [5		{ id: 1, file: 'export-001.csv', size: '1.2 MB' },6		{ id: 2, file: 'export-002.csv', size: '1.6 MB' },7		{ id: 3, file: 'export-003.csv', size: '2.0 MB' },8		{ id: 4, file: 'export-004.csv', size: '2.4 MB' },9		{ id: 5, file: 'export-005.csv', size: '2.8 MB' },10		{ id: 6, file: 'export-006.csv', size: '3.2 MB' },11		{ id: 7, file: 'export-007.csv', size: '3.6 MB' },12		{ id: 8, file: 'export-008.csv', size: '4.0 MB' },13		{ id: 9, file: 'export-009.csv', size: '4.4 MB' },14		{ id: 10, file: 'export-010.csv', size: '4.8 MB' },15		{ id: 11, file: 'export-011.csv', size: '5.2 MB' },16		{ id: 12, file: 'export-012.csv', size: '5.6 MB' },17		{ id: 13, file: 'export-013.csv', size: '6.0 MB' },18		{ id: 14, file: 'export-014.csv', size: '6.4 MB' }19	];20​21	const COLUMNS = [22		{ key: 'file', header: 'File' },23		{ key: 'size', header: 'Size', numeric: true }24	];25</script>26​27<Table28	columns={COLUMNS}29	rows={ROWS}30	rowKey={(row) => row.id}31	selection32	pagination={5}33	label="Exports"34>35	{#snippet selectionActions(keys)}36		<Button variant="text" tone="destructive" size="xs">Delete {keys.length}</Button>37	{/snippet}38</Table>

1<script lang="ts" module>2	export const meta = { fill: true };3​4	type Deploy = {5		app: string;6		who: string;7		status: 'live' | 'building' | 'failed';8		minutes: number;9	};10</script>11​12<script lang="ts">13	import { Avatar, Badge, Table } from 'omaris';14​15	const ROWS: Deploy[] = [16		{ app: 'storefront', who: 'Amina Yusuf', status: 'live', minutes: 3 },17		{ app: 'admin', who: 'Karwan Ali', status: 'building', minutes: 0 },18		{ app: 'api', who: 'Hevi Salih', status: 'failed', minutes: 41 }19	];20​21	const TONES = { live: 'success', building: 'info', failed: 'destructive' } as const;22</script>23​24{#snippet who(row: Deploy)}25	<div class="flex items-center gap-2">26		<Avatar name={row.who} size="sm" colorize />27		<span>{row.who}</span>28	</div>29{/snippet}30​31{#snippet status(row: Deploy)}32	<Badge tone={TONES[row.status]} variant="tonal" size="sm">{row.status}</Badge>33{/snippet}34​35<Table36	columns={[37		{ key: 'app', header: 'App', sortable: true },38		{ key: 'who', header: 'Deployed by', cell: who },39		{ key: 'status', header: 'Status', cell: status, value: (row) => row.status, sortable: true },40		{ key: 'minutes', header: 'Ago', numeric: true, accessor: (row) => `${row.minutes}m` }41	]}42	rows={ROWS}43	label="Deploys"44/>

1<script lang="ts">2	import { Table } from 'omaris';3​4	const COLUMNS = [5		{ key: 'name', header: 'Name' },6		{ key: 'city', header: 'City' },7		{ key: 'total', header: 'Total', numeric: true }8	];9</script>10​11<div class="flex w-full flex-col gap-6">12	<Table columns={COLUMNS} rows={[]} loading loadingRows={3} label="Loading" />13	<Table14		columns={COLUMNS}15		rows={[]}16		emptyText="No orders yet. They will show up here the moment one lands."17		label="Empty"18	/>19</div>

1<script lang="ts">2	import { Table } from 'omaris';3​4	const ROWS = [5		{ id: 'INV-4021', customer: 'Kurdistan Roasters', total: '480,000' },6		{ id: 'INV-4022', customer: 'Dijla Grocers', total: '125,000' },7		{ id: 'INV-4023', customer: 'Shatt Café', total: '62,500' }8	];9</script>10​11<Table12	columns={[13		{ key: 'id', header: 'Invoice', class: 'font-mono' },14		{ key: 'customer', header: 'Customer' },15		{ key: 'total', header: 'IQD', numeric: true }16	]}17	rows={ROWS}18	variant="surface"19	density="comfortable"20	label="Invoices"21	classes={{22		headCell: 'uppercase tracking-wide text-xs',23		row: 'even:bg-surface-container-low'24	}}25/>

1<script lang="ts" module>2	export const meta = { fill: true };3​4	type Status = 'paid' | 'pending' | 'refunded' | 'failed';5​6	type Order = {7		id: string;8		customer: string;9		email: string;10		status: Status;11		channel: 'web' | 'app' | 'pos';12		total: number;13		items: number;14		placed: Date;15		trend: number[];16	};17</script>18​19<script lang="ts">20	import { Sparkline } from 'omaris/chart';21	import {22		Avatar,23		Badge,24		Button,25		IconButton,26		Menu,27		MenuItem,28		Sheet,29		Table,30		Text,31		latn,32		type TableColumn33	} from 'omaris';34​35	const NAMES = [36		['Amina Yusuf', 'amina@dijla.co'],37		['Karwan Ali', 'karwan@roasters.iq'],38		['Hevi Salih', 'hevi@shattcafe.com'],39		['Dilan Karim', 'dilan@zagros.dev'],40		['Rania Hadi', 'rania@hadi.family'],41		['Soran Aziz', 'soran@aziz.io'],42		['Lana Faraj', 'lana@faraj.studio'],43		['Omar Nuri', 'omar@nuri.co'],44		['Zhyan Rasul', 'zhyan@rasul.me'],45		['Bahar Qadir', 'bahar@qadir.shop'],46		['Ari Hassan', 'ari@hassan.dev'],47		['Nour Salem', 'nour@salem.co']48	];49	const STATUSES: Status[] = ['paid', 'paid', 'pending', 'paid', 'refunded', 'failed'];50	const CHANNELS = ['web', 'app', 'pos'] as const;51​52	/** Deterministic, so the page looks the same on every load. */53	const ORDERS: Order[] = Array.from({ length: 36 }, (_, i) => {54		const [customer, email] = NAMES[i % NAMES.length];55		const seed = (i * 9301 + 49297) % 233280;56		const total = 18_000 + ((seed * 7) % 420_000);57		return {58			id: `ORD-${(5120 + i).toString()}`,59			customer,60			email,61			status: STATUSES[(i * 5) % STATUSES.length],62			channel: CHANNELS[(i * 7) % CHANNELS.length],63			total,64			items: 1 + ((seed >> 3) % 7),65			placed: new Date(2026, 8, 4 - Math.floor(i / 3), 9 + (i % 9), (i * 17) % 60),66			trend: Array.from({ length: 8 }, (_, j) => 20 + ((seed >> j) % 60) + j * (i % 3))67		};68	});69​70	const TONES: Record<Status, 'success' | 'warning' | 'info' | 'destructive'> = {71		paid: 'success',72		pending: 'warning',73		refunded: 'info',74		failed: 'destructive'75	};76​77	const iqd = new Intl.NumberFormat(undefined, latn({ maximumFractionDigits: 0 }));78	const when = new Intl.DateTimeFormat(79		undefined,80		latn({ day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })81	);82​83	let rows = $state(ORDERS);84	let open = $state<Order | null>(null);85​86	const COLUMNS: TableColumn<Order>[] = [87		{88			key: 'id',89			header: 'Order',90			class: 'font-mono text-label-md',91			width: '7rem',92			alwaysVisible: true93		},94		{ key: 'customer', header: 'Customer', cell: customer, sortable: true },95		{ key: 'status', header: 'Status', cell: status, value: (row) => row.status, sortable: true },96		{97			key: 'channel',98			header: 'Channel',99			hideBelow: 'lg',100			accessor: (row) => row.channel.toUpperCase()101		},102		{ key: 'items', header: 'Items', numeric: true, hideBelow: 'md', sortable: true },103		{ key: 'trend', header: 'Last 8 wks', cell: trend, hideBelow: 'md', searchable: false },104		{105			key: 'total',106			header: 'Total (IQD)',107			numeric: true,108			sortable: true,109			accessor: (row) => iqd.format(row.total)110		},111		{112			key: 'placed',113			header: 'Placed',114			hideBelow: 'sm',115			sortable: true,116			accessor: (row) => when.format(row.placed)117		},118		{ key: 'menu', header: '', cell: menu, width: '3rem', searchable: false, alwaysVisible: true }119	];120​121	function remove(ids: (string | number)[]) {122		rows = rows.filter((row) => !ids.includes(row.id));123	}124</script>125​126{#snippet customer(row: Order)}127	<div class="flex items-center gap-2.5">128		<Avatar name={row.customer} size="sm" colorize />129		<div class="flex min-w-0 flex-col">130			<Text variant="body-md" class="truncate">{row.customer}</Text>131			<Text variant="label-sm" tone="muted" class="truncate">{row.email}</Text>132		</div>133	</div>134{/snippet}135​136{#snippet status(row: Order)}137	<Badge tone={TONES[row.status]} variant="tonal" size="sm">{row.status}</Badge>138{/snippet}139​140{#snippet trend(row: Order)}141	<Sparkline data={row.trend} width={88} height={24} area marker />142{/snippet}143​144{#snippet menu(row: Order)}145	<!-- The row opens the sheet on press; the menu must not. -->146	<!-- svelte-ignore a11y_no_static_element_interactions -->147	<span148		class="flex justify-end"149		onclick={(event) => event.stopPropagation()}150		onkeydown={(event) => event.stopPropagation()}151	>152		<Menu label="Order actions" align="end">153			{#snippet trigger(props)}154				<IconButton {...props} size="sm" aria-label="Actions for {row.id}">155					<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">156						<circle cx="5" cy="12" r="2" /><circle cx="12" cy="12" r="2" /><circle157							cx="19"158							cy="12"159							r="2"160						/>161					</svg>162				</IconButton>163			{/snippet}164			<MenuItem onclick={() => (open = row)}>View details</MenuItem>165			<MenuItem>Resend receipt</MenuItem>166			<MenuItem tone="destructive" onclick={() => remove([row.id])}>Archive</MenuItem>167		</Menu>168	</span>169{/snippet}170​171<Table172	columns={COLUMNS}173	{rows}174	rowKey={(row) => row.id}175	label="Orders"176	sticky177	maxHeight="26rem"178	search={{ placeholder: 'Search orders, customers…' }}179	filtering={[180		{ key: 'status', label: 'Status' },181		{ key: 'channel', label: 'Channel', format: (value) => value.toUpperCase() }182	]}183	sorting={{ key: 'placed', direction: 'desc' }}184	pagination={{ size: 10, sizeOptions: [10, 20, 50] }}185	selection186	columnVisibility187	onrowclick={(row) => (open = row)}188	classes={{ row: 'cursor-pointer' }}189>190	{#snippet actions()}191		<Button size="sm" variant="tonal">Export</Button>192	{/snippet}193	{#snippet selectionActions(keys)}194		<Button size="xs" variant="text">Mark paid</Button>195		<Button size="xs" variant="text" tone="destructive" onclick={() => remove(keys)}>196			Archive {keys.length}197		</Button>198	{/snippet}199</Table>200​201<Sheet202	open={open !== null}203	onclose={() => (open = null)}204	title={open?.id}205	description={open ? `${open.customer} · ${when.format(open.placed)}` : undefined}206>207	{#if open}208		<div class="flex flex-col gap-4 px-5 pb-5">209			<div class="grid grid-cols-2 gap-3">210				<div class="rounded-shape-md bg-surface-container p-3">211					<Text variant="label-sm" tone="muted">Total</Text>212					<Text variant="title-md" class="tabular-nums">{iqd.format(open.total)} IQD</Text>213				</div>214				<div class="rounded-shape-md bg-surface-container p-3">215					<Text variant="label-sm" tone="muted">Status</Text>216					<div class="mt-1">217						<Badge tone={TONES[open.status]} variant="tonal">{open.status}</Badge>218					</div>219				</div>220			</div>221			<div class="flex flex-col gap-1">222				<Text variant="label-sm" tone="muted">Weekly orders from this customer</Text>223				<Sparkline data={open.trend} width="100%" height={56} area marker />224			</div>225			<Text variant="body-sm" tone="muted">226				{open.items} item{open.items === 1 ? '' : 's'} through the {open.channel} channel.227			</Text>228		</div>229	{/if}230	{#snippet footer()}231		<Button variant="text" onclick={() => (open = null)}>Close</Button>232		<Button>Resend receipt</Button>233	{/snippet}234</Sheet>

1<script lang="ts" module>2	export const meta = { fill: true };3​4	type Ticket = {5		id: number;6		subject: string;7		requester: string;8		priority: 'low' | 'normal' | 'high';9		age: number;10	};11</script>12​13<script lang="ts">14	import { untrack } from 'svelte';15	import { Badge, Table, Text, type TableColumn } from 'omaris';16​17	/** The whole "database": 240 tickets. */18	const SUBJECTS = [19		'Card declined at checkout',20		'Cannot reset password',21		'Invoice shows wrong tax',22		'Dark mode chart labels unreadable',23		'Export is missing rows',24		'Webhook retries forever',25		'Two-factor code never arrives',26		'Wrong currency on receipt'27	];28	const PEOPLE = ['Amina', 'Karwan', 'Hevi', 'Dilan', 'Rania', 'Soran', 'Lana', 'Omar'];29	const DB: Ticket[] = Array.from({ length: 240 }, (_, i) => ({30		id: 9000 + i,31		subject: SUBJECTS[(i * 3) % SUBJECTS.length],32		requester: PEOPLE[(i * 5) % PEOPLE.length],33		priority: (['low', 'normal', 'normal', 'high'] as const)[(i * 7) % 4],34		age: (i * 13) % 9635	}));36​37	type Query = { page: number; size: number; key?: string; direction?: 'asc' | 'desc'; q: string };38​39	let query = $state<Query>({ page: 1, size: 8, key: 'age', direction: 'asc', q: '' });40	let rows = $state<Ticket[]>([]);41	let total = $state(0);42	let loading = $state(true);43	let requests = $state(0);44	/** Only the newest round trip is allowed to land. */45	let latest = 0;46​47	/** What a server would do: filter, sort, slice — after a delay. */48	async function fetchPage(q: Query) {49		const ticket = ++latest;50		requests += 1;51		loading = true;52		await new Promise((resolve) => setTimeout(resolve, 550));53		if (ticket !== latest) return;54		let hits = DB.filter(55			(t) => !q.q || `${t.subject} ${t.requester}`.toLowerCase().includes(q.q.toLowerCase())56		);57		if (q.key) {58			const key = q.key as keyof Ticket;59			const sign = q.direction === 'desc' ? -1 : 1;60			hits = [...hits].sort((a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0) * sign);61		}62		total = hits.length;63		rows = hits.slice((q.page - 1) * q.size, q.page * q.size);64		loading = false;65	}66​67	/**68	 * The query is the dependency; the fetch is not. `untrack` is load-bearing69	 * — `fetchPage` reads `requests` to bump it, synchronously, and an effect70	 * that reads the state it writes re-runs itself until Svelte gives up with71	 * `effect_update_depth_exceeded`. That error escapes hydration, so the72	 * whole *page* stops being interactive, not just this demo.73	 */74	$effect(() => {75		const q = { ...query };76		untrack(() => void fetchPage(q));77	});78​79	const COLUMNS: TableColumn<Ticket>[] = [80		{ key: 'id', header: '#', width: '5rem', class: 'font-mono' },81		{ key: 'subject', header: 'Subject', sortable: true },82		{ key: 'requester', header: 'Requester', sortable: true, hideBelow: 'sm' },83		{84			key: 'priority',85			header: 'Priority',86			cell: priority,87			value: (row) => row.priority,88			sortable: true89		},90		{91			key: 'age',92			header: 'Open for',93			numeric: true,94			sortable: true,95			accessor: (row) => `${row.age}h`96		}97	];98</script>99​100{#snippet priority(row: Ticket)}101	<Badge102		size="sm"103		variant={row.priority === 'high' ? 'filled' : 'tonal'}104		tone={row.priority === 'high'105			? 'destructive'106			: row.priority === 'normal'107				? 'primary'108				: 'secondary'}109	>110		{row.priority}111	</Badge>112{/snippet}113​114<div class="flex w-full flex-col gap-2">115	<Table116		columns={COLUMNS}117		{rows}118		rowKey={(row) => row.id}119		label="Tickets"120		{loading}121		loadingRows={query.size}122		search={{123			manual: true,124			placeholder: 'Search subject or requester',125			onchange: (q) => (query = { ...query, q, page: 1 })126		}}127		sorting={{128			manual: true,129			key: query.key,130			direction: query.direction,131			onchange: ({ key, direction }) => (query = { ...query, key, direction, page: 1 })132		}}133		pagination={{134			manual: true,135			page: query.page,136			size: query.size,137			total,138			sizeOptions: [8, 16, 32],139			onchange: ({ page, size }) => (query = { ...query, page, size })140		}}141	/>142	<Text variant="label-sm" tone="muted" class="tabular-nums">143		{requests} request{requests === 1 ? '' : 's'} · page {query.page} of {Math.max(144			1,145			Math.ceil(total / query.size)146		)} · {total} matching147	</Text>148</div>