Display

Table

A plain table that reads well: for a short, fixed set of rows.

Installation

npx sinaui add table

Copy src/lib/ui/Table.svelte, scroll-edges.ts and tokens.css. No dependencies.

You write the rows as ordinary HTML. To sort, search or page through many rows, use the Data table.

Examples

Basic

Each row starts with its own name, so screen readers say which scholar a cell belongs to. Numbers line up on the right.

Scholars of the Golden Age
Name	Known for	Worked in	Died (CE)
Al-Khwarizmi	Mathematics	Baghdad	850
Al-Kindi	Philosophy	Baghdad	873
Al-Razi	Medicine	Rayy	925
Ibn al-Haytham	Optics	Cairo	1040
Al-Biruni	Astronomy	Ghazni	1048

<script lang="ts">
	import Table from '#lib/ui/Table.svelte';

	const scholars = [
		{ name: 'Al-Khwarizmi', field: 'Mathematics', city: 'Baghdad', died: 850 },
		{ name: 'Al-Kindi', field: 'Philosophy', city: 'Baghdad', died: 873 },
		{ name: 'Al-Razi', field: 'Medicine', city: 'Rayy', died: 925 },
		{ name: 'Ibn al-Haytham', field: 'Optics', city: 'Cairo', died: 1040 },
		{ name: 'Al-Biruni', field: 'Astronomy', city: 'Ghazni', died: 1048 }
	];
	const year = new Intl.NumberFormat('en', { useGrouping: false });
</script>

<Table caption="Scholars of the Golden Age">
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Known for</th>
			<th scope="col">Worked in</th>
			<th scope="col" class="num">Died (CE)</th>
		</tr>
	</thead>
	<tbody>
		{#each scholars as s (s.name)}
			<tr>
				<th scope="row">{s.name}</th>
				<td>{s.field}</td>
				<td>{s.city}</td>
				<td class="num">{year.format(s.died)}</td>
			</tr>
		{/each}
	</tbody>
</Table>

With a total

A footer row for totals.

Your loans
Work	Volumes	Days left
The Canon of Medicine	5	40
Book of Optics	7	30
Al-Jabr	1	14
Tabula Rogeriana	70	7
Total	83

<script lang="ts">
	import Table from '#lib/ui/Table.svelte';

	const loans = [
		{ work: 'The Canon of Medicine', volumes: 5, days: 40 },
		{ work: 'Book of Optics', volumes: 7, days: 30 },
		{ work: 'Al-Jabr', volumes: 1, days: 14 },
		{ work: 'Tabula Rogeriana', volumes: 70, days: 7 }
	];
	const n = new Intl.NumberFormat('en');
	const total = loans.reduce((sum, l) => sum + l.volumes, 0);
</script>

<Table caption="Your loans">
	<thead>
		<tr>
			<th scope="col">Work</th>
			<th scope="col" class="num">Volumes</th>
			<th scope="col" class="num">Days left</th>
		</tr>
	</thead>
	<tbody>
		{#each loans as l (l.work)}
			<tr>
				<th scope="row">{l.work}</th>
				<td class="num">{n.format(l.volumes)}</td>
				<td class="num">{n.format(l.days)}</td>
			</tr>
		{/each}
	</tbody>
	<tfoot>
		<tr>
			<th scope="row">Total</th>
			<td class="num">{n.format(total)}</td>
			<td></td>
		</tr>
	</tfoot>
</Table>

Props

Prop	Type	Default
`caption`	`string` (required)
`hideCaption`	`boolean`	`false`
`children`	`<thead>`, `<tbody>`, `<tfoot>`

Give number cells class="num" to right-align them with even-width digits.

Accessibility

A real table: screen readers announce rows and columns and move by cell.
The caption names it; use scope="col" for column headings and scope="row" for the cell that names each row.
On narrow screens it scrolls sideways inside a focusable region, and the cut-off edge fades.