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,