Data table

<script lang="ts">
	import DataTable, { type Column } from '#lib/ui/DataTable.svelte';

	type Work = { title: string; author: string; written: number; loans: number };

	const works: Work[] = [
		{
			title: 'The Compendious Book on Calculation',
			author: 'Al-Khwārizmī',
			written: 820,
			loans: 1204
		},
		{ title: 'Book of Optics', author: 'Ibn al-Haytham', written: 1021, loans: 866 },
		{ title: 'The Canon of Medicine', author: 'Ibn Sīnā', written: 1025, loans: 2310 },
		{ title: 'Kitāb al-Taṣrīf', author: 'Al-Zahrāwī', written: 1000, loans: 547 },
		{ title: 'Tabula Rogeriana', author: 'Al-Idrīsī', written: 1154, loans: 391 },
		{
			title: 'Book of Ingenious Mechanical Devices',
			author: 'Al-Jazarī',
			written: 1206,
			loans: 978
		}
	];

	const nf = new Intl.NumberFormat();
	const columns: Column<Work>[] = [
		{ accessorKey: 'title', header: 'Title' },
		{ accessorKey: 'author', header: 'Author' },
		{ accessorKey: 'written', header: 'Written (CE)', meta: { align: 'end' } },
		{
			accessorKey: 'loans',
			header: 'Loans',
			cell: (c) => nf.format(c.getValue<number>()),
			meta: { align: 'end' }
		}
	];
</script>

<DataTable caption="Most borrowed works" data={works} {columns} />

<script lang="ts">
	import DataTable, { type Column } from '#lib/ui/DataTable.svelte';

	type Scholar = { name: string; field: string; city: string; born: number };

	// Birth years are approximate for most; "c." is left out so the column sorts as numbers.
	const scholars: Scholar[] = [
		{ name: 'Jābir ibn Ḥayyān', field: 'Alchemy', city: 'Kūfa', born: 721 },
		{ name: 'Al-Khwārizmī', field: 'Mathematics', city: 'Baghdad', born: 780 },
		{ name: 'Al-Kindī', field: 'Philosophy', city: 'Baghdad', born: 801 },
		{ name: 'Thābit ibn Qurra', field: 'Mathematics', city: 'Baghdad', born: 826 },
		{ name: 'Al-Rāzī', field: 'Medicine', city: 'Rayy', born: 865 },
		{ name: 'Al-Fārābī', field: 'Philosophy', city: 'Baghdad', born: 872 },
		{ name: 'Al-Zahrāwī', field: 'Surgery', city: 'Córdoba', born: 936 },
		{ name: 'Ibn al-Haytham', field: 'Optics', city: 'Cairo', born: 965 },
		{ name: 'Al-Bīrūnī', field: 'Astronomy', city: 'Ghazni', born: 973 },
		{ name: 'Ibn Sīnā', field: 'Medicine', city: 'Bukhara', born: 980 },
		{ name: 'Omar Khayyām', field: 'Mathematics', city: 'Nīshāpūr', born: 1048 },
		{ name: 'Al-Idrīsī', field: 'Geography', city: 'Palermo', born: 1100 },
		{ name: 'Ibn Rushd', field: 'Philosophy', city: 'Córdoba', born: 1126 },
		{ name: 'Al-Jazarī', field: 'Engineering', city: 'Diyarbakır', born: 1136 },
		{ name: 'Naṣīr al-Dīn al-Ṭūsī', field: 'Astronomy', city: 'Marāgha', born: 1201 },
		{ name: 'Ibn al-Nafīs', field: 'Medicine', city: 'Cairo', born: 1213 }
	];

	const columns: Column<Scholar>[] = [
		{ accessorKey: 'name', header: 'Scholar' },
		{ accessorKey: 'field', header: 'Field' },
		{ accessorKey: 'city', header: 'City' },
		{ accessorKey: 'born', header: 'Born (CE)', meta: { align: 'end' } }
	];
</script>

<DataTable
	caption="Scholars of the Golden Age"
	hideCaption
	searchLabel="Search scholars"
	data={scholars}
	{columns}
	pageSize={8}
/>