feat(Table): add custom sort function to columns (#1075)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/4.data/1.table.md

@@ -28,6 +28,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `sortable` - Whether the column is sortable. Defaults to `false`.
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
 - `class` - The class to apply to the column cells.
+- `sortFn` - A function that is used to sort the column, comparable to what would be passed to the Javascript `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
 
 ::component-example{class="grid"}
 ---

src/runtime/components/data/Table.vue

@@ -108,7 +108,7 @@ export default defineComponent({
       default: () => []
     },
     columns: {
-      type: Array as PropType<{ key: string, sortable?: boolean, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
+      type: Array as PropType<{ key: string, sortable?: boolean, sortFn?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
       default: null
     },
     columnAttribute: {
@@ -156,12 +156,24 @@ export default defineComponent({
   setup (props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined })))
+    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sortFn: defaultSortFn })))
 
     const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
 
     const defaultSort = { column: sort.value.column, direction: null }
 
+    function defaultSortFn (a: any, b: any, direction: 'asc' | 'desc') {
+      if (a === b) {
+        return 0
+      }
+
+      if (direction === 'asc') {
+        return a < b ? -1 : 1
+      } else {
+        return a > b ? -1 : 1
+      }
+    }
+
     const rows = computed(() => {
       if (!sort.value?.column) {
         return props.rows
@@ -173,15 +185,8 @@ export default defineComponent({
         const aValue = get(a, column)
         const bValue = get(b, column)
 
-        if (aValue === bValue) {
+        const sortFn = columns.value.find((col) => col.key === column)?.sortFn ?? defaultSortFn
-          return 0
+        return sortFn(aValue, bValue, direction)
-        }
-
-        if (direction === 'asc') {
-          return aValue < bValue ? -1 : 1
-        } else {
-          return aValue > bValue ? -1 : 1
-        }
       })
     })