From 151c3c7f4f07ef3b65659c075db90cebc08c6ac4 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 29 Oct 2023 20:37:58 +0100
Subject: [PATCH] Client Table update

* Columns are now specified using the ant design columns property instead of being Table.Column components. This should make this WoW a bit more sense, we're not pretending to be components anymore. column.tsx now only returns objects, not nodes.
* Added filament/spool collapsing as a useTable queryOptions so that the output object is directly the one we want, which will make the types play better together.
* Added a more unified record action system. This enables us to add actions to column rightclick/long press, which is better UX for mobile devices.
* Actions column is now hidden on smaller screens thanks to the above bullet.
---
 client/src/components/column.tsx    | 136 ++++++++--
 client/src/pages/filaments/list.tsx | 382 ++++++++++++++------------
 client/src/pages/spools/list.tsx    | 399 +++++++++++++++-------------
 client/src/pages/vendors/list.tsx   |  97 ++++---
 client/src/utils/filtering.ts       |   7 +
 5 files changed, 589 insertions(+), 432 deletions(-)

diff --git a/client/src/components/column.tsx b/client/src/components/column.tsx
index d1ece4d..8f9569c 100644
--- a/client/src/components/column.tsx
+++ b/client/src/components/column.tsx
@@ -1,6 +1,5 @@
-import { Col, Row, Spin, Table } from "antd";
-import { ColumnProps as AntdColumnProps } from "antd/es/table";
-import { ColumnFilterItem } from "antd/es/table/interface";
+import { Button, Col, Dropdown, Row, Space, Spin } from "antd";
+import { ColumnFilterItem, ColumnType } from "antd/es/table/interface";
 import { getFiltersForField, typeFilters } from "../utils/filtering";
 import { TableState } from "../utils/saveload";
 import { getSortOrderForField, typeSorters } from "../utils/sorting";
@@ -13,6 +12,7 @@ import SpoolIcon from "../icon_spool.svg?react";
 import { useTranslate } from "@refinedev/core";
 import { enrichText } from "../utils/parsing";
 import { UseQueryResult } from "@tanstack/react-query";
+import { Link, useNavigate } from "react-router-dom";
 
 dayjs.extend(utc);
 
@@ -27,7 +27,18 @@ const FilterDropdownLoading = () => {
   );
 };
 
-interface BaseColumnProps<Obj> {
+interface Entity {
+  id: number;
+}
+
+export interface Action {
+  name: string;
+  icon: React.ReactNode;
+  link?: string;
+  onClick?: () => void;
+}
+
+interface BaseColumnProps<Obj extends Entity> {
   id: keyof Obj & string;
   dataId?: keyof Obj & string;
   i18ncat?: string;
@@ -35,6 +46,7 @@ interface BaseColumnProps<Obj> {
   dataSource: Obj[];
   tableState: TableState;
   width?: number;
+  actions?: (record: Obj) => Action[];
 }
 
 interface FilteredColumnProps {
@@ -55,22 +67,28 @@ interface CustomColumnProps<Obj> {
   ) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
 }
 
-function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>) {
+function Column<Obj extends Entity>(
+  props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>
+): ColumnType<Obj> | undefined {
   const t = useTranslate();
+  const navigate = useNavigate();
+
+  // Hide if not in showColumns
   if (props.tableState.showColumns && !props.tableState.showColumns.includes(props.id)) {
-    return <></>;
+    return undefined;
   }
-  const typedSorters = typeSorters<Obj>(props.tableState.sorters);
-  const columnProps: AntdColumnProps<Obj> = {
+
+  const columnProps: ColumnType<Obj> = {
     dataIndex: props.id,
     title: t(props.i18nkey ?? `${props.i18ncat}.fields.${props.id}`),
     sorter: true,
-    sortOrder: getSortOrderForField(typedSorters, props.dataId ?? props.id),
+    sortOrder: getSortOrderForField(typeSorters<Obj>(props.tableState.sorters), props.dataId ?? props.id),
     filterMultiple: props.allowMultipleFilters ?? true,
+    width: props.width ?? undefined,
+    onCell: props.onCell ?? undefined,
   };
-  if (props.width) {
-    columnProps.width = props.width;
-  }
+
+  // Filter
   if (props.filters && props.filteredValue) {
     columnProps.filters = props.filters;
     columnProps.filteredValue = props.filteredValue;
@@ -86,20 +104,50 @@ function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomC
       columnProps.key = props.dataId;
     }
   }
-  if (props.render) {
-    columnProps.render = props.render;
-  }
-  if (props.onCell) {
-    columnProps.onCell = props.onCell;
-  }
-  return <Table.Column<Obj> {...columnProps} />;
+
+  // Render
+  const render = props.render ?? ((value) => <>{value}</>);
+  columnProps.render = (value, record, index) => {
+    if (!props.actions) {
+      return render(value, record, index);
+    }
+
+    const actions = props.actions(record);
+
+    return (
+      <Dropdown
+        menu={{
+          items: actions.map((action) => ({
+            key: action.name,
+            label: action.name,
+            icon: action.icon,
+          })),
+          onClick: (item) => {
+            const action = actions.find((action) => action.name === item.key);
+            if (action) {
+              if (action.link) {
+                navigate(action.link);
+              } else if (action.onClick) {
+                action.onClick();
+              }
+            }
+          },
+        }}
+        trigger={["contextMenu"]}
+      >
+        <div>{render(value, record, index)}</div>
+      </Dropdown>
+    );
+  };
+
+  return columnProps;
 }
 
-export function SortedColumn<Obj>(props: BaseColumnProps<Obj>) {
+export function SortedColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
   return Column(props);
 }
 
-export function RichColumn<Obj>(props: BaseColumnProps<Obj>) {
+export function RichColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
   return Column({
     ...props,
     render: (value: string | undefined) => {
@@ -108,12 +156,12 @@ export function RichColumn<Obj>(props: BaseColumnProps<Obj>) {
   });
 }
 
-interface FilteredQueryColumnProps<Obj> extends BaseColumnProps<Obj> {
+interface FilteredQueryColumnProps<Obj extends Entity> extends BaseColumnProps<Obj> {
   filterValueQuery: UseQueryResult<string[] | ColumnFilterItem[]>;
   allowMultipleFilters?: boolean;
 }
 
-export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
+export function FilteredQueryColumn<Obj extends Entity>(props: FilteredQueryColumnProps<Obj>) {
   const query = props.filterValueQuery;
 
   let filters: ColumnFilterItem[] = [];
@@ -143,13 +191,13 @@ export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
   return Column({ ...props, filters, filteredValue, onFilterDropdownOpen, loadingFilters: query.isLoading });
 }
 
-interface NumberColumnProps<Obj> extends BaseColumnProps<Obj> {
+interface NumberColumnProps<Obj extends Entity> extends BaseColumnProps<Obj> {
   unit: string;
   decimals?: number;
   defaultText?: string;
 }
 
-export function NumberColumn<Obj>(props: NumberColumnProps<Obj>) {
+export function NumberColumn<Obj extends Entity>(props: NumberColumnProps<Obj>) {
   return Column({
     ...props,
     render: (value) => {
@@ -170,7 +218,7 @@ export function NumberColumn<Obj>(props: NumberColumnProps<Obj>) {
   });
 }
 
-export function DateColumn<Obj>(props: BaseColumnProps<Obj>) {
+export function DateColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
   return Column({
     ...props,
     render: (value) => {
@@ -186,11 +234,43 @@ export function DateColumn<Obj>(props: BaseColumnProps<Obj>) {
   });
 }
 
-interface SpoolIconColumnProps<Obj> extends FilteredQueryColumnProps<Obj> {
+export function ActionsColumn<Obj extends Entity>(actionsFn: (record: Obj) => Action[]): ColumnType<Obj> | undefined {
+  const t = useTranslate();
+
+  return {
+    title: t("table.actions"),
+    responsive: ["lg"],
+    render: (_, record) => {
+      const buttons = actionsFn(record).map((action) => {
+        if (action.link) {
+          return (
+            <Link key={action.name} to={action.link}>
+              <Button icon={action.icon} title={action.name} size="small" />
+            </Link>
+          );
+        } else if (action.onClick) {
+          return (
+            <Button
+              key={action.name}
+              icon={action.icon}
+              title={action.name}
+              size="small"
+              onClick={() => action.onClick!()}
+            />
+          );
+        }
+      });
+
+      return <Space>{buttons}</Space>;
+    },
+  };
+}
+
+interface SpoolIconColumnProps<Obj extends Entity> extends FilteredQueryColumnProps<Obj> {
   color: (record: Obj) => string | undefined;
 }
 
-export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) {
+export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {
   const query = props.filterValueQuery;
 
   let filters: ColumnFilterItem[] = [];
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index 9034331..32c3ec2 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { IResourceComponentsProps, BaseRecord, useTranslate, useInvalidate } from "@refinedev/core";
-import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
-import { Table, Space, Button, Dropdown } from "antd";
+import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
+import { useTable, List } from "@refinedev/antd";
+import { Table, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { IFilament } from "./model";
-import { EditOutlined, FilterOutlined } from "@ant-design/icons";
+import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
 import {
   DateColumn,
@@ -14,6 +14,7 @@ import {
   RichColumn,
   SortedColumn,
   SpoolIconColumn,
+  ActionsColumn,
 } from "../../components/column";
 import {
   useSpoolmanArticleNumbers,
@@ -22,6 +23,7 @@ import {
   useSpoolmanVendors,
 } from "../../components/otherModels";
 import { useLiveify } from "../../components/liveify";
+import { removeUndefined } from "../../utils/filtering";
 
 dayjs.extend(utc);
 
@@ -46,6 +48,26 @@ function translateColumnI18nKey(columnName: string): string {
 
 const namespace = "filamentList-v2";
 
+const allColumns: (keyof IFilamentCollapsed & string)[] = [
+  "id",
+  "vendor.name",
+  "name",
+  "material",
+  "price",
+  "density",
+  "diameter",
+  "weight",
+  "spool_weight",
+  "article_number",
+  "settings_extruder_temp",
+  "settings_bed_temp",
+  "registered",
+  "comment",
+];
+const defaultColumns = allColumns.filter(
+  (column_id) => ["registered", "density", "diameter", "spool_weight"].indexOf(column_id) === -1
+);
+
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
   const invalidate = useInvalidate();
@@ -57,54 +79,43 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.
   // This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead
   // calls it with a list of filters, sorters, etc. This means the server-side has to support this, which is quite hard.
-  const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IFilament>({
-    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,
-    },
-    liveMode: "manual",
-    onLiveEvent(event) {
-      if (event.type === "created" || event.type === "deleted") {
-        // updated is handled by the liveify
-        invalidate({
-          resource: "filament",
-          invalidates: ["list"],
-        });
-      }
-    },
-  });
+  const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } =
+    useTable<IFilamentCollapsed>({
+      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,
+      },
+      liveMode: "manual",
+      onLiveEvent(event) {
+        if (event.type === "created" || event.type === "deleted") {
+          // updated is handled by the liveify
+          invalidate({
+            resource: "filament",
+            invalidates: ["list"],
+          });
+        }
+      },
+      queryOptions: {
+        select(data) {
+          return {
+            total: data.total,
+            data: data.data.map(collapseFilament),
+          };
+        },
+      },
+    });
 
   // Create state for the columns to show
-  const allColumns: (keyof IFilamentCollapsed & string)[] = [
-    "id",
-    "vendor.name",
-    "name",
-    "material",
-    "price",
-    "density",
-    "diameter",
-    "weight",
-    "spool_weight",
-    "article_number",
-    "settings_extruder_temp",
-    "settings_bed_temp",
-    "registered",
-    "comment",
-  ];
-  const defaultColumns = allColumns.filter(
-    (column_id) => ["registered", "density", "diameter", "spool_weight"].indexOf(column_id) === -1
-  );
-
   const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
 
   // Store state in local storage
@@ -116,9 +127,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   };
   useStoreInitialState(namespace, tableState);
 
-  // Collapse the dataSource to a mutable list and add a filament_name field
+  // Collapse the dataSource to a mutable list
   const queryDataSource: IFilamentCollapsed[] = React.useMemo(
-    () => (tableProps.dataSource ?? []).map(collapseFilament),
+    () => (tableProps.dataSource || []).map((record) => ({ ...record })),
     [tableProps.dataSource]
   );
   const dataSource = useLiveify("filament", queryDataSource, collapseFilament);
@@ -127,6 +138,13 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
     tableProps.pagination.showSizeChanger = true;
   }
 
+  const { editUrl, showUrl, cloneUrl } = useNavigation();
+  const actions = (record: IFilamentCollapsed) => [
+    { name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("filament", record.id) },
+    { name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("filament", record.id) },
+    { name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("filament", record.id) },
+  ];
+
   return (
     <List
       headerButtons={({ defaultButtons }) => (
@@ -168,130 +186,142 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         </>
       )}
     >
-      <Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id">
-        {SortedColumn({
-          id: "id",
-          i18ncat: "filament",
-          dataSource,
-          tableState,
-          width: 70,
-        })}
-        {FilteredQueryColumn({
-          id: "vendor.name",
-          i18nkey: "filament.fields.vendor_name",
-          dataSource,
-          tableState,
-          filterValueQuery: useSpoolmanVendors(),
-        })}
-        {SpoolIconColumn({
-          id: "name",
-          i18ncat: "filament",
-          color: (record: IFilamentCollapsed) => record.color_hex,
-          dataSource,
-          tableState,
-          filterValueQuery: useSpoolmanFilamentNames(),
-        })}
-        {FilteredQueryColumn({
-          id: "material",
-          i18ncat: "filament",
-          dataSource,
-          tableState,
-          filterValueQuery: useSpoolmanMaterials(),
-          width: 110,
-        })}
-        {SortedColumn({
-          id: "price",
-          i18ncat: "filament",
-          dataSource,
-          tableState,
-          width: 80,
-        })}
-        {NumberColumn({
-          id: "density",
-          i18ncat: "filament",
-          unit: "g/cm³",
-          decimals: 2,
-          dataSource,
-          tableState,
-          width: 100,
-        })}
-        {NumberColumn({
-          id: "diameter",
-          i18ncat: "filament",
-          unit: "mm",
-          decimals: 2,
-          dataSource,
-          tableState,
-          width: 100,
-        })}
-        {NumberColumn({
-          id: "weight",
-          i18ncat: "filament",
-          unit: "g",
-          decimals: 1,
-          dataSource,
-          tableState,
-          width: 100,
-        })}
-        {NumberColumn({
-          id: "spool_weight",
-          i18ncat: "filament",
-          unit: "g",
-          decimals: 1,
-          dataSource,
-          tableState,
-          width: 100,
-        })}
-        {FilteredQueryColumn({
-          id: "article_number",
-          i18ncat: "filament",
-          dataSource,
-          tableState,
-          filterValueQuery: useSpoolmanArticleNumbers(),
-          width: 130,
-        })}
-        {NumberColumn({
-          id: "settings_extruder_temp",
-          i18ncat: "filament",
-          unit: "°C",
-          decimals: 0,
-          dataSource,
-          tableState,
-          width: 100,
-        })}
-        {NumberColumn({
-          id: "settings_bed_temp",
-          i18ncat: "filament",
-          unit: "°C",
-          decimals: 0,
-          dataSource,
-          tableState,
-          width: 100,
-        })}
-        {DateColumn({
-          id: "registered",
-          i18ncat: "filament",
-          dataSource,
-          tableState,
-        })}
-        {RichColumn({
-          id: "comment",
-          i18ncat: "filament",
-          dataSource,
-          tableState,
-          width: 150,
-        })}
-        <Table.Column
-          title={t("table.actions")}
-          render={(_, record: BaseRecord) => (
-            <Space>
-              <EditButton hideText title={t("buttons.edit")} size="small" recordItemId={record.id} />
-              <ShowButton hideText title={t("buttons.show")} size="small" recordItemId={record.id} />
-              <CloneButton hideText title={t("buttons.clone")} size="small" recordItemId={record.id} />
-            </Space>
-          )}
-        />
-      </Table>
+      <Table<IFilamentCollapsed>
+        {...tableProps}
+        sticky
+        scroll={{ x: "max-content" }}
+        dataSource={dataSource}
+        rowKey="id"
+        columns={removeUndefined([
+          SortedColumn({
+            id: "id",
+            i18ncat: "filament",
+            actions,
+            dataSource,
+            tableState,
+            width: 70,
+          }),
+          FilteredQueryColumn({
+            id: "vendor.name",
+            i18nkey: "filament.fields.vendor_name",
+            actions,
+            dataSource,
+            tableState,
+            filterValueQuery: useSpoolmanVendors(),
+          }),
+          SpoolIconColumn({
+            id: "name",
+            i18ncat: "filament",
+            color: (record: IFilamentCollapsed) => record.color_hex,
+            actions,
+            dataSource,
+            tableState,
+            filterValueQuery: useSpoolmanFilamentNames(),
+          }),
+          FilteredQueryColumn({
+            id: "material",
+            i18ncat: "filament",
+            actions,
+            dataSource,
+            tableState,
+            filterValueQuery: useSpoolmanMaterials(),
+            width: 110,
+          }),
+          SortedColumn({
+            id: "price",
+            i18ncat: "filament",
+            actions,
+            dataSource,
+            tableState,
+            width: 80,
+          }),
+          NumberColumn({
+            id: "density",
+            i18ncat: "filament",
+            unit: "g/cm³",
+            decimals: 2,
+            actions,
+            dataSource,
+            tableState,
+            width: 100,
+          }),
+          NumberColumn({
+            id: "diameter",
+            i18ncat: "filament",
+            unit: "mm",
+            decimals: 2,
+            actions,
+            dataSource,
+            tableState,
+            width: 100,
+          }),
+          NumberColumn({
+            id: "weight",
+            i18ncat: "filament",
+            unit: "g",
+            decimals: 1,
+            actions,
+            dataSource,
+            tableState,
+            width: 100,
+          }),
+          NumberColumn({
+            id: "spool_weight",
+            i18ncat: "filament",
+            unit: "g",
+            decimals: 1,
+            actions,
+            dataSource,
+            tableState,
+            width: 100,
+          }),
+          FilteredQueryColumn({
+            id: "article_number",
+            i18ncat: "filament",
+            actions,
+            dataSource,
+            tableState,
+            filterValueQuery: useSpoolmanArticleNumbers(),
+            width: 130,
+          }),
+          NumberColumn({
+            id: "settings_extruder_temp",
+            i18ncat: "filament",
+            unit: "°C",
+            decimals: 0,
+            actions,
+            dataSource,
+            tableState,
+            width: 100,
+          }),
+          NumberColumn({
+            id: "settings_bed_temp",
+            i18ncat: "filament",
+            unit: "°C",
+            decimals: 0,
+            actions,
+            dataSource,
+            tableState,
+            width: 100,
+          }),
+          DateColumn({
+            id: "registered",
+            i18ncat: "filament",
+            actions,
+            dataSource,
+            tableState,
+          }),
+          RichColumn({
+            id: "comment",
+            i18ncat: "filament",
+            actions,
+            dataSource,
+            tableState,
+            width: 150,
+          }),
+          ActionsColumn(actions),
+        ])}
+      />
     </List>
   );
 };
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index 7a8714e..801b608 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -1,12 +1,19 @@
 import React from "react";
-import { IResourceComponentsProps, useInvalidate, useTranslate } from "@refinedev/core";
-import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
-import { Table, Space, Button, Dropdown, Modal } from "antd";
+import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
+import { useTable, List } from "@refinedev/antd";
+import { Table, Button, Dropdown, Modal } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { ISpool } from "./model";
 import { TableState, useInitialTableState, useSavedState, useStoreInitialState } from "../../utils/saveload";
-import { EditOutlined, FilterOutlined, InboxOutlined, ToTopOutlined } from "@ant-design/icons";
+import {
+  EditOutlined,
+  EyeOutlined,
+  FilterOutlined,
+  InboxOutlined,
+  PlusSquareOutlined,
+  ToTopOutlined,
+} from "@ant-design/icons";
 import {
   DateColumn,
   FilteredQueryColumn,
@@ -14,6 +21,8 @@ import {
   RichColumn,
   SortedColumn,
   SpoolIconColumn,
+  Action,
+  ActionsColumn,
 } from "../../components/column";
 import { setSpoolArchived } from "./functions";
 import SelectAndPrint from "../../components/selectAndPrintDialog";
@@ -24,6 +33,7 @@ import {
   useSpoolmanMaterials,
 } from "../../components/otherModels";
 import { useLiveify } from "../../components/liveify";
+import { removeUndefined } from "../../utils/filtering";
 
 dayjs.extend(utc);
 
@@ -59,6 +69,25 @@ function translateColumnI18nKey(columnName: string): string {
 
 const namespace = "spoolList-v2";
 
+const allColumns: (keyof ISpoolCollapsed & string)[] = [
+  "id",
+  "combined_name",
+  "filament.material",
+  "used_weight",
+  "remaining_weight",
+  "used_length",
+  "remaining_length",
+  "location",
+  "lot_nr",
+  "first_used",
+  "last_used",
+  "registered",
+  "comment",
+];
+const defaultColumns = allColumns.filter(
+  (column_id) => ["registered", "used_length", "remaining_length", "lot_nr"].indexOf(column_id) === -1
+);
+
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
   const invalidate = useInvalidate();
@@ -73,57 +102,48 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.
   // This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead
   // calls it with a list of filters, sorters, etc. This means the server-side has to support this, which is quite hard.
-  const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<ISpool>({
-    meta: {
-      queryParams: {
-        ["allow_archived"]: showArchived,
+  const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } =
+    useTable<ISpoolCollapsed>({
+      meta: {
+        queryParams: {
+          ["allow_archived"]: showArchived,
+        },
       },
-    },
-    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,
-    },
-    liveMode: "manual",
-    onLiveEvent(event) {
-      if (event.type === "created" || event.type === "deleted") {
-        // updated is handled by the liveify
-        invalidate({
-          resource: "spool",
-          invalidates: ["list"],
-        });
-      }
-    },
-  });
+      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,
+      },
+      liveMode: "manual",
+      onLiveEvent(event) {
+        if (event.type === "created" || event.type === "deleted") {
+          // updated is handled by the liveify
+          invalidate({
+            resource: "spool",
+            invalidates: ["list"],
+          });
+        }
+      },
+      queryOptions: {
+        select(data) {
+          return {
+            total: data.total,
+            data: data.data.map(collapseSpool),
+          };
+        },
+      },
+    });
 
   // Create state for the columns to show
-  const allColumns: (keyof ISpoolCollapsed & string)[] = [
-    "id",
-    "combined_name",
-    "filament.material",
-    "used_weight",
-    "remaining_weight",
-    "used_length",
-    "remaining_length",
-    "location",
-    "lot_nr",
-    "first_used",
-    "last_used",
-    "registered",
-    "comment",
-  ];
-  const defaultColumns = allColumns.filter(
-    (column_id) => ["registered", "used_length", "remaining_length", "lot_nr"].indexOf(column_id) === -1
-  );
   const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
 
   // Store state in local storage
@@ -135,9 +155,9 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   };
   useStoreInitialState(namespace, tableState);
 
-  // Collapse the dataSource to a mutable list and add a filament_name field
-  const queryDataSource = React.useMemo(
-    () => (tableProps.dataSource ?? []).map(collapseSpool),
+  // Collapse the dataSource to a mutable list
+  const queryDataSource: ISpoolCollapsed[] = React.useMemo(
+    () => (tableProps.dataSource || []).map((record) => ({ ...record })),
     [tableProps.dataSource]
   );
   const dataSource = useLiveify("spool", queryDataSource, collapseSpool);
@@ -174,6 +194,25 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
     tableProps.pagination.showSizeChanger = true;
   }
 
+  const { editUrl, showUrl, cloneUrl } = useNavigation();
+  const actions = (record: ISpoolCollapsed) => {
+    const actions: Action[] = [
+      { name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("spool", record.id) },
+      { name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("spool", record.id) },
+      { name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("spool", record.id) },
+    ];
+    if (record.archived) {
+      actions.push({
+        name: t("buttons.unArchive"),
+        icon: <ToTopOutlined />,
+        onClick: () => archiveSpool(record, false),
+      });
+    } else {
+      actions.push({ name: t("buttons.archive"), icon: <InboxOutlined />, onClick: () => archiveSpoolPopup(record) });
+    }
+    return actions;
+  };
+
   return (
     <List
       headerButtons={({ defaultButtons }) => (
@@ -244,136 +283,126 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             return {};
           }
         }}
-      >
-        {SortedColumn({
-          id: "id",
-          i18ncat: "spool",
-          dataSource,
-          tableState,
-          width: 70,
-        })}
-        {SpoolIconColumn({
-          id: "combined_name",
-          i18nkey: "spool.fields.filament_name",
-          color: (record: ISpoolCollapsed) => record.filament.color_hex,
-          dataSource,
-          tableState,
-          dataId: "filament.id",
-          filterValueQuery: useSpoolmanFilamentFilter(),
-        })}
-        {FilteredQueryColumn({
-          id: "filament.material",
-          i18nkey: "spool.fields.material",
-          dataSource,
-          tableState,
-          filterValueQuery: useSpoolmanMaterials(),
-          width: 120,
-        })}
-        {NumberColumn({
-          id: "used_weight",
-          i18ncat: "spool",
-          unit: "g",
-          decimals: 1,
-          dataSource,
-          tableState,
-          width: 110,
-        })}
-        {NumberColumn({
-          id: "remaining_weight",
-          i18ncat: "spool",
-          unit: "g",
-          decimals: 1,
-          defaultText: t("unknown"),
-          dataSource,
-          tableState,
-          width: 110,
-        })}
-        {NumberColumn({
-          id: "used_length",
-          i18ncat: "spool",
-          unit: "mm",
-          decimals: 1,
-          dataSource,
-          tableState,
-          width: 120,
-        })}
-        {NumberColumn({
-          id: "remaining_length",
-          i18ncat: "spool",
-          unit: "mm",
-          decimals: 1,
-          defaultText: t("unknown"),
-          dataSource,
-          tableState,
-          width: 120,
-        })}
-        {FilteredQueryColumn({
-          id: "location",
-          i18ncat: "spool",
-          dataSource,
-          tableState,
-          filterValueQuery: useSpoolmanLocations(),
-          width: 120,
-        })}
-        {FilteredQueryColumn({
-          id: "lot_nr",
-          i18ncat: "spool",
-          dataSource,
-          tableState,
-          filterValueQuery: useSpoolmanLotNumbers(),
-          width: 120,
-        })}
-        {DateColumn({
-          id: "first_used",
-          i18ncat: "spool",
-          dataSource,
-          tableState,
-        })}
-        {DateColumn({
-          id: "last_used",
-          i18ncat: "spool",
-          dataSource,
-          tableState,
-        })}
-        {DateColumn({
-          id: "registered",
-          i18ncat: "spool",
-          dataSource,
-          tableState,
-        })}
-        {RichColumn({
-          id: "comment",
-          i18ncat: "spool",
-          dataSource,
-          tableState,
-          width: 150,
-        })}
-        <Table.Column
-          title={t("table.actions")}
-          render={(_, record: ISpoolCollapsed) => (
-            <Space>
-              <EditButton hideText title={t("buttons.edit")} size="small" recordItemId={record.id} />
-              <ShowButton hideText title={t("buttons.show")} size="small" recordItemId={record.id} />
-              <CloneButton hideText title={t("buttons.clone")} size="small" recordItemId={record.id} />
-              {record.archived ? (
-                <Button
-                  icon={<ToTopOutlined />}
-                  title={t("buttons.unArchive")}
-                  size="small"
-                  onClick={() => archiveSpool(record, false)}
-                />
-              ) : (
-                <Button
-                  icon={<InboxOutlined />}
-                  title={t("buttons.archive")}
-                  size="small"
-                  onClick={() => archiveSpoolPopup(record)}
-                />
-              )}
-            </Space>
-          )}
-        />
-      </Table>
+        columns={removeUndefined([
+          SortedColumn({
+            id: "id",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+            width: 70,
+          }),
+          SpoolIconColumn({
+            id: "combined_name",
+            i18nkey: "spool.fields.filament_name",
+            color: (record: ISpoolCollapsed) => record.filament.color_hex,
+            actions,
+            dataSource,
+            tableState,
+            dataId: "filament.id",
+            filterValueQuery: useSpoolmanFilamentFilter(),
+          }),
+          FilteredQueryColumn({
+            id: "filament.material",
+            i18nkey: "spool.fields.material",
+            actions,
+            dataSource,
+            tableState,
+            filterValueQuery: useSpoolmanMaterials(),
+            width: 120,
+          }),
+          NumberColumn({
+            id: "used_weight",
+            i18ncat: "spool",
+            unit: "g",
+            decimals: 1,
+            actions,
+            dataSource,
+            tableState,
+            width: 110,
+          }),
+          NumberColumn({
+            id: "remaining_weight",
+            i18ncat: "spool",
+            unit: "g",
+            decimals: 1,
+            defaultText: t("unknown"),
+            actions,
+            dataSource,
+            tableState,
+            width: 110,
+          }),
+          NumberColumn({
+            id: "used_length",
+            i18ncat: "spool",
+            unit: "mm",
+            decimals: 1,
+            actions,
+            dataSource,
+            tableState,
+            width: 120,
+          }),
+          NumberColumn({
+            id: "remaining_length",
+            i18ncat: "spool",
+            unit: "mm",
+            decimals: 1,
+            defaultText: t("unknown"),
+            actions,
+            dataSource,
+            tableState,
+            width: 120,
+          }),
+          FilteredQueryColumn({
+            id: "location",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+            filterValueQuery: useSpoolmanLocations(),
+            width: 120,
+          }),
+          FilteredQueryColumn({
+            id: "lot_nr",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+            filterValueQuery: useSpoolmanLotNumbers(),
+            width: 120,
+          }),
+          DateColumn({
+            id: "first_used",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+          }),
+          DateColumn({
+            id: "last_used",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+          }),
+          DateColumn({
+            id: "registered",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+          }),
+          RichColumn({
+            id: "comment",
+            i18ncat: "spool",
+            actions,
+            dataSource,
+            tableState,
+            width: 150,
+          }),
+          ActionsColumn(actions),
+        ])}
+      />
     </List>
   );
 };
diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
index 2187217..135b9fe 100644
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -1,19 +1,22 @@
 import React from "react";
-import { IResourceComponentsProps, BaseRecord, useTranslate, useInvalidate } from "@refinedev/core";
-import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
-import { Table, Space, Button, Dropdown } from "antd";
+import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
+import { useTable, List } from "@refinedev/antd";
+import { Table, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { IVendor } from "./model";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
-import { EditOutlined, FilterOutlined } from "@ant-design/icons";
-import { DateColumn, RichColumn, SortedColumn } from "../../components/column";
+import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import { DateColumn, RichColumn, SortedColumn, ActionsColumn } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
+import { removeUndefined } from "../../utils/filtering";
 
 dayjs.extend(utc);
 
 const namespace = "vendorList-v2";
 
+const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "comment"];
+
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
   const invalidate = useInvalidate();
@@ -50,7 +53,6 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   });
 
   // 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);
 
   // Store state in local storage
@@ -73,6 +75,13 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
     tableProps.pagination.showSizeChanger = true;
   }
 
+  const { editUrl, showUrl, cloneUrl } = useNavigation();
+  const actions = (record: IVendor) => [
+    { name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("vendor", record.id) },
+    { name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("vendor", record.id) },
+    { name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("vendor", record.id) },
+  ];
+
   return (
     <List
       headerButtons={({ defaultButtons }) => (
@@ -114,43 +123,45 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
         </>
       )}
     >
-      <Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id">
-        {SortedColumn({
-          id: "id",
-          i18ncat: "vendor",
-          dataSource,
-          tableState,
-          width: 70,
-        })}
-        {SortedColumn({
-          id: "name",
-          i18ncat: "vendor",
-          dataSource,
-          tableState,
-        })}
-        {DateColumn({
-          id: "registered",
-          i18ncat: "vendor",
-          dataSource,
-          tableState,
-        })}
-        {RichColumn({
-          id: "comment",
-          i18ncat: "vendor",
-          dataSource,
-          tableState,
-        })}
-        <Table.Column
-          title={t("table.actions")}
-          render={(_, record: BaseRecord) => (
-            <Space>
-              <EditButton hideText title={t("buttons.edit")} size="small" recordItemId={record.id} />
-              <ShowButton hideText title={t("buttons.show")} size="small" recordItemId={record.id} />
-              <CloneButton hideText title={t("buttons.clone")} size="small" recordItemId={record.id} />
-            </Space>
-          )}
-        />
-      </Table>
+      <Table
+        {...tableProps}
+        sticky
+        scroll={{ x: "max-content" }}
+        dataSource={dataSource}
+        rowKey="id"
+        columns={removeUndefined([
+          SortedColumn({
+            id: "id",
+            i18ncat: "vendor",
+            actions,
+            dataSource,
+            tableState,
+            width: 70,
+          }),
+          SortedColumn({
+            id: "name",
+            i18ncat: "vendor",
+            actions,
+            dataSource,
+            tableState,
+          }),
+          DateColumn({
+            id: "registered",
+            i18ncat: "vendor",
+            actions,
+            dataSource,
+            tableState,
+          }),
+          RichColumn({
+            id: "comment",
+            i18ncat: "vendor",
+            actions,
+            dataSource,
+            tableState,
+          }),
+          ActionsColumn<IVendor>(actions),
+        ])}
+      />
     </List>
   );
 };
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index c2ea6bf..1ba6528 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -28,3 +28,10 @@ export function getFiltersForField<Obj, Field extends keyof Obj>(
   });
   return filterValues;
 }
+
+/**
+ * Function that returns an array with all undefined values removed.
+ */
+export function removeUndefined<T>(array: (T | undefined)[]): T[] {
+  return array.filter((value) => value !== undefined) as T[];
+}