Update demo page

README.md

@@ -62,4 +62,4 @@ _Requires Svelte 5 peer dependency_
 
 ## Examples
 
-Reference the demo website [+page.svelte](./src/routes/+page.svelte) for a more comprehensive example.
+Refer to the demo website [+page.svelte](./src/routes/+page.svelte) and [unit tests](./src/index.test.ts) for more comprehensive examples.

src/routes/+page.svelte

@@ -31,15 +31,20 @@
 
 <div class="mx-auto h-dvh max-w-7xl px-4 sm:px-6 lg:px-8">
 	<div class="grid h-full grid-cols-1 grid-rows-[auto,auto,1fr,auto]">
-		<div class="flex justify-between pb-4 pt-12">
+		<div class="flex justify-between gap-4 pb-4 pt-12">
 			<div>
 				<h1 class="text-4xl font-extrabold tracking-tight lg:text-5xl">Svelte Data Table</h1>
 				<p class="text-lg text-muted-foreground">
 					Small, fast data table library for Svelte 5 with client-side sorting, filtering, and
 					pagination.
 				</p>
 			</div>
-			<Button size="icon" variant="ghost" href="https://github.com/Careswitch/svelte-data-table">
+			<Button
+				class="shrink-0"
+				size="icon"
+				variant="ghost"
+				href="https://github.com/Careswitch/svelte-data-table"
+			>
 				<GithubLogo class="size-6" />
 			</Button>
 		</div>
@@ -105,13 +110,17 @@
 			<Table.Body>
 				{#each table.rows as row (row.id)}
 					<Table.Row>
-						<Table.Cell>{row.id}</Table.Cell>
-						<Table.Cell>{row.name}</Table.Cell>
-						<Table.Cell>
-							<Badge variant={row.status === 'active' ? 'secondary' : 'outline'}>
-								{row.status === 'active' ? 'Active' : 'Inactive'}
-							</Badge>
-						</Table.Cell>
+						{#each table.columns as column (column.key)}
+							{#if column.key === 'status'}
+								<Table.Cell>
+									<Badge variant={row.status === 'active' ? 'secondary' : 'outline'}>
+										{row.status === 'active' ? 'Active' : 'Inactive'}
+									</Badge>
+								</Table.Cell>
+							{:else}
+								<Table.Cell>{row[column.key]}</Table.Cell>
+							{/if}
+						{/each}
 					</Table.Row>
 				{/each}
 			</Table.Body>