From 45113bfb12f07cef403f7d8cf1fcf81d070d0855 Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Wed, 20 Nov 2024 16:33:50 +0000
Subject: [PATCH]  Enhance catalogue categories table view filtering #1125

---
 .../catalogueCategoryTableView.component.tsx        | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/catalogue/category/catalogueCategoryTableView.component.tsx b/src/catalogue/category/catalogueCategoryTableView.component.tsx
index cb253eb13..935356de5 100644
--- a/src/catalogue/category/catalogueCategoryTableView.component.tsx
+++ b/src/catalogue/category/catalogueCategoryTableView.component.tsx
@@ -9,6 +9,9 @@ import { MRT_Localization_EN } from 'material-react-table/locales/en';
 import React from 'react';
 import { CatalogueCategory } from '../../api/api.types';
 import {
+  COLUMN_FILTER_FUNCTIONS,
+  COLUMN_FILTER_MODE_OPTIONS,
+  COLUMN_FILTER_VARIANTS,
   TableBodyCellOverFlowTip,
   TableCellOverFlowTipProps,
   formatDateTimeStrings,
@@ -53,18 +56,21 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
         header: 'Name',
         accessorFn: (row) => row.name,
         id: 'name',
+        filterVariant: COLUMN_FILTER_VARIANTS.string,
+        filterFn: COLUMN_FILTER_FUNCTIONS.string,
+        columnFilterModeOptions: COLUMN_FILTER_MODE_OPTIONS.string,
         size: 567.5,
       },
       {
         header: 'Last modified',
         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: 567.5,
         enableGrouping: false,
         Cell: ({ row }) =>
-          row.original.modified_time &&
           formatDateTimeStrings(row.original.modified_time, true),
       },
     ];
@@ -76,6 +82,7 @@ const CatalogueCategoryTableView = (props: CatalogueCategoryTableViewProps) => {
     data: catalogueCategoryData ?? [], //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
     // Features
     enableColumnOrdering: false,
+    enableColumnFilterModes: true,
     enableColumnPinning: false,
     enableTopToolbar: true,
     enableFacetedValues: true,