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/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",
-      pageSize: 20,
+      mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
     },
     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"