Client: Perform pagination using AntD instead

If we let Refine do the pagination, it will only return a page's worth of items in the dataSource. This makes the sorting useless if the items span multiple pages.

Now we let Ant Design to the pagination instead.

client/src/pages/filaments/list.tsx

@@ -19,10 +19,9 @@ dayjs.extend(utc);
 
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps, sorters } = useTable<IFilament>({
-    syncWithLocation: true,
+    syncWithLocation: false,
     pagination: {
-      mode: "client",
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
-      pageSize: 20,
     },
     sorters: {
       mode: "off", // Disable server-side sorting
@@ -43,7 +42,12 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <List>
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+      <Table
+        {...tableProps}
+        dataSource={dataSource}
+        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        rowKey="id"
+      >
         <Table.Column
           dataIndex="id"
           title="Id"

client/src/pages/spools/list.tsx

@@ -19,10 +19,9 @@ dayjs.extend(utc);
 
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps, sorters } = useTable({
-    syncWithLocation: true,
+    syncWithLocation: false,
     pagination: {
-      mode: "client",
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
-      pageSize: 20,
     },
     sorters: {
       mode: "off", // Disable server-side sorting
@@ -52,7 +51,12 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <List>
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+      <Table
+        {...tableProps}
+        dataSource={dataSource}
+        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        rowKey="id"
+      >
         <Table.Column
           dataIndex="id"
           title="Id"

client/src/pages/vendors/list.tsx

@@ -17,10 +17,9 @@ dayjs.extend(utc);
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const { tableProps, sorters } = useTable({
-    syncWithLocation: true,
+    syncWithLocation: false,
     pagination: {
-      mode: "client",
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
-      pageSize: 20,
     },
     sorters: {
       mode: "off", // Disable server-side sorting
@@ -41,13 +40,18 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <List>
-      <Table {...tableProps} dataSource={dataSource} rowKey="id">
         <Table.Column
           dataIndex="id"
           title="Id"
           sorter={true}
           defaultSortOrder="ascend"
         />
+      <Table
+        {...tableProps}
+        dataSource={dataSource}
+        pagination={{ showSizeChanger: true, pageSize: 20 }}
+        rowKey="id"
+      >
         <Table.Column dataIndex="name" title="Name" sorter={true} />
         <Table.Column
           dataIndex={["registered"]}