Client: Make table use the refine sorters/filters

That way, Refine is in charge of the sorters/filters state, instead of Refine and AntD each having their own state for it.

client/src/pages/filaments/list.tsx

@@ -108,49 +108,43 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="id"
           title="Id"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
+          sortOrder={getSortOrderForField(sorters, "id")}
         />
         <Table.Column
           dataIndex="vendor_name"
           title="Vendor"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(
-            sorters_initial,
-            "vendor_name"
-          )}
+          sortOrder={getSortOrderForField(sorters, "vendor_name")}
           filters={filterPopulator(dataSource, "vendor_name")}
-          defaultFilteredValue={getFiltersForField(
-            filters_initial,
-            "vendor_name"
-          )}
+          filteredValue={getFiltersForField(filters, "vendor_name")}
         />
         <Table.Column
           dataIndex="name"
           title="Name"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "name")}
+          sortOrder={getSortOrderForField(sorters, "name")}
           filters={filterPopulator(dataSource, "name")}
-          defaultFilteredValue={getFiltersForField(filters_initial, "name")}
+          filteredValue={getFiltersForField(filters, "name")}
         />
         <Table.Column
           dataIndex="material"
           title="Material"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "material")}
+          sortOrder={getSortOrderForField(sorters, "material")}
           filters={filterPopulator(dataSource, "material")}
-          defaultFilteredValue={getFiltersForField(filters_initial, "material")}
+          filteredValue={getFiltersForField(filters, "material")}
         />
         <Table.Column
           dataIndex="price"
           title="Price"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "price")}
+          sortOrder={getSortOrderForField(sorters, "price")}
         />
         <Table.Column
           dataIndex="density"
           title="Density"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "density")}
+          sortOrder={getSortOrderForField(sorters, "density")}
           render={(value) => (
             <NumberFieldUnit
               value={value}
@@ -165,7 +159,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="diameter"
           title="Diameter"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "diameter")}
+          sortOrder={getSortOrderForField(sorters, "diameter")}
           render={(value) => (
             <NumberFieldUnit
               value={value}
@@ -180,7 +174,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="weight"
           title="Weight"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "weight")}
+          sortOrder={getSortOrderForField(sorters, "weight")}
           render={(value) => {
             if (value === null || value === undefined) {
               return <></>;
@@ -200,10 +194,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="spool_weight"
           title="Spool Weight"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(
-            sorters_initial,
-            "spool_weight"
-          )}
+          sortOrder={getSortOrderForField(sorters, "spool_weight")}
           render={(value) => {
             if (value === null || value === undefined) {
               return <></>;
@@ -223,21 +214,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="article_number"
           title="Article Number"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(
-            sorters_initial,
-            "article_number"
-          )}
+          sortOrder={getSortOrderForField(sorters, "article_number")}
           filters={filterPopulator(dataSource, "article_number")}
-          defaultFilteredValue={getFiltersForField(
-            filters_initial,
-            "article_number"
-          )}
+          filteredValue={getFiltersForField(filters, "article_number")}
         />
         <Table.Column
           dataIndex={["registered"]}
           title="Registered"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "registered")}
+          sortOrder={getSortOrderForField(sorters, "registered")}
           render={(value) => (
             <DateField
               value={dayjs.utc(value).local()}
@@ -250,7 +235,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["comment"]}
           title="Comment"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
+          sortOrder={getSortOrderForField(sorters, "comment")}
         />
         <Table.Column
           title="Actions"

client/src/pages/spools/list.tsx

@@ -81,25 +81,19 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="id"
           title="Id"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
+          sortOrder={getSortOrderForField(sorters, "id")}
         />
         <Table.Column
           dataIndex="filament_name"
           title="Filament"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(
-            sorters_initial,
-            "filament_name"
-          )}
+          sortOrder={getSortOrderForField(sorters, "filament_name")}
         />
         <Table.Column
           dataIndex="used_weight"
           title="Used Weight"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(
-            sorters_initial,
-            "used_weight"
-          )}
+          sortOrder={getSortOrderForField(sorters, "used_weight")}
           render={(value) => {
             return (
               <NumberFieldUnit
@@ -116,10 +110,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="remaining_weight"
           title="Estimated Remaining Weight"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(
-            sorters_initial,
-            "remaining_weight"
-          )}
+          sortOrder={getSortOrderForField(sorters, "remaining_weight")}
           render={(value) => {
             if (value === null || value === undefined) {
               return <TextField value="Unknown" />;
@@ -139,19 +130,19 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="location"
           title="Location"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "location")}
+          sortOrder={getSortOrderForField(sorters, "location")}
         />
         <Table.Column
           dataIndex="lot_nr"
           title="Lot Nr"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "lot_nr")}
+          sortOrder={getSortOrderForField(sorters, "lot_nr")}
         />
         <Table.Column
           dataIndex={["first_used"]}
           title="First Used"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "first_used")}
+          sortOrder={getSortOrderForField(sorters, "first_used")}
           render={(value) => (
             <DateField
               hidden={!value}
@@ -165,7 +156,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["last_used"]}
           title="Last Used"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "last_used")}
+          sortOrder={getSortOrderForField(sorters, "last_used")}
           render={(value) => (
             <DateField
               hidden={!value}
@@ -179,7 +170,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["comment"]}
           title="Comment"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
+          sortOrder={getSortOrderForField(sorters, "comment")}
         />
         <Table.Column
           title="Actions"

client/src/pages/vendors/list.tsx

@@ -70,19 +70,19 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="id"
           title="Id"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
+          sortOrder={getSortOrderForField(sorters, "id")}
         />
         <Table.Column
           dataIndex="name"
           title="Name"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "name")}
+          sortOrder={getSortOrderForField(sorters, "name")}
         />
         <Table.Column
           dataIndex={["registered"]}
           title="Registered"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "registered")}
+          sortOrder={getSortOrderForField(sorters, "registered")}
           render={(value) => (
             <DateField
               value={dayjs.utc(value).local()}
@@ -95,7 +95,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           dataIndex={["comment"]}
           title="Comment"
           sorter={true}
-          defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
+          sortOrder={getSortOrderForField(sorters, "comment")}
         />
         <Table.Column
           title="Actions"