src/lib/components/Residents/ResidentTable.stories.svelte

@@ -6,7 +6,6 @@
 	const { Story } = defineMeta({
 		title: 'Residents/Resident Table',
 		component: ResidentTable,
-		argTypes: {},
 	});
 </script>
 
@@ -17,5 +16,13 @@
 <Story
 	name="Default"
 	children={template}
-	args={{ items: [{ name: 'Resident 1', phoneNumber: '111-1111' }] }}
+	args={{
+		items: [
+			{
+				id: '99fc03e9-3ed1-4047-b9ad-0bf2a9025eaa',
+				name: 'Resident 1',
+				phoneNumber: '111-1111',
+			},
+		],
+	}}
 />

src/lib/components/Residents/ResidentTable.svelte

@@ -5,7 +5,7 @@
 	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
-		items: Pick<Resident, 'id' | 'name' | 'phoneNumber'>[];
+		items?: Pick<Resident, 'id' | 'name' | 'phoneNumber'>[];
 	} & Omit<SvelteHTMLElements['table'], 'children'>;
 
 	let { items, class: className, ...props }: Props = $props();
@@ -22,12 +22,14 @@
 	</thead>
 	<tbody>
 		<!-- items -->
-		{#each items as resident, index (resident.id)}
+		{#if items}
-			<tr class="hover">
+			{#each items as resident, index (resident.id)}
-				<th>{index + 1}</th>
+				<tr class="hover">
-				<td>{resident.name}</td>
+					<th>{index + 1}</th>
-				<td>{resident.phoneNumber}</td>
+					<td>{resident.name}</td>
-			</tr>
+					<td>{resident.phoneNumber}</td>
-		{/each}
+				</tr>
+			{/each}
+		{/if}
 	</tbody>
 </table>