Client: Added show/hide columns feature

client/src/components/column.tsx

@@ -0,0 +1,170 @@
+import { Col, Row, Table } from "antd";
+import { ColumnProps as AntdColumnProps } from "antd/es/table";
+import { ColumnFilterItem } from "antd/es/table/interface";
+import {
+  getFiltersForField,
+  typeFilters,
+  useListFiltersForField,
+} from "../utils/filtering";
+import { TableState } from "../utils/saveload";
+import { getSortOrderForField, typeSorters } from "../utils/sorting";
+import { NumberFieldUnit } from "./numberField";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import { DateField, TextField } from "@refinedev/antd";
+import Icon from "@ant-design/icons";
+import { ReactComponent as SpoolIcon } from "../icon_spool.svg";
+
+dayjs.extend(utc);
+
+interface BaseColumnProps<Obj> {
+  id: keyof Obj & string;
+  title: string;
+  dataSource: Obj[];
+  tableState: TableState;
+}
+
+interface FilteredColumnProps {
+  filters?: ColumnFilterItem[];
+  filteredValue?: string[];
+}
+
+interface CustomColumnProps<Obj> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  render?: (value: any, record: Obj, index: number) => React.ReactNode;
+  onCell?: (
+    data: Obj,
+    index?: number
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
+}
+
+function Column<Obj>(
+  props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>
+) {
+  if (
+    props.tableState.showColumns &&
+    !props.tableState.showColumns.includes(props.id)
+  ) {
+    return <></>;
+  }
+  const typedSorters = typeSorters<Obj>(props.tableState.sorters);
+  const columnProps: AntdColumnProps<Obj> = {
+    dataIndex: props.id,
+    title: props.title,
+    sorter: true,
+    sortOrder: getSortOrderForField(typedSorters, props.id),
+  };
+  if (props.filters && props.filteredValue) {
+    columnProps.filters = props.filters;
+    columnProps.filteredValue = props.filteredValue;
+  }
+  if (props.render) {
+    columnProps.render = props.render;
+  }
+  if (props.onCell) {
+    columnProps.onCell = props.onCell;
+  }
+  return <Table.Column<Obj> {...columnProps} />;
+}
+
+export function SortedColumn<Obj>(props: BaseColumnProps<Obj>) {
+  //   return <Table.Column dataIndex={["comment"]} title="Comment" />;
+  return Column(props);
+}
+
+export function FilteredColumn<Obj>(props: BaseColumnProps<Obj>) {
+  const typedFilters = typeFilters<Obj>(props.tableState.filters);
+
+  const filters = useListFiltersForField(props.dataSource, props.id);
+  const filteredValue = getFiltersForField(typedFilters, props.id);
+
+  return Column({ ...props, filters, filteredValue });
+}
+
+interface NumberColumnProps<Obj> extends BaseColumnProps<Obj> {
+  unit: string;
+  decimals?: number;
+}
+
+export function NumberColumn<Obj>(props: NumberColumnProps<Obj>) {
+  return Column({
+    ...props,
+    render: (value) => {
+      if (value === null || value === undefined) {
+        return <TextField value="Unknown" />;
+      }
+      return (
+        <NumberFieldUnit
+          value={value}
+          unit={props.unit}
+          options={{
+            maximumFractionDigits: props.decimals ?? 0,
+          }}
+        />
+      );
+    },
+  });
+}
+
+export function DateColumn<Obj>(props: BaseColumnProps<Obj>) {
+  return Column({
+    ...props,
+    render: (value) => {
+      return (
+        <DateField
+          hidden={!value}
+          value={dayjs.utc(value).local()}
+          title={dayjs.utc(value).local().format()}
+          format="YYYY-MM-DD HH:mm:ss"
+        />
+      );
+    },
+  });
+}
+
+interface SpoolIconColumnProps<Obj> extends BaseColumnProps<Obj> {
+  color: (record: Obj) => string | undefined;
+}
+
+export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) {
+  const typedFilters = typeFilters<Obj>(props.tableState.filters);
+
+  const filters = useListFiltersForField(props.dataSource, props.id);
+  const filteredValue = getFiltersForField(typedFilters, props.id);
+
+  return Column({
+    ...props,
+    filters,
+    filteredValue,
+    onCell: () => {
+      return {
+        style: {
+          paddingLeft: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+      };
+    },
+    render: (value, record: Obj) => {
+      const colorStr = props.color(record);
+      return (
+        <Row wrap={false} justify="space-around" align="middle">
+          {colorStr && (
+            <Col flex="none">
+              <Icon
+                component={SpoolIcon}
+                style={{
+                  color: "#" + colorStr,
+                  fontSize: 42,
+                  marginRight: 0,
+                }}
+              />
+            </Col>
+          )}
+          <Col flex="auto">{value}</Col>
+        </Row>
+      );
+    },
+  });
+}

client/src/pages/filaments/list.tsx

@@ -5,35 +5,32 @@ import {
   List,
   EditButton,
   ShowButton,
-  DateField,
   CloneButton,
 } from "@refinedev/antd";
-import { Table, Space, Button, Row, Col } from "antd";
-import { NumberFieldUnit } from "../../components/numberField";
+import { Table, Space, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { IFilament } from "./model";
+import { genericSorter, typeSorters } from "../../utils/sorting";
+import { genericFilterer, typeFilters } from "../../utils/filtering";
+import { EditOutlined, FilterOutlined } from "@ant-design/icons";
 import {
-  genericSorter,
-  getSortOrderForField,
-  typeSorters,
-} from "../../utils/sorting";
-import {
-  genericFilterer,
-  getFiltersForField,
-  typeFilters,
-  useListFiltersForField,
-} from "../../utils/filtering";
-import Icon, { FilterOutlined } from "@ant-design/icons";
-import {
+  TableState,
   useInitialTableState,
   useStoreInitialState,
 } from "../../utils/saveload";
-import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
+import {
+  DateColumn,
+  FilteredColumn,
+  NumberColumn,
+  SortedColumn,
+  SpoolIconColumn,
+} from "../../components/column";
+import i18n from "../../i18n";
 
 dayjs.extend(utc);
 
-interface IFilamentCollapsed extends IFilament {
+interface IFilamentCollapsed extends Omit<IFilament, "vendor"> {
   vendor_name: string | null;
 }
 
@@ -69,16 +66,37 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
     },
   });
 
+  // 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",
+    "registered",
+    "comment",
+  ];
+  const [showColumns, setShowColumns] = React.useState<string[]>(
+    initialState.showColumns ?? allColumns
+  );
+
   // Type the sorters and filters
   const typedSorters = typeSorters<IFilamentCollapsed>(sorters);
   const typedFilters = typeFilters<IFilamentCollapsed>(filters);
 
   // Store state in local storage
-  useStoreInitialState("filamentList", {
+  const tableState: TableState = {
     sorters,
     filters,
     pagination: { current, pageSize },
-  });
+    showColumns,
+  };
+  useStoreInitialState("filamentList", tableState);
 
   // Collapse the dataSource to a mutable list and add a filament_name field
   const dataSource: IFilamentCollapsed[] = React.useMemo(
@@ -117,6 +135,28 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           >
             Clear Filters
           </Button>
+          <Dropdown
+            trigger={["click"]}
+            menu={{
+              items: allColumns.map((column_id) => ({
+                key: column_id,
+                label: i18n.t(`filaments.fields.${column_id}`),
+              })),
+              selectedKeys: showColumns,
+              selectable: true,
+              multiple: true,
+              onDeselect: (keys) => {
+                setShowColumns(keys.selectedKeys);
+              },
+              onSelect: (keys) => {
+                setShowColumns(keys.selectedKeys);
+              },
+            }}
+          >
+            <Button type="primary" icon={<EditOutlined />}>
+              Hide Columns
+            </Button>
+          </Dropdown>
           {defaultButtons}
         </>
       )}
@@ -135,168 +175,87 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         }}
         rowKey="id"
       >
-        <Table.Column
-          dataIndex="id"
-          title="Id"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "id")}
-        />
-        <Table.Column
-          dataIndex="vendor_name"
-          title="Vendor"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "vendor_name")}
-          filters={useListFiltersForField(dataSource, "vendor_name")}
-          filteredValue={getFiltersForField(typedFilters, "vendor_name")}
-        />
-        <Table.Column
-          dataIndex="name"
-          title="Name"
-          width={150}
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "name")}
-          filters={useListFiltersForField(dataSource, "name")}
-          filteredValue={getFiltersForField(typedFilters, "name")}
-          render={(value, record: IFilament) => {
-            return {
-              props: {
-                style: {
-                  paddingLeft: 0,
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                },
-              },
-              children: (
-                <Row wrap={false} justify="space-around" align="middle">
-                  {record.color_hex && (
-                    <Col flex="none">
-                      <Icon
-                        component={SpoolIcon}
-                        style={{
-                          color: "#" + record.color_hex,
-                          fontSize: 42,
-                          marginRight: 0,
-                        }}
-                      />
-                    </Col>
-                  )}
-                  <Col flex="auto">{value}</Col>
-                </Row>
-              ),
-            };
-          }}
-        />
-        <Table.Column
-          dataIndex="material"
-          title="Material"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "material")}
-          filters={useListFiltersForField(dataSource, "material")}
-          filteredValue={getFiltersForField(typedFilters, "material")}
-        />
-        <Table.Column
-          dataIndex="price"
-          title="Price"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "price")}
-        />
-        <Table.Column
-          dataIndex="density"
-          title="Density"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "density")}
-          render={(value) => (
-            <NumberFieldUnit
-              value={value}
-              unit="g/cm³"
-              options={{
-                maximumFractionDigits: 2,
-              }}
-            />
-          )}
-        />
-        <Table.Column
-          dataIndex="diameter"
-          title="Diameter"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "diameter")}
-          render={(value) => (
-            <NumberFieldUnit
-              value={value}
-              unit="mm"
-              options={{
-                maximumFractionDigits: 2,
-              }}
-            />
-          )}
-        />
-        <Table.Column
-          dataIndex="weight"
-          title="Weight"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "weight")}
-          render={(value) => {
-            if (value === null || value === undefined) {
-              return <></>;
-            }
-            return (
-              <NumberFieldUnit
-                value={value}
-                unit="g"
-                options={{
-                  maximumFractionDigits: 1,
-                }}
-              />
-            );
-          }}
-        />
-        <Table.Column
-          dataIndex="spool_weight"
-          title="Spool Weight"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "spool_weight")}
-          render={(value) => {
-            if (value === null || value === undefined) {
-              return <></>;
-            }
-            return (
-              <NumberFieldUnit
-                value={value}
-                unit="g"
-                options={{
-                  maximumFractionDigits: 1,
-                }}
-              />
-            );
-          }}
-        />
-        <Table.Column
-          dataIndex="article_number"
-          title="Article Number"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "article_number")}
-          filters={useListFiltersForField(dataSource, "article_number")}
-          filteredValue={getFiltersForField(typedFilters, "article_number")}
-        />
-        <Table.Column
-          dataIndex={["registered"]}
-          title="Registered"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "registered")}
-          render={(value) => (
-            <DateField
-              value={dayjs.utc(value).local()}
-              title={dayjs.utc(value).local().format()}
-              format="YYYY-MM-DD HH:mm:ss"
-            />
-          )}
-        />
-        <Table.Column
-          dataIndex={["comment"]}
-          title="Comment"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "comment")}
-        />
+        {SortedColumn({
+          id: "id",
+          title: "Id",
+          dataSource,
+          tableState,
+        })}
+        {FilteredColumn({
+          id: "vendor_name",
+          title: "Vendor",
+          dataSource,
+          tableState,
+        })}
+        {SpoolIconColumn({
+          id: "name",
+          title: "Name",
+          color: (record: IFilamentCollapsed) => record.color_hex,
+          dataSource,
+          tableState,
+        })}
+        {FilteredColumn({
+          id: "material",
+          title: "Material",
+          dataSource,
+          tableState,
+        })}
+        {SortedColumn({
+          id: "price",
+          title: "Price",
+          dataSource,
+          tableState,
+        })}
+        {NumberColumn({
+          id: "density",
+          title: "Density",
+          unit: "g/cm³",
+          decimals: 2,
+          dataSource,
+          tableState,
+        })}
+        {NumberColumn({
+          id: "diameter",
+          title: "Diameter",
+          unit: "mm",
+          decimals: 2,
+          dataSource,
+          tableState,
+        })}
+        {NumberColumn({
+          id: "weight",
+          title: "Weight",
+          unit: "g",
+          decimals: 1,
+          dataSource,
+          tableState,
+        })}
+        {NumberColumn({
+          id: "spool_weight",
+          title: "Spool Weight",
+          unit: "g",
+          decimals: 1,
+          dataSource,
+          tableState,
+        })}
+        {FilteredColumn({
+          id: "article_number",
+          title: "Article Number",
+          dataSource,
+          tableState,
+        })}
+        {DateColumn({
+          id: "registered",
+          title: "Registered",
+          dataSource,
+          tableState,
+        })}
+        {SortedColumn({
+          id: "comment",
+          title: "Comment",
+          dataSource,
+          tableState,
+        })}
         <Table.Column
           title="Actions"
           dataIndex="actions"

client/src/pages/spools/list.tsx

@@ -5,32 +5,28 @@ import {
   List,
   EditButton,
   ShowButton,
-  DateField,
-  TextField,
   CloneButton,
 } from "@refinedev/antd";
-import { Table, Space, Button, Row, Col } from "antd";
-import { NumberFieldUnit } from "../../components/numberField";
+import { Table, Space, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import {
-  genericSorter,
-  getSortOrderForField,
-  typeSorters,
-} from "../../utils/sorting";
-import {
-  genericFilterer,
-  getFiltersForField,
-  typeFilters,
-  useListFiltersForField,
-} from "../../utils/filtering";
+import { genericSorter, typeSorters } from "../../utils/sorting";
+import { genericFilterer, typeFilters } from "../../utils/filtering";
 import { ISpool } from "./model";
 import {
+  TableState,
   useInitialTableState,
   useStoreInitialState,
 } from "../../utils/saveload";
-import Icon, { FilterOutlined } from "@ant-design/icons";
-import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
+import { EditOutlined, FilterOutlined } from "@ant-design/icons";
+import {
+  DateColumn,
+  FilteredColumn,
+  NumberColumn,
+  SortedColumn,
+  SpoolIconColumn,
+} from "../../components/column";
+import i18n from "../../i18n";
 
 dayjs.extend(utc);
 
@@ -70,16 +66,34 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
     },
   });
 
+  // Create state for the columns to show
+  const allColumns: (keyof ISpoolCollapsed & string)[] = [
+    "id",
+    "filament_name",
+    "used_weight",
+    "remaining_weight",
+    "location",
+    "lot_nr",
+    "first_used",
+    "last_used",
+    "comment",
+  ];
+  const [showColumns, setShowColumns] = React.useState<string[]>(
+    initialState.showColumns ?? allColumns
+  );
+
   // Type the sorters and filters
   const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
   const typedFilters = typeFilters<ISpoolCollapsed>(filters);
 
   // Store state in local storage
-  useStoreInitialState("spoolList", {
+  const tableState: TableState = {
     sorters,
     filters,
     pagination: { current, pageSize },
-  });
+    showColumns,
+  };
+  useStoreInitialState("spoolList", tableState);
 
   // Collapse the dataSource to a mutable list and add a filament_name field
   const dataSource: ISpoolCollapsed[] = React.useMemo(
@@ -119,6 +133,28 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           >
             Clear Filters
           </Button>
+          <Dropdown
+            trigger={["click"]}
+            menu={{
+              items: allColumns.map((column) => ({
+                key: column,
+                label: i18n.t(`spools.fields.${column}`),
+              })),
+              selectedKeys: showColumns,
+              selectable: true,
+              multiple: true,
+              onDeselect: (keys) => {
+                setShowColumns(keys.selectedKeys);
+              },
+              onSelect: (keys) => {
+                setShowColumns(keys.selectedKeys);
+              },
+            }}
+          >
+            <Button type="primary" icon={<EditOutlined />}>
+              Hide Columns
+            </Button>
+          </Dropdown>
           {defaultButtons}
         </>
       )}
@@ -137,138 +173,67 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
         }}
         rowKey="id"
       >
-        <Table.Column
-          dataIndex="id"
-          title="Id"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "id")}
-        />
-        <Table.Column
-          dataIndex="filament_name"
-          title="Filament"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "filament_name")}
-          filters={useListFiltersForField(dataSource, "filament_name")}
-          filteredValue={getFiltersForField(typedFilters, "filament_name")}
-          render={(value, record: ISpool) => {
-            return {
-              props: {
-                style: {
-                  paddingLeft: 0,
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                },
-              },
-              children: (
-                <Row wrap={false} justify="space-around" align="middle">
-                  {record.filament.color_hex && (
-                    <Col flex="none">
-                      <Icon
-                        component={SpoolIcon}
-                        style={{
-                          color: "#" + record.filament.color_hex,
-                          fontSize: 42,
-                          marginRight: 0,
-                        }}
-                      />
-                    </Col>
-                  )}
-                  <Col flex="auto">{value}</Col>
-                </Row>
-              ),
-            };
-          }}
-        />
-        <Table.Column
-          dataIndex="used_weight"
-          title="Used Weight"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "used_weight")}
-          render={(value) => {
-            return (
-              <NumberFieldUnit
-                value={value}
-                unit="g"
-                options={{
-                  maximumFractionDigits: 1,
-                }}
-              />
-            );
-          }}
-        />
-        <Table.Column
-          dataIndex="remaining_weight"
-          title="Estimated Remaining Weight"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "remaining_weight")}
-          render={(value) => {
-            if (value === null || value === undefined) {
-              return <TextField value="Unknown" />;
-            }
-            return (
-              <NumberFieldUnit
-                value={Math.max(value, 0)}
-                unit="g"
-                options={{
-                  maximumFractionDigits: 1,
-                }}
-              />
-            );
-          }}
-        />
-        <Table.Column
-          dataIndex="location"
-          title="Location"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "location")}
-          filters={useListFiltersForField(dataSource, "location")}
-          filteredValue={getFiltersForField(typedFilters, "location")}
-        />
-        <Table.Column
-          dataIndex="lot_nr"
-          title="Lot Nr"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "lot_nr")}
-          filters={useListFiltersForField(dataSource, "lot_nr")}
-          filteredValue={getFiltersForField(typedFilters, "lot_nr")}
-        />
-        <Table.Column
-          dataIndex={["first_used"]}
-          title="First Used"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "first_used")}
-          render={(value) => (
-            <DateField
-              hidden={!value}
-              value={dayjs.utc(value).local()}
-              title={dayjs.utc(value).local().format()}
-              format="YYYY-MM-DD HH:mm:ss"
-            />
-          )}
-        />
-        <Table.Column
-          dataIndex={["last_used"]}
-          title="Last Used"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "last_used")}
-          render={(value) => (
-            <DateField
-              hidden={!value}
-              value={dayjs.utc(value).local()}
-              title={dayjs.utc(value).local().format()}
-              format="YYYY-MM-DD HH:mm:ss"
-            />
-          )}
-        />
-        <Table.Column
-          dataIndex={["comment"]}
-          title="Comment"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "comment")}
-        />
+        {SortedColumn({
+          id: "id",
+          title: "Id",
+          dataSource,
+          tableState,
+        })}
+        {SpoolIconColumn({
+          id: "filament_name",
+          title: "Filament",
+          color: (record: ISpoolCollapsed) => record.filament.color_hex,
+          dataSource,
+          tableState,
+        })}
+        {NumberColumn({
+          id: "used_weight",
+          title: "Used Weight",
+          unit: "g",
+          decimals: 1,
+          dataSource,
+          tableState,
+        })}
+        {NumberColumn({
+          id: "remaining_weight",
+          title: "Estimated Remaining Weight",
+          unit: "g",
+          decimals: 1,
+          dataSource,
+          tableState,
+        })}
+        {FilteredColumn({
+          id: "location",
+          title: "Location",
+          dataSource,
+          tableState,
+        })}
+        {FilteredColumn({
+          id: "lot_nr",
+          title: "Lot Nr",
+          dataSource,
+          tableState,
+        })}
+        {DateColumn({
+          id: "first_used",
+          title: "First Used",
+          dataSource,
+          tableState,
+        })}
+        {DateColumn({
+          id: "last_used",
+          title: "Last Used",
+          dataSource,
+          tableState,
+        })}
+        {SortedColumn({
+          id: "comment",
+          title: "Comment",
+          dataSource,
+          tableState,
+        })}
         <Table.Column
           title="Actions"
-          dataIndex="actions"
           render={(_, record: BaseRecord) => (
             <Space>
               <EditButton

client/src/pages/vendors/list.tsx

@@ -5,24 +5,22 @@ import {
   List,
   EditButton,
   ShowButton,
-  DateField,
   CloneButton,
 } from "@refinedev/antd";
-import { Table, Space, Button } from "antd";
+import { Table, Space, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import {
-  genericSorter,
-  getSortOrderForField,
-  typeSorters,
-} from "../../utils/sorting";
+import { genericSorter, typeSorters } from "../../utils/sorting";
 import { genericFilterer, typeFilters } from "../../utils/filtering";
 import { IVendor } from "./model";
 import {
+  TableState,
   useInitialTableState,
   useStoreInitialState,
 } from "../../utils/saveload";
-import { FilterOutlined } from "@ant-design/icons";
+import { EditOutlined, FilterOutlined } from "@ant-design/icons";
+import i18n from "../../i18n";
+import { DateColumn, SortedColumn } from "../../components/column";
 
 dayjs.extend(utc);
 
@@ -58,16 +56,29 @@ 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
+  );
+
   // Type the sorters and filters
   const typedSorters = typeSorters<IVendor>(sorters);
   const typedFilters = typeFilters<IVendor>(filters);
 
   // Store state in local storage
-  useStoreInitialState("vendorList", {
+  const tableState: TableState = {
     sorters,
     filters,
     pagination: { current, pageSize },
-  });
+    showColumns,
+  };
+  useStoreInitialState("vendorList", tableState);
 
   // Collapse the dataSource to a mutable list
   const dataSource: IVendor[] = React.useMemo(
@@ -97,6 +108,28 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           >
             Clear Filters
           </Button>
+          <Dropdown
+            trigger={["click"]}
+            menu={{
+              items: allColumns.map((column) => ({
+                key: column,
+                label: i18n.t(`vendors.fields.${column}`),
+              })),
+              selectedKeys: showColumns,
+              selectable: true,
+              multiple: true,
+              onDeselect: (keys) => {
+                setShowColumns(keys.selectedKeys);
+              },
+              onSelect: (keys) => {
+                setShowColumns(keys.selectedKeys);
+              },
+            }}
+          >
+            <Button type="primary" icon={<EditOutlined />}>
+              Hide Columns
+            </Button>
+          </Dropdown>
           {defaultButtons}
         </>
       )}
@@ -115,37 +148,30 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
         }}
         rowKey="id"
       >
-        <Table.Column
-          dataIndex="id"
-          title="Id"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "id")}
-        />
-        <Table.Column
-          dataIndex="name"
-          title="Name"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "name")}
-        />
-        <Table.Column
-          dataIndex={["registered"]}
-          title="Registered"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "registered")}
-          render={(value) => (
-            <DateField
-              value={dayjs.utc(value).local()}
-              title={dayjs.utc(value).local().format()}
-              format="YYYY-MM-DD HH:mm:ss"
-            />
-          )}
-        />
-        <Table.Column
-          dataIndex={["comment"]}
-          title="Comment"
-          sorter={true}
-          sortOrder={getSortOrderForField(typedSorters, "comment")}
-        />
+        {SortedColumn({
+          id: "id",
+          title: "Id",
+          dataSource,
+          tableState,
+        })}
+        {SortedColumn({
+          id: "name",
+          title: "Name",
+          dataSource,
+          tableState,
+        })}
+        {DateColumn({
+          id: "registered",
+          title: "Registered",
+          dataSource,
+          tableState,
+        })}
+        {SortedColumn({
+          id: "comment",
+          title: "Comment",
+          dataSource,
+          tableState,
+        })}
         <Table.Column
           title="Actions"
           dataIndex="actions"

client/src/utils/saveload.ts

@@ -7,10 +7,11 @@ interface Pagination {
     pageSize: number;
 }
 
-interface TableState {
+export interface TableState {
     sorters: CrudSort[];
     filters: CrudFilter[];
     pagination: Pagination;
+    showColumns?: string[];
 }
 
 export function useInitialTableState(tableId: string): TableState {
@@ -18,10 +19,13 @@ export function useInitialTableState(tableId: string): TableState {
         const savedSorters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null;
         const savedFilters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null;
         const savedPagination = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null;
+        const savedShowColumns = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null;
+
         const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }];
         const filters = savedFilters ? JSON.parse(savedFilters) : [];
         const pagination = savedPagination ? JSON.parse(savedPagination) : { page: 1, pageSize: 20 };
-        return { sorters, filters, pagination };
+        const showColumns = savedShowColumns ? JSON.parse(savedShowColumns) : undefined;
+        return { sorters, filters, pagination, showColumns };
     });
     return initialState;
 }
@@ -44,4 +48,14 @@ export function useStoreInitialState(tableId: string, state: TableState) {
             localStorage.setItem(`${tableId}-pagination`, JSON.stringify(state.pagination));
         }
     }, [tableId, state.pagination]);
+
+    React.useEffect(() => {
+        if (isLocalStorageAvailable) {
+            if (state.showColumns === undefined) {
+                localStorage.removeItem(`${tableId}-showColumns`);
+            } else {
+                localStorage.setItem(`${tableId}-showColumns`, JSON.stringify(state.showColumns));
+            }
+        }
+    }, [tableId, state.showColumns]);
 }