Client: Now uses server side sorting

Still some stuff left to do #98

client/src/pages/vendors/list.tsx

@@ -4,8 +4,6 @@ import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/
 import { Table, Space, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import { genericSorter, typeSorters } from "../../utils/sorting";
-import { genericFilterer, typeFilters } from "../../utils/filtering";
 import { IVendor } from "./model";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
 import { EditOutlined, FilterOutlined } from "@ant-design/icons";
@@ -13,39 +11,36 @@ import { DateColumn, RichColumn, SortedColumn } from "../../components/column";
 
 dayjs.extend(utc);
 
+const namespace = "vendorList-v2";
+
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
 
   // Load initial state
-  const initialState = useInitialTableState("vendorList");
+  const initialState = useInitialTableState(namespace);
 
   // Fetch data from the API
-  const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent, setPageSize } =
-    useTable<IVendor>({
-      syncWithLocation: false,
-      pagination: {
-        mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
-        current: initialState.pagination.current,
-        pageSize: initialState.pagination.pageSize,
-      },
-      sorters: {
-        mode: "off", // Disable server-side sorting
-        initial: initialState.sorters,
-      },
-      filters: {
-        mode: "off", // Disable server-side filtering
-        initial: initialState.filters,
-      },
-    });
+  const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IVendor>({
+    syncWithLocation: false,
+    pagination: {
+      mode: "server",
+      current: initialState.pagination.current,
+      pageSize: initialState.pagination.pageSize,
+    },
+    sorters: {
+      mode: "server",
+      initial: initialState.sorters,
+    },
+    filters: {
+      mode: "server",
+      initial: initialState.filters,
+    },
+  });
 
   // Create state for the columns to show
   const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "comment"];
   const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? allColumns);
 
-  // Type the sorters and filters
-  const typedSorters = typeSorters<IVendor>(sorters);
-  const typedFilters = typeFilters<IVendor>(filters);
-
   // Store state in local storage
   const tableState: TableState = {
     sorters,
@@ -53,7 +48,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
     pagination: { current, pageSize },
     showColumns,
   };
-  useStoreInitialState("vendorList", tableState);
+  useStoreInitialState(namespace, tableState);
 
   // Collapse the dataSource to a mutable list
   const dataSource: IVendor[] = React.useMemo(
@@ -61,12 +56,9 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
     [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]);
+  if (tableProps.pagination) {
+    tableProps.pagination.showSizeChanger = true;
+  }
 
   return (
     <List
@@ -109,20 +101,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
         </>
       )}
     >
-      <Table
-        {...tableProps}
-        dataSource={filteredDataSource}
-        pagination={{
-          showSizeChanger: true,
-          current: current,
-          pageSize: pageSize,
-          onChange: (page, pageSize) => {
-            setCurrent(page);
-            setPageSize(pageSize);
-          },
-        }}
-        rowKey="id"
-      >
+      <Table {...tableProps} dataSource={dataSource} rowKey="id">
         {SortedColumn({
           id: "id",
           i18ncat: "vendor",