Data Table

web/src/lib/elements/ui/dataTable/data-table-actions.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Ellipsis from 'lucide-svelte/icons/ellipsis';
   import * as DropdownMenu from '$lib/elements/ui/dropdown-menu';
-  import * as Button from '$lib/elements/ui/button';
+  import Button from '$lib/elements/ui/button/button.svelte';
 
   export let id: string;
 </script>

web/src/lib/elements/ui/dataTable/data-table-header-checkbox.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { Checkbox } from '$lib/elements/ui/checkbox';
+    import { cn } from '$lib/utils';
+    import type { Writable } from 'svelte/store';
+
+    export let checked: Writable<boolean>;
+  </script>
+
+  <Checkbox bind:checked={$checked} class={cn("border-white data-[state=checked]:bg-white data-[state=checked]:text-foreground")}/>

web/src/lib/elements/ui/dataTable/data-table.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { createTable, Render, Subscribe, createRender } from 'svelte-headless-table';
-  import { writable } from 'svelte/store';
   import * as Table from '$lib/elements/ui/table';
   import DataTableActions from './data-table-actions.svelte';
   import {
@@ -11,22 +10,24 @@
     addSelectedRows,
   } from 'svelte-headless-table/plugins';
   import { Button } from '$lib/elements/ui/button';
-  import ArrowUpDown from 'lucide-svelte/icons/arrow-up-down';
   import ChevronDown from 'lucide-svelte/icons/chevron-down';
-  import * as Input from '$lib/elements/ui/input';
   import * as DropdownMenu from '$lib/elements/ui/dropdown-menu';
   import DataTableCheckbox from './data-table-checkbox.svelte';
+  import DataTableHeaderCheckbox from './data-table-header-checkbox.svelte';
+  import { ArrowDown, ArrowUp } from 'lucide-svelte';
+  import Input from '$lib/elements/ui/input/input.svelte';
 
   interface DataItem {
     id: string;
 
     [key: string]: string | string[] | number;
   }
 
-  export let data: DataItem[];
+  export let tableData;
   export let columnNames;
+  export let keys;
 
-  const table = createTable(writable(data), {
+  const table = createTable(tableData, {
     page: addPagination(),
     sort: addSortBy(),
     filter: addTableFilter({
@@ -36,18 +37,16 @@
     select: addSelectedRows(),
   });
 
-  let idKey = Object.keys(data[0])[0];
-  console.log(idKey);
   let columns = table.createColumns([
     table.column({
       //first column only contains the checkboxes.
       accessor: (item) => {
-        return item[idKey]; //'item' is of type 'unknown' error dont know how to fix
+        return item[keys[0]];
       },
       id: 'id',
       header: (_, { pluginStates }) => {
         const { allPageRowsSelected } = pluginStates.select;
-        return createRender(DataTableCheckbox, {
+        return createRender(DataTableHeaderCheckbox, {
           checked: allPageRowsSelected,
         });
       },
@@ -67,12 +66,11 @@
     }),
   ]);
   for (const [i, columnName] of columnNames.entries()) {
-    let currentKey = Object.keys(data[0])[i + 1];
     columns = columns.concat(
       table.createColumns([
         table.column({
-          accessor: (item: DataItem) => {
-            return item[currentKey];
+          accessor: (item) => {
+            return item[keys[i + 1]];
           },
           header: columnName,
         }),
@@ -84,7 +82,7 @@
     table.createColumns([
       table.column({
         accessor: (item) => {
-          return item[idKey];
+          return item[keys[0]];
         },
         header: '',
         id: 'actions',
@@ -114,15 +112,15 @@
     .filter(([, hide]) => !hide)
     .map(([id]) => id);
 
-  const hidableCols = ['status', 'email', 'amount'];
+  const hidableCols = columnNames;
 </script>
 
-<div>
+<div class = "border-foreground">
   <div class="flex items-center py-4">
-    <Input bind:value={$filterValue} class="max-w-sm" placeholder="Suche..." type="text" />
+    <Input bind:value={$filterValue} class="max-w-sm rounded-none border-0 border-b-4 border-foreground focus-visible:ring-0 focus-visible:border-b-4" placeholder="Suche..." type="text" />
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild let:builder>
-        <Button builders={[builder]} class="ml-auto" variant="outline">
+        <Button builders={[builder]} class="ml-auto" variant="secondary">
           Filter
           <ChevronDown class="ml-2 h-4 w-4" />
         </Button>
@@ -138,19 +136,22 @@
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   </div>
-  <div class="rounded-md border">
+  <div>
     <Table.Root {...$tableAttrs}>
-      <Table.Header>
+      <Table.Header class="bg-foreground">
         {#each $headerRows as headerRow}
           <Subscribe rowAttrs={headerRow.attrs()}>
             <Table.Row>
               {#each headerRow.cells as cell (cell.id)}
                 <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
-                  <Table.Head {...attrs} class="[&:has([role=checkbox])]:pl-3">
+                  <Table.Head {...attrs} class="[&:has([role=checkbox])]:pl-4">
                     {#if cell.id !== 'actions' && cell.id !== 'id'}
-                      <Button variant="ghost" on:click={props.sort.toggle}>
+                      <Button variant="ghost" on:click={props.sort.toggle} class="text-white">
                         <Render of={cell.render()} />
-                        <ArrowUpDown class={'ml-2 h-4 w-4'} />
+                        <div class="flex ml-2">
+                          <ArrowUp class="h-4 w-4 {props.sort.order === 'desc' ? 'text-accent' : ''}" />
+                          <ArrowDown class="ml-[-4px] h-4 w-4 {props.sort.order === 'asc' ? 'text-accent' : ''}" />
+                        </div>
                       </Button>
                     {:else}
                       <Render of={cell.render()} />
@@ -184,10 +185,10 @@
       {Object.keys($selectedDataIds).length} von{' '}
       {$rows.length} Zeile(n) ausgewählt.
     </div>
-    <Button disabled={!$hasPreviousPage} on:click={() => ($pageIndex = $pageIndex - 1)} size="sm" variant="outline"
+    <Button disabled={!$hasPreviousPage} on:click={() => ($pageIndex = $pageIndex - 1)} size="sm" variant="secondary"
       >Zurück
     </Button>
-    <Button disabled={!$hasNextPage} on:click={() => ($pageIndex = $pageIndex + 1)} size="sm" variant="outline"
+    <Button disabled={!$hasNextPage} on:click={() => ($pageIndex = $pageIndex + 1)} size="sm" variant="secondary"
       >Weiter
     </Button>
   </div>

web/src/lib/elements/ui/table/table-body.svelte

@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<tbody class={cn('[&_tr:last-child]:border-0', className)} {...$$restProps}>
+<tbody class={cn('[&_tr:last-child]:border-0 bg-white', className)} {...$$restProps}>
   <slot />
 </tbody>

web/src/lib/elements/ui/table/table-row.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <tr
-  class={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+  class={cn('border-b transition-colors data-[state=selected]:bg-muted', className)}
   {...$$restProps}
   on:click
   on:keydown

web/src/lib/elements/ui/table/table.svelte

@@ -8,7 +8,7 @@
   export { className as class };
 </script>
 
-<div class="relative w-full overflow-auto">
+<div class="relative w-full overflow-auto rounded-md border border-foreground">
   <table class={cn('w-full caption-bottom text-sm', className)} {...$$restProps}>
     <slot />
   </table>

web/src/routes/admin/(resources)/rooms/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import DataTable from '$lib/elements/ui/dataTable/data-table.svelte';
+    import { writable } from 'svelte/store';
   let columnNames = ['Name', 'Gebäude', 'Kapazität', 'test'];
+  let keys = ['id', 'amount', 'status', 'email'];
 
   //demo data from shadcn
   const data = [
@@ -20,6 +22,6 @@
 </script>
 
 <!--not yet formatted-->
-<div class="container mx-auto py-10 bg-white w-full mt-5">
-  <DataTable {data} {columnNames} />
+<div class="mx-auto p-10 w-full">
+  <DataTable tableData={writable(data)} {columnNames} {keys}/>
 </div>

web/src/routes/admin/(resources)/students/+page.svelte

@@ -1,0 +1,22 @@
+<script lang="ts">
+  import { Button } from '$lib/elements/ui/button';
+  import DataTable from '$lib/elements/ui/dataTable/data-table.svelte';
+  import { createStudent, type Student, type StudentRequestDto } from '$lib/sdk/fetch-client';
+  import { writable, type Writable } from 'svelte/store';
+  let columnNames = ['Vorname', 'Nachname', 'Tags'];
+  let keys = ['id', 'firstName', 'lastName', 'tags'];
+  export let data;
+  let tableData: Writable<Student[] | undefined> = writable([]);
+
+  $: $tableData = data.students;
+  const create = async () => {
+    let student: StudentRequestDto = { firstName: 'Max', lastName: 'Mustermann', tagIds: [] };
+    createStudent(student);
+  };
+</script>
+
+<div class="p-10 bg-white w-full">
+  <DataTable {tableData} {columnNames} {keys} />
+</div>
+
+<Button on:click={create}>Add</Button>

web/src/routes/admin/(resources)/students/+page.ts

@@ -1,7 +1,12 @@
+import { getStudents, type Pageable, type PageStudent } from '$lib/sdk/fetch-client';
 import type { PageLoad } from './$types';
 
-export const load = (() => {
+export const load = (async () => {
+  const pageable: Pageable = { page: 0, size: 10 };
+  const result: PageStudent = await getStudents(pageable);
+  const students = result.content;
   return {
+    students,
     meta: {
       title: 'Students',
     },