diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
index cddc1b098..3a27367f3 100644
--- a/src/catalogue/items/catalogueItemsTable.component.tsx
+++ b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -574,10 +574,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
id: 'manufacturer.address',
filterVariant: COLUMN_FILTER_VARIANTS.string,
filterFn: COLUMN_FILTER_FUNCTIONS.string,
- columnFilterModeOptions: [
- ...COLUMN_FILTER_MODE_OPTIONS.string,
- ...OPTIONAL_FILTER_MODE_OPTIONS,
- ],
+ columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
size: 300,
Cell: ({ row }) => (
diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
index 2c12627d3..956ebe197 100644
--- a/src/manufacturer/manufacturer.component.tsx
+++ b/src/manufacturer/manufacturer.component.tsx
@@ -26,11 +26,16 @@ import { useGetManufacturers } from '../api/manufacturers';
import { usePreservedTableState } from '../common/preservedTableState.component';
import { RequestType } from '../form.schemas';
import {
+ COLUMN_FILTER_FUNCTIONS,
+ COLUMN_FILTER_MODE_OPTIONS,
+ COLUMN_FILTER_VARIANTS,
+ OPTIONAL_FILTER_MODE_OPTIONS,
TableBodyCellOverFlowTip,
TableCellOverFlowTipProps,
TableHeaderOverflowTip,
displayTableRowCountText,
formatDateTimeStrings,
+ getInitialColumnFilterFnState,
getPageHeightCalc,
} from '../utils';
import Breadcrumbs from '../view/breadcrumbs.component';
@@ -60,6 +65,9 @@ function ManufacturerComponent() {
Header: TableHeaderOverflowTip,
accessorFn: (row) => row.name,
id: 'name',
+ filterVariant: COLUMN_FILTER_VARIANTS.string,
+ filterFn: COLUMN_FILTER_FUNCTIONS.string,
+ columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
size: 400,
Cell: ({ row }) =>
row.original.name && (
@@ -77,8 +85,9 @@ function ManufacturerComponent() {
Header: TableHeaderOverflowTip,
accessorFn: (row) => new Date(row.modified_time),
id: 'modified_time',
- filterVariant: 'datetime-range',
- filterFn: 'betweenInclusive',
+ filterVariant: COLUMN_FILTER_VARIANTS.datetime,
+ filterFn: COLUMN_FILTER_FUNCTIONS.datetime,
+ columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.datetime,
size: 350,
enableGrouping: false,
Cell: ({ row }) =>
@@ -90,8 +99,9 @@ function ManufacturerComponent() {
Header: TableHeaderOverflowTip,
accessorFn: (row) => new Date(row.created_time),
id: 'created_time',
- filterVariant: 'datetime-range',
- filterFn: 'betweenInclusive',
+ filterVariant: COLUMN_FILTER_VARIANTS.datetime,
+ filterFn: COLUMN_FILTER_FUNCTIONS.datetime,
+ columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.datetime,
size: 350,
enableGrouping: false,
enableHiding: true,
@@ -103,6 +113,12 @@ function ManufacturerComponent() {
Header: TableHeaderOverflowTip,
accessorFn: (row) => row.url ?? '',
id: 'url',
+ filterVariant: COLUMN_FILTER_VARIANTS.string,
+ filterFn: COLUMN_FILTER_FUNCTIONS.string,
+ columnFilterModeOptions: [
+ ...COLUMN_FILTER_MODE_OPTIONS.string,
+ ...OPTIONAL_FILTER_MODE_OPTIONS,
+ ],
size: 500,
Cell: ({ row }) =>
row.original.url && (
@@ -118,6 +134,10 @@ function ManufacturerComponent() {
accessorFn: (row) =>
`${row.address.address_line} ${row.address.town} ${row.address.county} ${row.address.postcode} ${row.address.country}`,
id: 'address',
+ filterVariant: COLUMN_FILTER_VARIANTS.string,
+ filterFn: COLUMN_FILTER_FUNCTIONS.string,
+ columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
+
size: 650,
Cell: ({ row }) => (
@@ -144,6 +164,12 @@ function ManufacturerComponent() {
Header: TableHeaderOverflowTip,
accessorFn: (row) => row.telephone,
id: 'telephone',
+ filterVariant: COLUMN_FILTER_VARIANTS.string,
+ filterFn: COLUMN_FILTER_FUNCTIONS.string,
+ columnFilterModeOptions: [
+ ...COLUMN_FILTER_MODE_OPTIONS.string,
+ ...OPTIONAL_FILTER_MODE_OPTIONS,
+ ],
size: 250,
},
];
@@ -152,10 +178,15 @@ function ManufacturerComponent() {
const noResultsTxt =
'No results found: Try adding an Manufacturer by using the Add Manufacturer button on the top left of your screen';
+ const initialColumnFilterFnState = React.useMemo(() => {
+ return getInitialColumnFilterFnState(columns);
+ }, [columns]);
+
const { preservedState, onPreservedStatesChange } = usePreservedTableState({
initialState: {
columnVisibility: { created_time: false },
pagination: { pageSize: 15, pageIndex: 0 },
+ columnFilterFns: initialColumnFilterFnState,
},
storeInUrl: true,
});
@@ -166,6 +197,7 @@ function ManufacturerComponent() {
data: manufacturerData ?? [], //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
// Features
enableColumnOrdering: true,
+ enableColumnFilterModes: true,
enableColumnResizing: true,
enableFacetedValues: true,
enableRowActions: true,