feat: update table component to support configurable sortable columns and enhance sorting logic

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -22,6 +22,57 @@ import { Button } from '@/afcl'
 ```
 
 ```html
+
+### Sorting
+
+Table supports column sorting out of the box.
+
+- Sorting is enabled globally by default. You can disable it entirely with `:sortable="false"`.
+- Per column, sorting can be disabled with `sortable: false` inside the column definition.
+- Clicking a sortable header cycles sorting in a tri‑state order:
+  - none → ascending → descending → none
+  - When it returns to "none", the sorting is cleared.
+
+Basic example (client-side sorting when `data` is an array):
+
+```html
+<Table
+  :columns="[
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Age', fieldName: 'age' },
+    // disable sort for a specific column
+    { label: 'Country', fieldName: 'country', sortable: false },
+  ]"
+  :data="[
+    { name: 'John', age: 30, country: 'US' },
+    { name: 'Rick', age: 25, country: 'CA' },
+    { name: 'Alice', age: 35, country: 'BR' },
+    { name: 'Colin', age: 40, country: 'AU' },
+  ]"
+  :sortable="true"
+  :pageSize="3"
+/>
+```
+
+You can also predefine a default sort:
+
+```html
+<Table
+  :columns="[
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Age', fieldName: 'age' },
+    { label: 'Country', fieldName: 'country' },
+  ]"
+  :data="rows"
+  defaultSortField="age"
+  defaultSortDirection="desc"
+/>
+```
+
+Notes:
+- Client-side sorting supports nested field paths using dot-notation, e.g. `user.name`.
+- When a column is not currently sorted, a subtle double-arrow icon is shown; arrows switch up/down for ascending/descending.
+
 <Button @click="doSmth" 
     :loader="false" class="w-full">
   Your button text
@@ -973,6 +1024,59 @@ async function loadPageData(data) {
 ```
 > 👆 The page size is used as the limit for pagination.
 
+### Server-side sorting
+
+When you provide an async function to `data`, the table will pass the current sort along with pagination params.
+
+Signature of the loader receives:
+
+```ts
+type LoaderArgs = {
+  offset: number;
+  limit: number;
+  sortField?: string; // undefined when unsorted
+  sortDirection?: 'asc' | 'desc'; // only when sortField is set
+}
+```
+
+Example using `fetch`:
+
+```ts
+async function loadPageData({ offset, limit, sortField, sortDirection }) {
+  const url = new URL('/api/products', window.location.origin);
+  url.searchParams.set('offset', String(offset));
+  url.searchParams.set('limit', String(limit));
+  if (sortField) url.searchParams.set('sortField', sortField);
+  if (sortField && sortDirection) url.searchParams.set('sortDirection', sortDirection);
+
+  const res = await fetch(url.toString(), { credentials: 'include' });
+  const json = await res.json();
+  return { data: json.data, total: json.total };
+}
+
+<Table
+  :columns="[
+    { label: 'ID', fieldName: 'id' },
+    { label: 'Title', fieldName: 'title' },
+    { label: 'Price', fieldName: 'price' },
+  ]"
+  :data="loadPageData"
+  :pageSize="10"
+/>
+```
+
+Events you can listen to:
+
+```html
+<Table
+  :columns="columns"
+  :data="loadPageData"
+  @update:sortField="(f) => currentSortField = f"
+  @update:sortDirection="(d) => currentSortDirection = d"
+  @sort-change="({ field, direction }) => console.log('sort changed', field, direction)"
+/>
+```
+
 ### Table loading states
 
 For tables where you load data externally and pass them to `data` prop as array (including case with front-end pagination) you might want to show skeleton loaders in table externaly using `isLoading` props.

adminforth/spa/src/afcl/Table.vue

@@ -172,7 +172,7 @@
     }>(), {
       evenHighlights: true,
       pageSize: 5,
-      sortable: true,
+      sortable: false,
     }
   );
 
@@ -206,7 +206,7 @@
   });
 
   watch([() => currentSortField.value, () => currentSortDirection.value], () => {
-    // reset to first page on sort change
+    if (!props.sortable) return;
     if (currentPage.value !== 1) currentPage.value = 1;
     refresh();
     emit('update:sortField', currentSortField.value);
@@ -296,7 +296,7 @@
   }
 
 function isColumnSortable(col:{fieldName:string; sortable?:boolean}) {
-  return !!props.sortable && col.sortable !== false;
+  return props.sortable === true && col.sortable === true;
 }
 
 function onHeaderClick(col:{fieldName:string; sortable?:boolean}) {
@@ -322,12 +322,17 @@ const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'bas
 
 function sortArrayData(data:any[], sortField?:string, dir:'asc'|'desc'='asc') {
   if (!props.sortable || !sortField) return data;
-  const get = (o:any, p:string) => p.split('.').reduce((a:any,k)=>a?.[k], o);
+  // Helper function to get nested properties by path
+  const getByPath = (o:any, p:string) => p.split('.').reduce((a:any,k)=>a?.[k], o);
   return [...data].sort((a,b) => {
-    let av = get(a, sortField), bv = get(b, sortField);
+    let av = getByPath(a, sortField), bv = getByPath(b, sortField);
+    // Handle null/undefined values
     if (av == null && bv == null) return 0;
+    // Handle null/undefined values
     if (av == null) return 1; if (bv == null) return -1;
+    // Data types
     if (av instanceof Date && bv instanceof Date) return dir === 'asc' ? av.getTime() - bv.getTime() : bv.getTime() - av.getTime();
+    // Strings and numbers
     if (typeof av === 'number' && typeof bv === 'number') return dir === 'asc' ? av - bv : bv - av;
     const cmp = collator.compare(String(av), String(bv));
     return dir === 'asc' ? cmp : -cmp;