Client: Filament table is now sortable

Can only sort by 1 column for now

client/src/pages/filaments/list.tsx

@@ -12,29 +12,56 @@ import { Table, Space } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { IFilament } from "./model";
+import { genericSorter } from "../../utils/sorting";
 
 dayjs.extend(utc);
 
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
-  const { tableProps } = useTable({
+  const { tableProps, sorters } = useTable<IFilament>({
     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 {...tableProps} dataSource={dataSource} rowKey="id">
-        <Table.Column dataIndex="id" title="Id" />
+        <Table.Column
-        <Table.Column dataIndex={["vendor", "name"]} title="Vendor" />
+          dataIndex="id"
-        <Table.Column dataIndex="name" title="Name" />
+          title="Id"
-        <Table.Column dataIndex="material" title="Material" />
+          sorter={true}
-        <Table.Column dataIndex="price" title="Price" />
+          defaultSortOrder="ascend"
+        />
+        <Table.Column
+          dataIndex={["vendor", "name"]}
+          title="Vendor"
+          sorter={true}
+        />
+        <Table.Column dataIndex="name" title="Name" sorter={true} />
+        <Table.Column dataIndex="material" title="Material" sorter={true} />
+        <Table.Column dataIndex="price" title="Price" sorter={true} />
         <Table.Column
           dataIndex="density"
           title="Density"
+          sorter={true}
           render={(value) => (
             <NumberFieldUnit
               value={value}
@@ -48,6 +75,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         <Table.Column
           dataIndex="diameter"
           title="Diameter"
+          sorter={true}
           render={(value) => (
             <NumberFieldUnit
               value={value}
@@ -61,6 +89,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         <Table.Column
           dataIndex="weight"
           title="Weight"
+          sorter={true}
           render={(value) => {
             if (value === null || value === undefined) {
               return <></>;
@@ -79,6 +108,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         <Table.Column
           dataIndex="spool_weight"
           title="Spool Weight"
+          sorter={true}
           render={(value) => {
             if (value === null || value === undefined) {
               return <></>;
@@ -94,10 +124,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             );
           }}
         />
-        <Table.Column dataIndex="article_number" title="Article Number" />
+        <Table.Column
+          dataIndex="article_number"
+          title="Article Number"
+          sorter={true}
+        />
         <Table.Column
           dataIndex={["registered"]}
           title="Registered"
+          sorter={true}
           render={(value) => (
             <DateField
               value={dayjs.utc(value).local()}
@@ -106,7 +141,7 @@ export const FilamentList: 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/filaments/model.tsx

@@ -1,7 +1,7 @@
 import { IVendor } from "../vendors/model";
 
 export interface IFilament {
-  id: string;
+  id: number;
   registered: string;
   name?: string;
   vendor?: IVendor;
@@ -16,4 +16,5 @@ export interface IFilament {
   settings_extruder_temp?: number;
   settings_bed_temp?: number;
   color_hex?: string;
+  [key: string]: unknown;
 }

client/src/utils/sorting.ts

@@ -0,0 +1,61 @@
+import { CrudSort } from "@refinedev/core";
+
+interface IObj {
+    [key: string]: unknown;
+}
+
+/**
+ * Returns a sorting function that can be used to sort an array of objects based on the provided sorters.
+ * @param sorters An array of `CrudSort` objects that define the sorting criteria.
+ * @returns A sorting function that can be used to sort an array of objects based on the provided sorters.
+ */
+export function genericSorter(sorters: CrudSort[]) {
+    return (a: IObj, b: IObj) => {
+        for (const sorter of sorters) {
+            const aValue = a[sorter.field];
+            const bValue = b[sorter.field];
+            if (aValue === bValue) {
+                continue;
+            }
+            // Send empty fields to the bottom
+            if (aValue === undefined || aValue === null) {
+                return 1;
+            }
+            if (bValue === undefined || bValue === null) {
+                return -1;
+            }
+            // Perform sorting based on type of the fields
+            if (typeof aValue === "string" && typeof bValue === "string") {
+                // Try to sort them as dates if possible
+                const aDate = new Date(aValue);
+                const bDate = new Date(bValue);
+                if (!isNaN(aDate.getTime()) && !isNaN(bDate.getTime())) {
+                    return sorter.order === "asc"
+                        ? aDate.getTime() - bDate.getTime()
+                        : bDate.getTime() - aDate.getTime();
+                }
+
+                return sorter.order === "asc"
+                    ? aValue.localeCompare(bValue)
+                    : bValue.localeCompare(aValue);
+            }
+            if (typeof aValue === "number" && typeof bValue === "number") {
+                return sorter.order === "asc" ? aValue - bValue : bValue - aValue;
+            }
+            if (typeof aValue === "boolean" && typeof bValue === "boolean") {
+                return sorter.order === "asc" ? +aValue - +bValue : +bValue - +aValue;
+            }
+            if (aValue instanceof Date && bValue instanceof Date) {
+                return sorter.order === "asc"
+                    ? aValue.getTime() - bValue.getTime()
+                    : bValue.getTime() - aValue.getTime();
+            }
+            if (typeof aValue === "object" && typeof bValue === "object") {
+                return sorter.order === "asc"
+                    ? JSON.stringify(aValue).localeCompare(JSON.stringify(bValue))
+                    : JSON.stringify(bValue).localeCompare(JSON.stringify(aValue));
+            }
+        }
+        return 0;
+    };
+}