Simplify Table ordering by passing instance of tableOrderStore inst…

…ead of `orderBy`, `orderDirection`, and handling `on:headerClick`. Also fixes display of clickable headers when order is not used, and improves sort arrow size.

.changeset/few-brooms-reflect.md

@@ -0,0 +1,29 @@
+---
+"svelte-ux": minor
+---
+
+Breaking change: Simplify Table ordering by passing instance of `tableOrderStore` instead of `orderBy`, `orderDirection`, and handling `on:headerClick`.  Also fixes display of clickable headers when order is not used, and improves sort arrow size.
+
+## Before
+
+```svelte
+<script>
+  const order = tableOrderStore();
+</script>
+
+<Table
+  orderBy={$order.by}
+  orderDirection={$order.direction}
+  on:headerClick={order.onHeaderClick}
+/>
+```
+
+## After
+
+```svelte
+<script>
+  const order = tableOrderStore();
+</script>
+
+<Table {order} />
+```

packages/svelte-ux/src/lib/actions/table.ts

@@ -33,7 +33,8 @@ export const tableCell: Action<HTMLElement, TableCellOptions> = (node, options)
     tracker.reset();
 
     if (node.nodeName === 'TH') {
-      if (column.orderBy !== false) {
+      // Order by
+      if (order && column.orderBy !== false) {
         tracker.addClass('cursor-pointer');
 
         if (order) {

packages/svelte-ux/src/lib/components/Table.svelte

@@ -10,6 +10,7 @@
   import TableOrderIcon from './TableOrderIcon.svelte';
   import { getComponentClasses } from './theme.js';
   import { getSettings } from './settings.js';
+  import type { tableOrderStore } from '$lib/index.js';
 
   const dispatch = createEventDispatcher<{
     headerClick: { column: ColumnDef };
@@ -18,8 +19,8 @@
 
   export let columns: ColumnDef[] = [];
   export let data: any[] | null = [];
-  export let orderBy: string | undefined = undefined;
-  export let orderDirection: 'asc' | 'desc' | undefined = undefined;
+
+  export let order: ReturnType<typeof tableOrderStore> | undefined = undefined;
 
   export let classes: {
     container?: string;
@@ -46,8 +47,6 @@
     td?: string;
   } = {};
 
-  $: order = { by: orderBy, direction: orderDirection };
-
   $: headers = getHeaders(columns).map((headerRow) => {
     return headerRow.map((column) => {
       return {
@@ -106,14 +105,16 @@
             <tr class={cls(settingsClasses.tr, classes.tr)} style={styles.tr}>
               {#each headerRow ?? [] as column}
                 <th
-                  use:tableCell={{ column }}
+                  use:tableCell={{ column, order }}
                   class="column-{column.name}"
-                  class:whitespace-nowrap={orderBy}
+                  class:whitespace-nowrap={order}
                   style={styles.th}
                   on:click={(e) => dispatch('headerClick', { column })}
                 >
                   {getCellHeader(column)}
-                  <TableOrderIcon {order} {column} />
+                  {#if order}
+                    <TableOrderIcon {order} {column} />
+                  {/if}
                 </th>
               {/each}
             </tr>

packages/svelte-ux/src/lib/components/TableOrderIcon.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
   import { mdiArrowUp } from '@mdi/js';
 
-  import type { TableOrderState } from '../stores/tableOrderStore.js';
+  import type tableOrderStore from '../stores/tableOrderStore.js';
   import type { ColumnDef } from '../types/table.js';
   import Icon from '../components/Icon.svelte';
+  import { cls } from '$lib/utils/styles.js';
 
-  export let order: TableOrderState;
+  export let order: ReturnType<typeof tableOrderStore>;
   export let column: ColumnDef;
 </script>
 
-{#if order.by && (order.by === column.value || order.by === column.name || order.by === column.orderBy)}
-  <div
-    class="TableOrderIcon inline-block transition duration-100 transform"
-    class:rotate-180={order.direction === 'desc'}
-  >
-    <Icon data={mdiArrowUp} />
-  </div>
+{#if $order.by && ($order.by === column.value || $order.by === column.name || $order.by === column.orderBy)}
+  <span class="TableOrderIcon">
+    <Icon
+      data={mdiArrowUp}
+      size="1rem"
+      class={cls('transition duration-100 transform', $order.direction === 'desc' && 'rotate-180')}
+    />
+  </span>
 {/if}

packages/svelte-ux/src/routes/docs/components/Table/+page.svelte

@@ -154,9 +154,7 @@
         format: 'integer',
       },
     ]}
-    orderBy={$order.by}
-    orderDirection={$order.direction}
-    on:headerClick={order.onHeaderClick}
+    {order}
   />
 </Preview>
 
@@ -192,12 +190,10 @@
           format: 'integer',
         },
       ]}
-      orderBy={$order.by}
-      orderDirection={$order.direction}
+      {order}
       on:headerClick={(e) => {
         //Switch back to page 1 when sorting
         pagination.setPage(1);
-        order.onHeaderClick(e);
       }}
     />
     <Pagination