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.Column dataIndex="id" title="Id" />
-        <Table.Column dataIndex={["vendor", "name"]} title="Vendor" />
-        <Table.Column dataIndex="name" title="Name" />
-        <Table.Column dataIndex="material" title="Material" />
-        <Table.Column dataIndex="price" title="Price" />
+      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+        <Table.Column
+          dataIndex="id"
+          title="Id"
+          sorter={true}
+          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;
 }