feat: add column filtering functionality to users table store and widget

Author: kastov

src/entities/dashboard/users/users-table-store/interfaces/action.interface.ts

@@ -1,9 +1,18 @@
 /* eslint-disable camelcase */
-import { MRT_ColumnPinningState, MRT_VisibilityState } from 'mantine-react-table'
+import {
+    MRT_ColumnFiltersState,
+    MRT_ColumnPinningState,
+    MRT_VisibilityState
+} from 'mantine-react-table'
 
 export interface IActions {
     actions: {
         resetState: () => void
+        setColumnFilter: (
+            filter:
+                | ((prev: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)
+                | MRT_ColumnFiltersState
+        ) => void
         setColumnPinning: (
             pinning:
                 | ((prev: MRT_ColumnPinningState) => MRT_ColumnPinningState)

src/entities/dashboard/users/users-table-store/interfaces/state.interface.ts

@@ -1,7 +1,12 @@
 /* eslint-disable camelcase */
-import { MRT_ColumnPinningState, MRT_VisibilityState } from 'mantine-react-table'
+import {
+    MRT_ColumnFiltersState,
+    MRT_ColumnPinningState,
+    MRT_VisibilityState
+} from 'mantine-react-table'
 
 export interface IState {
+    columnFilter: MRT_ColumnFiltersState
     columnPinning: MRT_ColumnPinningState
     columnVisibility: MRT_VisibilityState
     showColumnFilters: boolean

src/entities/dashboard/users/users-table-store/users-table-store.ts

@@ -1,6 +1,10 @@
 /* eslint-disable camelcase */
 
-import { MRT_ColumnPinningState, MRT_VisibilityState } from 'mantine-react-table'
+import {
+    MRT_ColumnFiltersState,
+    MRT_ColumnPinningState,
+    MRT_VisibilityState
+} from 'mantine-react-table'
 import { createJSONStorage, persist } from 'zustand/middleware'
 import { create } from 'zustand'
 
@@ -24,10 +28,13 @@ const DEFAULT_PINNING: MRT_ColumnPinningState = {
     right: []
 }
 
+const DEFAULT_COLUMN_FILTER: MRT_ColumnFiltersState = []
+
 const initialState: IState = {
     columnVisibility: DEFAULT_VISIBILITY,
     columnPinning: DEFAULT_PINNING,
-    showColumnFilters: false
+    showColumnFilters: false,
+    columnFilter: DEFAULT_COLUMN_FILTER
 }
 
 export const useUsersTableStore = create<IActions & IState>()(
@@ -55,18 +62,25 @@ export const useUsersTableStore = create<IActions & IState>()(
                             typeof show === 'function' ? show(state.showColumnFilters) : show
                     })),
 
+                setColumnFilter: (filter) =>
+                    set((state) => ({
+                        columnFilter:
+                            typeof filter === 'function' ? filter(state.columnFilter) : filter
+                    })),
+
                 resetState: () => set({ ...initialState })
             }
         }),
 
         {
-            name: 'users-column-storage',
+            name: 'rmnw-users-table-store',
             version: 1,
             storage: createJSONStorage(() => localStorage),
             partialize: (state) => ({
                 columnVisibility: state.columnVisibility,
                 columnPinning: state.columnPinning,
-                showColumnFilters: state.showColumnFilters
+                showColumnFilters: state.showColumnFilters,
+                columnFilter: state.columnFilter
             })
         }
     )
@@ -79,3 +93,5 @@ export const useUsersTableStoreColumnPinning = () =>
     useUsersTableStore((store) => store.columnPinning)
 export const useUsersTableStoreShowColumnFilters = () =>
     useUsersTableStore((store) => store.showColumnFilters)
+export const useUsersTableStoreColumnFilter = () =>
+    useUsersTableStore((store) => store.columnFilter)

src/widgets/dashboard/users/users-table/user-table.widget.tsx

@@ -2,7 +2,6 @@
 import {
     MantineReactTable,
     MRT_ColumnFilterFnsState,
-    MRT_ColumnFiltersState,
     MRT_PaginationState,
     MRT_SortingState,
     MRT_TableOptions,
@@ -13,6 +12,7 @@ import { useTranslation } from 'react-i18next'
 
 import {
     useUsersTableStoreActions,
+    useUsersTableStoreColumnFilter,
     useUsersTableStoreColumnPinning,
     useUsersTableStoreColumnVisibility,
     useUsersTableStoreShowColumnFilters
@@ -44,6 +44,7 @@ export function UserTableWidget() {
     const columnVisibility = useUsersTableStoreColumnVisibility()
     const columnPinning = useUsersTableStoreColumnPinning()
     const showColumnFilters = useUsersTableStoreShowColumnFilters()
+    const columnFilter = useUsersTableStoreColumnFilter()
 
     const [sorting, setSorting] = useState<MRT_SortingState>([])
 
@@ -52,15 +53,14 @@ export function UserTableWidget() {
         pageSize: 25
     })
 
-    const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>([])
     const [columnFilterFns, setColumnFilterFns] = useState<MRT_ColumnFilterFnsState>(
         Object.fromEntries(tableColumns.map(({ accessorKey }) => [accessorKey, 'contains']))
     )
 
     const params = {
         start: pagination.pageIndex * pagination.pageSize,
         size: pagination.pageSize,
-        filters: columnFilters,
+        filters: columnFilter,
         filterModes: columnFilterFns,
         sorting
     }
@@ -117,7 +117,7 @@ export function UserTableWidget() {
         } : undefined,
 
         onColumnFilterFnsChange: setColumnFilterFns,
-        onColumnFiltersChange: setColumnFilters,
+        onColumnFiltersChange: actions.setColumnFilter,
         onPaginationChange: setPagination,
         onSortingChange: setSorting,
         onColumnPinningChange: actions.setColumnPinning,
@@ -154,7 +154,7 @@ export function UserTableWidget() {
         selectAllMode: 'page',
         state: {
             columnFilterFns,
-            columnFilters,
+            columnFilters: columnFilter,
             isLoading,
             pagination,
             showAlertBanner: isError,