From 1582903aa34e30a9c60c79d8d217a805f3edc733 Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:28:32 +0000
Subject: [PATCH 1/5] Implement table sorting and searching

---
 src/lib/table/Table.svelte                    | 56 +++++++++++++++++--
 src/lib/table/TableBody.svelte                | 18 +++++-
 src/lib/table/TableBodyCell.svelte            |  4 +-
 src/lib/table/TableBodyRow.svelte             |  4 +-
 src/lib/table/TableHead.svelte                |  4 +-
 src/lib/table/TableHeadCell.svelte            | 41 ++++++++++++--
 src/lib/table/TableSearch.svelte              | 34 +++++++++--
 src/lib/table/index.ts                        |  7 ++-
 src/routes/components/table/+page.svelte      | 10 ++--
 .../components/table/md/search-input.md       |  8 +--
 10 files changed, 152 insertions(+), 34 deletions(-)

diff --git a/src/lib/table/Table.svelte b/src/lib/table/Table.svelte
index f32f823f..13db7964 100644
--- a/src/lib/table/Table.svelte
+++ b/src/lib/table/Table.svelte
@@ -1,12 +1,15 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import type { HTMLTableAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
   import { twMerge, twJoin } from 'tailwind-merge';
   import { setContext } from 'svelte';
   import { type TableColrType, type TableCtxType } from '.';
+  import { writable, type Writable } from 'svelte/store';
 
   interface Props extends HTMLTableAttributes {
     children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
     divClass?: string;
     striped?: boolean;
     hoverable?: boolean;
@@ -14,8 +17,20 @@
     shadow?: boolean;
     color?: TableColrType;
     customeColor?: string;
+    innerDivClass?: string;
+    inputClass?: string;
+    searchClass?: string;
+    searchPlaceholder?: string;
+    svgDivClass?: string;
+    svgClass?: string;
+    items?: T[];
+    filter?: (item: T, searchTerm: string) => boolean;
+    searchTerm?: string;
   }
-  let { children, divClass = 'relative overflow-x-auto', striped, hoverable, noborder, shadow, color = 'default', customeColor, ...restProps }: Props = $props();
+  let { children, header, footer, divClass = 'relative overflow-x-auto', striped, hoverable, noborder, shadow, color = 'default', customeColor, innerDivClass = 'p-4', inputClass, searchClass = 'relative mt-1', searchPlaceholder, svgDivClass, svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400', items, searchTerm = $bindable(''), filter, ...restProps }: Props = $props();
+
+  let inputCls = twMerge('bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', inputClass);
+  let svgDivCls = twMerge('absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none', svgDivClass);
 
   const colors = {
     default: 'text-gray-500 dark:text-gray-400',
@@ -29,20 +44,53 @@
     custom: customeColor
   };
 
-  let tableCtx: TableCtxType = {
+  let itemStore: TableCtxType<T>["items"] = writable(items);
+  let searchTermStore: TableCtxType<T>["searchTerm"] = writable(searchTerm);
+  let filterStore: TableCtxType<T>["filter"] = writable(filter);
+  let sorterStore: TableCtxType<T>["sorter"] = writable(undefined);
+  $effect(() => itemStore.set(items));
+  $effect(() => searchTermStore.set(searchTerm));
+  $effect(() => filterStore.set(filter));
+
+  let tableCtx: TableCtxType<T> = {
     striped,
     hoverable,
     noborder,
-    color
+    color,
+    items: itemStore,
+    searchTerm: searchTermStore,
+    filter: filterStore,
+    sorter: sorterStore
   };
 
   setContext('tableCtx', tableCtx);
 </script>
 
 <div class={twJoin(divClass, shadow && 'shadow-md sm:rounded-lg')}>
+  {#if filter}
+    <div class={innerDivClass}>
+      <label for="table-search" class="sr-only">Search</label>
+      <div class={searchClass}>
+        <div class={svgDivCls}>
+          <svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <input bind:value={searchTerm} placeholder={searchPlaceholder} type="text" id="table-search" class={inputCls} />
+      </div>
+      {#if header}
+        {@render header()}
+      {/if}
+    </div>
+  {:else if header}
+    {@render header()}
+  {/if}
   <table {...restProps} class={twMerge('w-full text-left text-sm', colors[color])}>
     {@render children()}
   </table>
+  {#if footer}
+    {@render footer()}
+  {/if}
 </div>
 
 <!--
diff --git a/src/lib/table/TableBody.svelte b/src/lib/table/TableBody.svelte
index 823e9d8d..8cfc4065 100644
--- a/src/lib/table/TableBody.svelte
+++ b/src/lib/table/TableBody.svelte
@@ -1,18 +1,30 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
+<script lang="ts" generics="T">
+  import { getContext, type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { TableCtxType } from '.';
 
   interface Props extends HTMLAttributes<HTMLTableSectionElement> {
     children?: Snippet;
     class?: string;
+    row?: Snippet<[{item: T, index: number}]>;
   }
-  let { children, class: className, ...restProps }: Props = $props();
+  let { children, class: className, row, ...restProps }: Props = $props();
+
+  let tableCtx: TableCtxType<T> = getContext('tableCtx');
+  let { items, searchTerm, filter, sorter } = tableCtx;
+  let filtered = $derived($filter ? $items?.filter(item => $filter(item, $searchTerm)) : $items);
+  let sorted = $derived($sorter ? filtered?.toSorted((a, b) => $sorter.direction * $sorter.sort(a, b)) : filtered);
 </script>
 
 <tbody class={className} {...restProps}>
   {#if children}
     {@render children()}
   {/if}
+  {#if row && sorted}
+    {#each sorted as item, index}
+      {@render row({item, index})}
+    {/each}
+  {/if}
 </tbody>
 
 <!--
diff --git a/src/lib/table/TableBodyCell.svelte b/src/lib/table/TableBodyCell.svelte
index afbe2049..3e35ed24 100644
--- a/src/lib/table/TableBodyCell.svelte
+++ b/src/lib/table/TableBodyCell.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
@@ -14,7 +14,7 @@
 
   let { children, class: className, colspan, onclick, ...restProps }: Props = $props();
 
-  const tableCtx: TableCtxType = getContext('tableCtx');
+  const tableCtx: TableCtxType<T> = getContext('tableCtx');
 
   let color = $state(tableCtx.color ? tableCtx.color : 'default');
 
diff --git a/src/lib/table/TableBodyRow.svelte b/src/lib/table/TableBodyRow.svelte
index a65816bd..cd5a70cf 100644
--- a/src/lib/table/TableBodyRow.svelte
+++ b/src/lib/table/TableBodyRow.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
@@ -13,7 +13,7 @@
   }
   let { children, class: className, color, ...restProps }: Props = $props();
 
-  const tableCtx: TableCtxType = getContext('tableCtx');
+  const tableCtx: TableCtxType<T> = getContext('tableCtx');
   let rowColor: string = $state(color ? color : tableCtx.color || 'default');
   const hoverable = tableCtx.hoverable;
   const striped = tableCtx.striped;
diff --git a/src/lib/table/TableHead.svelte b/src/lib/table/TableHead.svelte
index f2484cb2..6d7a04eb 100644
--- a/src/lib/table/TableHead.svelte
+++ b/src/lib/table/TableHead.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import { getContext } from 'svelte';
@@ -13,7 +13,7 @@
 
   let { children, class: className, defaultRow = true, ...restProps }: Props = $props();
 
-  const tableCtx: TableCtxType = getContext('tableCtx');
+  const tableCtx: TableCtxType<T> = getContext('tableCtx');
   const color = tableCtx.color;
   const noborder: boolean = tableCtx.noborder;
   const striped: boolean = tableCtx.striped;
diff --git a/src/lib/table/TableHeadCell.svelte b/src/lib/table/TableHeadCell.svelte
index e4915cf1..a683bae3 100644
--- a/src/lib/table/TableHeadCell.svelte
+++ b/src/lib/table/TableHeadCell.svelte
@@ -1,20 +1,53 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
+<script lang="ts" generics="T">
+  import { getContext, type Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import type { HTMLThAttributes } from 'svelte/elements';
+  import type { TableCtxType } from '.';
 
   interface Props extends HTMLThAttributes {
     children?: Snippet;
+    padding?: string;
     class?: string;
+    btnClass?: string;
+    sort?: (a: T, b: T) => number;
+    defaultDirection?: 'asc' | 'desc';
+    sortDirection?: 'asc' | 'desc' | null;
+    defaultSort?: boolean;
+  }
+  let { children, padding = 'px-6 py-3', class: className, btnClass, sort, defaultDirection = 'asc', sortDirection = $bindable(), defaultSort, ...restProps }: Props = $props();
+  let sortId = Math.random().toString(36).substring(2);
+
+  let { sorter }: TableCtxType<T> = getContext('tableCtx');
+  $effect(() => {
+    sortDirection = $sorter?.id === sortId ? $sorter.direction === 1 ? 'asc' : 'desc' : null;
+  });
+
+  if(defaultSort) sortItems();
+
+  function sortItems() {
+    if(!sort) return;
+    sorter.update(prev => {
+      const direction = (prev?.id === sortId ? -prev.direction : defaultDirection === 'asc' ? 1 : -1) as -1 | 1;
+      return {id: sortId, direction, sort};
+    });
   }
-  let { children, class: className, ...restProps }: Props = $props();
 </script>
 
-<th {...restProps} class={twMerge('px-6 py-3', className)}>
+{#if sort}
+<th {...restProps} class={className} aria-sort={sortDirection ? `${sortDirection}ending` : undefined}>
+  <button class={twMerge(padding, 'w-full text-left after:absolute after:pl-3', sortDirection === 'asc' && 'after:content-["▲"]', sortDirection === 'desc' && 'after:content-["▼"]', btnClass)} onclick={sortItems}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </button>
+</th>
+{:else}
+<th {...restProps} class={twMerge(padding, className)}>
   {#if children}
     {@render children()}
   {/if}
 </th>
+{/if}
 
 <!--
 @component
diff --git a/src/lib/table/TableSearch.svelte b/src/lib/table/TableSearch.svelte
index 1a8fffe3..fae5e5e8 100644
--- a/src/lib/table/TableSearch.svelte
+++ b/src/lib/table/TableSearch.svelte
@@ -1,13 +1,19 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import type { Snippet } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import { setContext } from 'svelte';
   import type { HTMLTableAttributes } from 'svelte/elements';
+  import type { TableCtxType } from '.';
+  import { writable, type Writable } from 'svelte/store';
 
-  type TableSearchType = {
+  type TableSearchType<T> = {
     striped?: boolean;
     hoverable?: boolean;
     color?: string;
+    items: Writable<T[] | undefined>;
+    searchTerm: Writable<string>;
+    filter: Writable<((item: T, searchTerm: string) => boolean) | undefined>;
+    sorter: Writable<{sort: (a: T, b: T) => number, direction: -1 | 1, id: string} | undefined>;
   };
   interface Props extends HTMLTableAttributes {
     children?: Snippet;
@@ -15,6 +21,7 @@
     footer?: Snippet;
     divClass?: string;
     inputValue?: string;
+    placeholder?: string;
     striped?: boolean;
     hoverable?: boolean;
     customColor?: string;
@@ -26,9 +33,11 @@
     svgClass?: string;
     tableClass?: string;
     class?: string;
+    items?: T[];
+    filter?: (item: T, searchTerm: string) => boolean;
   }
 
-  let { children, header, footer, divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg', inputValue = $bindable(), striped, hoverable, customColor = '', color = 'default', innerDivClass = 'p-4', inputClass, searchClass = 'relative mt-1', svgDivClass, svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400', tableClass = 'w-full text-left text-sm', class: className, ...restProps }: Props = $props();
+  let { children, header, footer, divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg', inputValue = $bindable(''), placeholder, striped, hoverable, customColor = '', color = 'default', innerDivClass = 'p-4', inputClass, searchClass = 'relative mt-1', svgDivClass, svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400', tableClass = 'w-full text-left text-sm', class: className, items, filter, ...restProps }: Props = $props();
 
   let inputCls = twMerge('bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', inputClass);
   let svgDivCls = twMerge('absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none', svgDivClass);
@@ -44,10 +53,23 @@
     pink: 'text-pink-100 dark:text-pink-100',
     custom: customColor
   };
-  const tableSearchCtx: TableSearchType = {
+  
+  let itemStore: TableCtxType<T>["items"] = writable(items);
+  let searchTermStore: TableCtxType<T>["searchTerm"] = writable(inputValue);
+  let filterStore: TableCtxType<T>["filter"] = writable(filter);
+  let sorterStore: TableCtxType<T>["sorter"] = writable(undefined);
+  $effect(() => itemStore.set(items));
+  $effect(() => searchTermStore.set(inputValue));
+  $effect(() => filterStore.set(filter));
+
+  const tableSearchCtx: TableSearchType<T> = {
     striped,
     hoverable,
-    color
+    color,
+    items: itemStore,
+    searchTerm: searchTermStore,
+    filter: filterStore,
+    sorter: sorterStore
   };
 
   setContext('tableCtx', tableSearchCtx);
@@ -62,7 +84,7 @@
           <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
         </svg>
       </div>
-      <input bind:value={inputValue} type="text" id="table-search" class={inputCls} />
+      <input bind:value={inputValue} {placeholder} type="text" id="table-search" class={inputCls} />
     </div>
     {#if header}
       {@render header()}
diff --git a/src/lib/table/index.ts b/src/lib/table/index.ts
index c059da60..2e990dad 100644
--- a/src/lib/table/index.ts
+++ b/src/lib/table/index.ts
@@ -5,12 +5,17 @@ import TableBodyRow from './TableBodyRow.svelte';
 import TableHeadCell from './TableHeadCell.svelte';
 import TableHead from './TableHead.svelte';
 import TableSearch from './TableSearch.svelte';
+import type { Writable } from 'svelte/store';
 
-type TableCtxType = {
+type TableCtxType<T=unknown> = {
   striped?: boolean;
   hoverable?: boolean;
   noborder?: boolean;
   color?: TableColrType;
+  items: Writable<T[] | undefined>;
+  searchTerm: Writable<string>;
+  filter: Writable<((item: T, searchTerm: string) => boolean) | undefined>;
+  sorter: Writable<{sort: (a: T, b: T) => number, direction: -1 | 1, id: string} | undefined>;
 };
 
 type TableColrType = 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'indigo' | 'pink' | 'custom';
diff --git a/src/routes/components/table/+page.svelte b/src/routes/components/table/+page.svelte
index 54638ef2..e8e6649e 100644
--- a/src/routes/components/table/+page.svelte
+++ b/src/routes/components/table/+page.svelte
@@ -9,8 +9,6 @@
     { id: 4, maker: 'Saab', type: 'IJK', make: 2020 }
   ];
 
-  let filteredItems = $derived(items.filter((item) => item.maker.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1));
-
   import { slide } from 'svelte/transition';
 
   const items2 = [
@@ -267,7 +265,7 @@
 
 <H2>Search input</H2>
 <CodeWrapper>
-  <TableSearch placeholder="Search by maker name" hoverable={true} bind:inputValue={searchTerm}>
+  <Table {items} searchPlaceholder="Search by maker name" hoverable={true} filter={(item, searchTerm) => item.maker.toLowerCase().includes(searchTerm.toLowerCase())} bind:searchTerm>
     <TableHead>
       <TableHeadCell>ID</TableHeadCell>
       <TableHeadCell>Maker</TableHeadCell>
@@ -275,16 +273,16 @@
       <TableHeadCell>Make</TableHeadCell>
     </TableHead>
     <TableBody class="divide-y">
-      {#each filteredItems as item}
+      {#snippet row({ item }: { item: typeof items[number] })}
         <TableBodyRow>
           <TableBodyCell>{item.id}</TableBodyCell>
           <TableBodyCell>{item.maker}</TableBodyCell>
           <TableBodyCell>{item.type}</TableBodyCell>
           <TableBodyCell>{item.make}</TableBodyCell>
         </TableBodyRow>
-      {/each}
+      {/snippet}
     </TableBody>
-  </TableSearch>
+  </Table>
   {#snippet codeblock()}
     <HighlightCompo code={modules['./md/search-input.md'] as string} />
   {/snippet}
diff --git a/src/routes/components/table/md/search-input.md b/src/routes/components/table/md/search-input.md
index 26139663..a8735264 100644
--- a/src/routes/components/table/md/search-input.md
+++ b/src/routes/components/table/md/search-input.md
@@ -1,4 +1,4 @@
-<TableSearch placeholder="Search by maker name" hoverable={true} bind:inputValue={searchTerm}>
+<Table {items} searchPlaceholder="Search by maker name" hoverable={true} filter={(item, searchTerm) => item.maker.toLowerCase().includes(searchTerm.toLowerCase())} bind:searchTerm>
   <TableHead>
     <TableHeadCell>ID</TableHeadCell>
     <TableHeadCell>Maker</TableHeadCell>
@@ -6,13 +6,13 @@
     <TableHeadCell>Make</TableHeadCell>
   </TableHead>
   <TableBody class="divide-y">
-    {#each filteredItems as item}
+    {#snippet row({ item }: { item: typeof items[number] })}
       <TableBodyRow>
         <TableBodyCell>{item.id}</TableBodyCell>
         <TableBodyCell>{item.maker}</TableBodyCell>
         <TableBodyCell>{item.type}</TableBodyCell>
         <TableBodyCell>{item.make}</TableBodyCell>
       </TableBodyRow>
-    {/each}
+    {/snippet}
   </TableBody>
-</TableSearch>
\ No newline at end of file
+</Table>
\ No newline at end of file

From 19ac0ee1258debeed17bf7a89e374e53cb08e2b7 Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:28:58 +0000
Subject: [PATCH 2/5] Add table sorting example

---
 src/routes/components/table/+page.svelte      | 29 +++++++++++++++++++
 .../components/table/md/sort-columns.md       | 22 ++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/routes/components/table/md/sort-columns.md

diff --git a/src/routes/components/table/+page.svelte b/src/routes/components/table/+page.svelte
index e8e6649e..4bdcb4e0 100644
--- a/src/routes/components/table/+page.svelte
+++ b/src/routes/components/table/+page.svelte
@@ -288,6 +288,35 @@
   {/snippet}
 </CodeWrapper>
 
+<H2>Sorting by column</H2>
+<CodeWrapper>
+  <Table {items}>
+    <TableHead>
+      <TableHeadCell sort={(a, b) => a.id - b.id}>ID</TableHeadCell>
+      <TableHeadCell sort={(a, b) => a.maker.localeCompare(b.maker)} defaultSort>Maker</TableHeadCell>
+      <TableHeadCell sort={(a, b) => a.type.localeCompare(b.type)}>Type</TableHeadCell>
+      <TableHeadCell sort={(a, b) => a.make - b.make} defaultDirection="desc">Make</TableHeadCell>
+      <TableHeadCell><span class="sr-only">Edit</span></TableHeadCell>
+    </TableHead>
+    <TableBody>
+      {#snippet row({ item }: { item: typeof items[number] })}
+        <TableBodyRow>
+          <TableBodyCell>{item.id}</TableBodyCell>
+          <TableBodyCell>{item.maker}</TableBodyCell>
+          <TableBodyCell>{item.type}</TableBodyCell>
+          <TableBodyCell>{item.make}</TableBodyCell>
+          <TableBodyCell>
+            <a href="/components/table" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+          </TableBodyCell>
+        </TableBodyRow>
+      {/snippet}
+    </TableBody>
+  </Table>
+  {#snippet codeblock()}
+    <HighlightCompo code={modules['./md/sort-columns.md'] as string} />
+  {/snippet}
+</CodeWrapper>
+
 <H2>Table head</H2>
 <CodeWrapper>
   <Table>
diff --git a/src/routes/components/table/md/sort-columns.md b/src/routes/components/table/md/sort-columns.md
new file mode 100644
index 00000000..eb3278e6
--- /dev/null
+++ b/src/routes/components/table/md/sort-columns.md
@@ -0,0 +1,22 @@
+<Table {items}>
+	<TableHead>
+		<TableHeadCell sort={(a, b) => a.id - b.id}>ID</TableHeadCell>
+		<TableHeadCell sort={(a, b) => a.maker.localeCompare(b.maker)} defaultSort>Maker</TableHeadCell>
+		<TableHeadCell sort={(a, b) => a.type.localeCompare(b.type)}>Type</TableHeadCell>
+		<TableHeadCell sort={(a, b) => a.make - b.make} defaultDirection="desc">Make</TableHeadCell>
+		<TableHeadCell><span class="sr-only">Edit</span></TableHeadCell>
+	</TableHead>
+	<TableBody>
+		{#snippet row({ item }: { item: typeof items[number] })}
+			<TableBodyRow>
+				<TableBodyCell>{item.id}</TableBodyCell>
+				<TableBodyCell>{item.maker}</TableBodyCell>
+				<TableBodyCell>{item.type}</TableBodyCell>
+				<TableBodyCell>{item.make}</TableBodyCell>
+				<TableBodyCell>
+					<a href="/components/table" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Edit</a>
+				</TableBodyCell>
+			</TableBodyRow>
+		{/snippet}
+	</TableBody>
+</Table>
\ No newline at end of file

From b44844fa1c5efc13cc1c8d7fdf3c4ebba9df5608 Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:30:02 +0000
Subject: [PATCH 3/5] Update exports

---
 src/lib/table/Table.svelte         | 11 +++++++++++
 src/lib/table/TableBody.svelte     |  1 +
 src/lib/table/TableHeadCell.svelte |  6 ++++++
 src/lib/table/TableSearch.svelte   |  5 ++++-
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/lib/table/Table.svelte b/src/lib/table/Table.svelte
index 13db7964..1f70add8 100644
--- a/src/lib/table/Table.svelte
+++ b/src/lib/table/Table.svelte
@@ -98,6 +98,8 @@
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
 @prop children
+@prop header
+@prop footer
 @prop divClass = 'relative overflow-x-auto'
 @prop striped
 @prop hoverable
@@ -105,5 +107,14 @@
 @prop shadow
 @prop color = 'default'
 @prop customeColor
+@prop innerDivClass = 'p-4'
+@prop inputClass
+@prop searchClass = 'relative mt-1'
+@prop searchPlaceholder
+@prop svgDivClass
+@prop svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400'
+@prop items
+@prop searchTerm = $bindable('')
+@prop filter
 @prop ...restProps
 -->
diff --git a/src/lib/table/TableBody.svelte b/src/lib/table/TableBody.svelte
index 8cfc4065..617c68c4 100644
--- a/src/lib/table/TableBody.svelte
+++ b/src/lib/table/TableBody.svelte
@@ -33,5 +33,6 @@
 ## Props
 @prop children
 @prop class: className
+@prop row
 @prop ...restProps
 -->
diff --git a/src/lib/table/TableHeadCell.svelte b/src/lib/table/TableHeadCell.svelte
index a683bae3..9aad476d 100644
--- a/src/lib/table/TableHeadCell.svelte
+++ b/src/lib/table/TableHeadCell.svelte
@@ -54,6 +54,12 @@
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
 @prop children
+@prop padding = 'px-6 py-3'
 @prop class: className
+@prop btnClass
+@prop sort
+@prop defaultDirection = 'asc'
+@prop sortDirection = $bindable()
+@prop defaultSort
 @prop ...restProps
 -->
diff --git a/src/lib/table/TableSearch.svelte b/src/lib/table/TableSearch.svelte
index fae5e5e8..f1b24504 100644
--- a/src/lib/table/TableSearch.svelte
+++ b/src/lib/table/TableSearch.svelte
@@ -108,7 +108,8 @@
 @prop header
 @prop footer
 @prop divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg'
-@prop inputValue = $bindable()
+@prop inputValue = $bindable('')
+@prop placeholder
 @prop striped
 @prop hoverable
 @prop customColor = ''
@@ -120,5 +121,7 @@
 @prop svgClass = 'w-5 h-5 text-gray-500 dark:text-gray-400'
 @prop tableClass = 'w-full text-left text-sm'
 @prop class: className
+@prop items
+@prop filter
 @prop ...restProps
 -->

From 8ac2da24b92c2be08bfd9b5b2ea6f17ba295d33c Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:58:05 +0000
Subject: [PATCH 4/5] Clean up unused imports

---
 src/lib/table/Table.svelte     | 2 +-
 src/lib/table/TableBody.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/table/Table.svelte b/src/lib/table/Table.svelte
index 1f70add8..d58b7860 100644
--- a/src/lib/table/Table.svelte
+++ b/src/lib/table/Table.svelte
@@ -4,7 +4,7 @@
   import { twMerge, twJoin } from 'tailwind-merge';
   import { setContext } from 'svelte';
   import { type TableColrType, type TableCtxType } from '.';
-  import { writable, type Writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
 
   interface Props extends HTMLTableAttributes {
     children: Snippet;
diff --git a/src/lib/table/TableBody.svelte b/src/lib/table/TableBody.svelte
index 617c68c4..452d9295 100644
--- a/src/lib/table/TableBody.svelte
+++ b/src/lib/table/TableBody.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" generics="T">
-  import { getContext, type Snippet } from 'svelte';
+  import { getContext, onMount, type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import type { TableCtxType } from '.';
 

From 274ccb4849873b69f79407f48fba0e87959a27cb Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:59:11 +0000
Subject: [PATCH 5/5] Update table sorting

Now sorts based on the previous sort state. Disadvantage: needs to sort all items, even if a filter is used to exclude some.
---
 src/lib/table/TableBody.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/table/TableBody.svelte b/src/lib/table/TableBody.svelte
index 452d9295..d22b4d53 100644
--- a/src/lib/table/TableBody.svelte
+++ b/src/lib/table/TableBody.svelte
@@ -12,16 +12,19 @@
 
   let tableCtx: TableCtxType<T> = getContext('tableCtx');
   let { items, searchTerm, filter, sorter } = tableCtx;
-  let filtered = $derived($filter ? $items?.filter(item => $filter(item, $searchTerm)) : $items);
-  let sorted = $derived($sorter ? filtered?.toSorted((a, b) => $sorter.direction * $sorter.sort(a, b)) : filtered);
+  let sorted = $state($items);
+  onMount(() => sorter.subscribe(sorter => {
+    sorted = sorter ? sorted?.toSorted((a, b) => sorter.direction * sorter.sort(a, b)) : $items;
+  }));
+  let filtered = $derived($filter ? sorted?.filter(item => $filter(item, $searchTerm)) : sorted);
 </script>
 
 <tbody class={className} {...restProps}>
   {#if children}
     {@render children()}
   {/if}
-  {#if row && sorted}
-    {#each sorted as item, index}
+  {#if row && filtered}
+    {#each filtered as item, index}
       {@render row({item, index})}
     {/each}
   {/if}