Client: Spool table is now sortable

client/src/pages/spools/list.tsx

@@ -13,19 +13,36 @@ import { Table, Space } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { genericSorter } from "../../utils/sorting";
 
 dayjs.extend(utc);
 
 export const SpoolList: 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",
+        },
+      ],
+    },
   });
 
-  tableProps.dataSource?.forEach((element) => {
+  // Copy dataSource to avoid mutating the original
+  const dataSource = [...(tableProps.dataSource || [])];
+
+  // Sort dataSource by the sorters
+  dataSource.sort(genericSorter(sorters));
+
+  // Add a filament_name field to the dataSource
+  dataSource.forEach((element) => {
     if ("vendor" in element.filament) {
       element.filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
     } else {
@@ -35,12 +52,22 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <List>
-      <Table {...tableProps} rowKey="id">
-        <Table.Column dataIndex="id" title="Id" />
-        <Table.Column dataIndex="filament_name" title="Filament" />
+      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+        <Table.Column
+          dataIndex="id"
+          title="Id"
+          sorter={true}
+          defaultSortOrder="ascend"
+        />
+        <Table.Column
+          dataIndex="filament_name"
+          title="Filament"
+          sorter={true}
+        />
         <Table.Column
           dataIndex="used_weight"
           title="Used Weight"
+          sorter={true}
           render={(value) => {
             return (
               <NumberFieldUnit
@@ -56,6 +83,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
         <Table.Column
           dataIndex="remaining_weight"
           title="Estimated Remaining Weight"
+          sorter={true}
           render={(value) => {
             if (value === null || value === undefined) {
               return <TextField value="Unknown" />;
@@ -71,11 +99,12 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             );
           }}
         />
-        <Table.Column dataIndex="location" title="Location" />
-        <Table.Column dataIndex="lot_nr" title="Lot Nr" />
+        <Table.Column dataIndex="location" title="Location" sorter={true} />
+        <Table.Column dataIndex="lot_nr" title="Lot Nr" sorter={true} />
         <Table.Column
           dataIndex={["first_used"]}
           title="First Used"
+          sorter={true}
           render={(value) => (
             <DateField
               hidden={!value}
@@ -88,6 +117,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
         <Table.Column
           dataIndex={["last_used"]}
           title="Last Used"
+          sorter={true}
           render={(value) => (
             <DateField
               hidden={!value}
@@ -97,7 +127,7 @@ export const SpoolList: 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/spools/model.tsx

@@ -1,7 +1,7 @@
 import { IFilament } from "../filaments/model";
 
 export interface ISpool {
-  id: string;
+  id: number;
   registered: string;
   first_used?: string;
   last_used?: string;