Added choice option.

src/routes/(dashboard)/+page.server.ts

@@ -6,18 +6,21 @@ import { deleteSessionTokenCookie } from '$lib/server/session';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 import { formSchema } from './schema';
+import { getDepartments } from '$lib/server/db/department';
 
 export const load: PageServerLoad = async ({ locals }) => {
 	const { database } = locals;
 	try {
 		const persons = await getPersons(database, 1000, 0);
+		const departments = await getDepartments(database);
 		return {
-			persons
+			persons,
+			departments
 		};
 	} catch (err: unknown) {
-		console.debug(`Failed to get persons: ${(err as Error).message}`);
+		console.debug(`Failed to get persons or departments: ${(err as Error).message}`);
 		return fail(500, {
-			message: 'Failed to get persons'
+			message: 'Failed to get persons or departments'
 		});
 	}
 };

src/routes/(dashboard)/columns.ts

@@ -31,6 +31,9 @@ export const columns: ColumnDef<Person>[] = [
 		header: 'Department',
 		meta: {
 			editable: true,
+			editableChoices: (data) => {
+				return data.departments.map((val) => val.name);
+			}
 		}
 	},
 	{

src/routes/(dashboard)/data-table-editable.svelte

@@ -3,16 +3,19 @@
 	import type { Person } from '$lib/types/person';
 	import type { Table } from '@tanstack/table-core';
 	import { fly } from 'svelte/transition';
+	import * as Select from '$lib/components/ui/select';
 
 	let {
 		id,
 		value,
+		choices = null,
 		name,
 		enabled = false,
 		table
 	}: {
 		id: number;
 		value: string;
+		choices?: string[] | null;
 		name: string;
 		enabled?: boolean;
 		table: Table<Person>;
@@ -35,9 +38,24 @@
 </script>
 
 {#if enabled && table.options !== null && table.options.meta?.getEditChanges(id)}
-	<div in:fly>
-		<Input class="w-min field-sizing-content" bind:value={getChangesMap, updateChangesMap} />
-	</div>
+	{#if choices === null}
+		<div in:fly>
+			<Input class="w-min field-sizing-content" bind:value={getChangesMap, updateChangesMap} />
+		</div>
+	{:else}
+		<div in:fly>
+			<Select.Root type="single" bind:value={getChangesMap, updateChangesMap}>
+				<Select.Trigger>
+					{getChangesMap()}
+				</Select.Trigger>
+				<Select.Content>
+					{#each choices as choice}
+						<Select.Item value={choice}>{choice}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+	{/if}
 {:else}
 	<div in:fly>
 		{value}

src/table.d.ts

@@ -5,7 +5,8 @@ declare module '@tanstack/table-core' {
         editables?: SvelteMap;
     }
     interface ColumnMeta<TData extends RowData, TValue> {
-        editable?: boolean
+        editable?: boolean,
+        editableChoices?: (data: any) => string[]
     }
     interface TableMeta<TData extends RowData> {
         setEditChanges: (id: number, changes?: PersonEditable) => void,