Start of serverside client tables

client/src/components/dataProvider.ts

@@ -13,12 +13,36 @@ const dataProvider = (
     Required<DataProvider>,
     "createMany" | "updateMany" | "deleteMany"
 > => ({
-    getList: async ({ resource, meta }) => {
+    getList: async ({ resource, meta, pagination, sorters, filters }) => {
         const url = `${apiUrl}/${resource}`;
 
         const { headers: headersFromMeta, method, queryParams } = meta ?? {};
         const requestMethod = (method as MethodTypes) ?? "get";
 
+        if (pagination && pagination.mode == "server") {
+            const pageSize = pagination.pageSize ?? 10;
+            const offset = ((pagination.current ?? 1) - 1) * pageSize;
+            queryParams["limit"] = pageSize;
+            queryParams["offset"] = offset;
+        }
+
+        if (sorters && sorters.length > 0) {
+            queryParams["sort"] = sorters.map((sort) => {
+                const field = sort.field.replace("_", ".")
+                return `${field}:${sort.order}`;
+            }).join(",")
+        }
+
+        if (filters && filters.length > 0) {
+            filters.forEach(filter => {
+                if (!("field" in filter)) {
+                    throw Error("Filter must be a LogicalFilter.")
+                }
+                const field = filter.field.replace(".", "_")
+                queryParams[field] = filter.value
+            });
+        }
+
         const { data } = await httpClient[requestMethod](
             `${url}`,
             {
@@ -29,7 +53,8 @@ const dataProvider = (
 
         return {
             data,
-            total: data.length,
+            total: 100,
+            //TODO: total: data.length,
         };
     },
 

client/src/pages/spools/list.tsx

@@ -26,7 +26,7 @@ const { confirm } = Modal;
 
 interface ISpoolCollapsed extends ISpool {
   filament_name: string;
-  material?: string;
+  filament_material?: string;
 }
 
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
@@ -49,16 +49,16 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
       },
       syncWithLocation: false,
       pagination: {
-        mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
+        mode: "server",
         current: initialState.pagination.current,
         pageSize: initialState.pagination.pageSize,
       },
       sorters: {
-        mode: "off", // Disable server-side sorting
+        mode: "server",
         initial: initialState.sorters,
       },
       filters: {
-        mode: "off", // Disable server-side filtering
+        mode: "server",
         initial: initialState.filters,
       },
     });
@@ -67,7 +67,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const allColumns: (keyof ISpoolCollapsed & string)[] = [
     "id",
     "filament_name",
-    "material",
+    "filament_material",
     "used_weight",
     "remaining_weight",
     "used_length",
@@ -84,10 +84,6 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   );
   const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
 
-  // Type the sorters and filters
-  const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
-  const typedFilters = typeFilters<ISpoolCollapsed>(filters);
-
   // Store state in local storage
   const tableState: TableState = {
     sorters,
@@ -110,18 +106,14 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
         return {
           ...element,
           filament_name,
-          material: element.filament.material,
+          filament_material: element.filament.material,
         };
       }),
     [tableProps.dataSource]
   );
 
   // Filter and sort the dataSource
-  const filteredDataSource = React.useMemo(() => {
-    const filtered = dataSource.filter(genericFilterer(typedFilters));
-    filtered.sort(genericSorter(typedSorters));
-    return filtered;
-  }, [dataSource, typedFilters, typedSorters]);
+  const filteredDataSource = dataSource;
 
   // Function for opening an ant design modal that asks for confirmation for archiving a spool
   const archiveSpool = async (spool: ISpoolCollapsed, archive: boolean) => {
@@ -205,15 +197,6 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
       <Table
         {...tableProps}
         dataSource={filteredDataSource}
-        pagination={{
-          showSizeChanger: true,
-          current: current,
-          pageSize: pageSize,
-          onChange: (page, pageSize) => {
-            setCurrent(page);
-            setPageSize(pageSize);
-          },
-        }}
         rowKey="id"
         // Make archived rows greyed out
         onRow={(record) => {
@@ -243,7 +226,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           tableState,
         })}
         {FilteredColumn({
-          id: "material",
+          id: "filament_material",
           i18ncat: "spool",
           dataSource,
           tableState,