fix: add arrIncludes for multi select filter

KevinVandy · Mar 31, 2024 · c195d79 · c195d79
1 parent 59c99c2
commit c195d79
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterTextInput.tsx
@@ -262,7 +262,6 @@ export const MRT_FilterTextInput = <TData extends MRT_RowData>({
       <Badge
         className={classes['filter-chip-badge']}
         onClick={handleClearEmptyFilterChip}
-        rightSection={ClearButton}
         size="lg"
       >
         {filterChipLabel}
@@ -271,6 +270,7 @@ export const MRT_FilterTextInput = <TData extends MRT_RowData>({
   ) : isMultiSelectFilter ? (
     <MultiSelect
       {...commonProps}
+      clearable
       searchable
       {...multiSelectProps}
       className={clsx(className, multiSelectProps.className)}
@@ -287,6 +287,7 @@ export const MRT_FilterTextInput = <TData extends MRT_RowData>({
       }}
       rightSection={filterValue?.toString()?.length ? ClearButton : undefined}
       style={commonProps.style}
+      value={Array.isArray(commonProps?.value) ? commonProps.value : []}
     />
   ) : isSelectFilter ? (
     <Select

diff --git a/packages/mantine-react-table/src/components/menus/MRT_FilterOptionMenu.tsx b/packages/mantine-react-table/src/components/menus/MRT_FilterOptionMenu.tsx
@@ -97,6 +97,18 @@ export const mrtFilterOptions = (
     option: 'notEmpty',
     symbol: '!∅',
   },
+  {
+    divider: false,
+    label: localization.filterArrIncludes,
+    option: 'arrIncludes',
+    symbol: '∈',
+  },
+  {
+    divider: false,
+    label: localization.filterArrIncludesAll,
+    option: 'arrIncludesAll',
+    symbol: '=',
+  },
 ];
 
 const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];

diff --git a/packages/mantine-react-table/stories/features/Filtering.stories.tsx b/packages/mantine-react-table/stories/features/Filtering.stories.tsx
@@ -385,7 +385,18 @@ export const EnableFilterModes = () => (
       },
       {
         accessorKey: 'state',
+        columnFilterModeOptions: [
+          'empty',
+          'notEmpty',
+          'arrIncludes',
+          'arrIncludesAll',
+          'arrIncludesSome',
+        ],
+        filterVariant: 'multi-select',
         header: 'State',
+        mantineFilterMultiSelectProps: {
+          data: Array.from(new Set(data.map((d) => d.state))),
+        },
       },
     ]}
     data={data}