Fix sorting

Author: hhvrc

src/lib/components/Table/ColumnUtils.ts

@@ -16,9 +16,9 @@ import { escapeHtml } from '$lib/utils/encoding';
 
 function CreateSortHeader<TData>(name: string): StringOrTemplateHeader<TData, unknown> {
   return ({ column }) =>
-    renderComponent(DataTableSortButton, {
+    renderComponent(DataTableSortButton<TData>, {
       name,
-      onclick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+      column,
     });
 }
 
@@ -61,14 +61,16 @@ export function CreateSortableColumnDef<
   renderer: (content: TData[TKey]) => TableCell,
   sortFunct?: 'auto' | ((a: TData[TKey], b: TData[TKey]) => number) | BuiltInSortingFn
 ): ColumnDef<TData> {
-  let sortingFn: SortingFnOption<TData> | undefined = undefined;
+  let sortingFn: SortingFnOption<TData>;
   if (sortFunct) {
     if (typeof sortFunct === 'string') {
       sortingFn = sortFunct;
     } else {
       sortingFn = (row_a, row_b) =>
         sortFunct(row_a.getValue(accessorKey), row_b.getValue(accessorKey));
     }
+  } else {
+    sortingFn = 'auto';
   }
 
   return {

src/lib/components/Table/SortButton.svelte

@@ -1,15 +1,24 @@
-<script lang="ts">
+<script lang="ts" generics="TData">
   import { Button } from '$lib/components/ui/button';
+  import type { Column } from '@tanstack/table-core';
   import type { ComponentProps } from 'svelte';
 
-  import ArrowUpDown from '@lucide/svelte/icons/arrow-up-down';
+  import { ArrowDown, ArrowUp, ArrowUpDown } from '@lucide/svelte';
 
-  type Props = ComponentProps<typeof Button> & { name: string };
+  type Props = ComponentProps<typeof Button> & { name: string; column: Column<TData, unknown> };
 
-  let { variant = 'ghost', name, ...restProps }: Props = $props();
+  let { variant = 'ghost', name, column, ...restProps }: Props = $props();
+
+  let direction = $derived(column.getIsSorted());
 </script>
 
-<Button {variant} {...restProps}>
+<Button {variant} {...restProps} onclick={() => column.toggleSorting(direction === 'asc')}>
   {name}
-  <ArrowUpDown class="ml-2 size-4" />
+  {#if direction === 'asc'}
+    <ArrowUp class="ml-2 size-4" />
+  {:else if direction === 'desc'}
+    <ArrowDown class="ml-2 size-4" />
+  {:else}
+    <ArrowUpDown class="ml-2 size-4" />
+  {/if}
 </Button>