Client: Vendor table is now sortable

client/src/pages/vendors/list.tsx

@@ -11,26 +11,48 @@ import {
 import { Table, Space } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { genericSorter } from "../../utils/sorting";
 
 dayjs.extend(utc);
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
-  const { tableProps } = useTable({
+  const { tableProps, sorters } = useTable({
     syncWithLocation: true,
     pagination: {
       mode: "client",
       pageSize: 20,
     },
+    sorters: {
+      mode: "off", // Disable server-side sorting
+      initial: [
+        {
+          field: "id",
+          order: "asc",
+        },
+      ],
+    },
   });
 
+  // Copy dataSource to avoid mutating the original
+  const dataSource = [...(tableProps.dataSource || [])];
+
+  // Sort dataSource by the sorters
+  dataSource.sort(genericSorter(sorters));
+
   return (
     <List>
-      <Table {...tableProps} rowKey="id">
-        <Table.Column dataIndex="id" title="Id" />
-        <Table.Column dataIndex="name" title="Name" />
+      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+        <Table.Column
+          dataIndex="id"
+          title="Id"
+          sorter={true}
+          defaultSortOrder="ascend"
+        />
+        <Table.Column dataIndex="name" title="Name" sorter={true} />
         <Table.Column
           dataIndex={["registered"]}
           title="Registered"
+          sorter={true}
           render={(value) => (
             <DateField
               value={dayjs.utc(value).local()}
@@ -39,7 +61,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
             />
           )}
         />
-        <Table.Column dataIndex={["comment"]} title="Comment" />
+        <Table.Column dataIndex={["comment"]} title="Comment" sorter={true} />
         <Table.Column
           title="Actions"
           dataIndex="actions"

client/src/pages/vendors/model.tsx

@@ -1,5 +1,5 @@
 export interface IVendor {
-  id: string;
+  id: number;
   registered: string;
   name: string;
   comment?: string;