material-react-table 0.28.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -130,6 +130,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
130
130
  text: string;
131
131
  value: string;
132
132
  })[];
133
+ filterVariant?: 'text' | 'select' | 'multiSelect' | 'range';
133
134
  /**
134
135
  * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
135
136
  */
@@ -172,9 +173,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
172
173
  table: MRT_TableInstance<TData>;
173
174
  column: MRT_Column<TData>;
174
175
  }) => IconButtonProps);
175
- muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
176
+ muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
176
177
  table: MRT_TableInstance<TData>;
177
178
  column: MRT_Column<TData>;
179
+ rangeFilterIndex?: number;
178
180
  }) => TextFieldProps);
179
181
  muiTableHeadCellProps?: TableCellProps | (({ table, column, }: {
180
182
  table: MRT_TableInstance<TData>;
@@ -194,6 +196,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
194
196
  };
195
197
  export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
196
198
  id: string;
199
+ _filterFn: MRT_FilterOption;
197
200
  };
198
201
  export declare type MRT_Column<TData extends Record<string, any> = {}> = Omit<Column<TData, unknown>, 'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'> & {
199
202
  columnDef: MRT_DefinedColumnDef<TData>;
@@ -343,9 +346,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
343
346
  table: MRT_TableInstance<TData>;
344
347
  column: MRT_Column<TData>;
345
348
  }) => IconButtonProps);
346
- muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
349
+ muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
347
350
  table: MRT_TableInstance<TData>;
348
351
  column: MRT_Column<TData>;
352
+ rangeFilterIndex?: number;
349
353
  }) => TextFieldProps);
350
354
  muiTableHeadCellProps?: TableCellProps | (({ table, column, }: {
351
355
  table: MRT_TableInstance<TData>;
@@ -8,3 +8,4 @@ export declare const reorderColumn: <TData extends Record<string, any> = {}>(dra
8
8
  export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
9
9
  export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
10
10
  export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
11
+ export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;
@@ -2,7 +2,7 @@ import { FC } from 'react';
2
2
  import type { MRT_Header, MRT_TableInstance } from '..';
3
3
  interface Props {
4
4
  header: MRT_Header;
5
- inputIndex?: number;
5
+ rangeFilterIndex?: number;
6
6
  table: MRT_TableInstance;
7
7
  }
8
8
  export declare const MRT_FilterTextField: FC<Props>;
@@ -13,6 +13,9 @@ export interface MRT_Localization {
13
13
  edit: string;
14
14
  expand: string;
15
15
  expandAll: string;
16
+ filterArrIncludes: string;
17
+ filterArrIncludesAll: string;
18
+ filterArrIncludesSome: string;
16
19
  filterBetween: string;
17
20
  filterBetweenInclusive: string;
18
21
  filterByColumn: string;
@@ -20,15 +23,20 @@ export interface MRT_Localization {
20
23
  filterEmpty: string;
21
24
  filterEndsWith: string;
22
25
  filterEquals: string;
26
+ filterEqualsString: string;
23
27
  filterFuzzy: string;
24
28
  filterGreaterThan: string;
25
29
  filterGreaterThanOrEqualTo: string;
30
+ filterInNumberRange: string;
31
+ filterIncludesString: string;
32
+ filterIncludesStringSensitive: string;
26
33
  filterLessThan: string;
27
34
  filterLessThanOrEqualTo: string;
28
35
  filterMode: string;
29
36
  filterNotEmpty: string;
30
37
  filterNotEquals: string;
31
38
  filterStartsWith: string;
39
+ filterWeakEquals: string;
32
40
  filteringByColumn: string;
33
41
  grab: string;
34
42
  groupByColumn: string;
@@ -38,6 +46,7 @@ export interface MRT_Localization {
38
46
  max: string;
39
47
  min: string;
40
48
  move: string;
49
+ or: string;
41
50
  pinToLeft: string;
42
51
  pinToRight: string;
43
52
  resetColumnSize: string;
@@ -59,6 +59,9 @@ var MRT_DefaultLocalization_EN = {
59
59
  edit: 'Edit',
60
60
  expand: 'Expand',
61
61
  expandAll: 'Expand all',
62
+ filterArrIncludes: 'Includes',
63
+ filterArrIncludesAll: 'Includes all',
64
+ filterArrIncludesSome: 'Includes',
62
65
  filterBetween: 'Between',
63
66
  filterBetweenInclusive: 'Between Inclusive',
64
67
  filterByColumn: 'Filter by {column}',
@@ -66,15 +69,20 @@ var MRT_DefaultLocalization_EN = {
66
69
  filterEmpty: 'Empty',
67
70
  filterEndsWith: 'Ends With',
68
71
  filterEquals: 'Equals',
72
+ filterEqualsString: 'Equals',
69
73
  filterFuzzy: 'Fuzzy',
70
74
  filterGreaterThan: 'Greater Than',
71
75
  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
76
+ filterInNumberRange: 'Between',
77
+ filterIncludesString: 'Contains',
78
+ filterIncludesStringSensitive: 'Contains',
72
79
  filterLessThan: 'Less Than',
73
80
  filterLessThanOrEqualTo: 'Less Than Or Equal To',
74
81
  filterMode: 'Filter Mode: {filterType}',
75
82
  filterNotEmpty: 'Not Empty',
76
83
  filterNotEquals: 'Not Equals',
77
84
  filterStartsWith: 'Starts With',
85
+ filterWeakEquals: 'Equals',
78
86
  filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
79
87
  grab: 'Grab',
80
88
  groupByColumn: 'Group by {column}',
@@ -84,6 +92,7 @@ var MRT_DefaultLocalization_EN = {
84
92
  max: 'Max',
85
93
  min: 'Min',
86
94
  move: 'Move',
95
+ or: 'or',
87
96
  pinToLeft: 'Pin to left',
88
97
  pinToRight: 'Pin to right',
89
98
  resetColumnSize: 'Reset column size',
@@ -239,6 +248,79 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
239
248
  }))));
240
249
  };
241
250
 
251
+ var internalFilterOptions = function internalFilterOptions(localization) {
252
+ return [{
253
+ option: 'fuzzy',
254
+ symbol: '≈',
255
+ label: localization.filterFuzzy,
256
+ divider: false
257
+ }, {
258
+ option: 'contains',
259
+ symbol: '*',
260
+ label: localization.filterContains,
261
+ divider: false
262
+ }, {
263
+ option: 'startsWith',
264
+ symbol: 'a',
265
+ label: localization.filterStartsWith,
266
+ divider: false
267
+ }, {
268
+ option: 'endsWith',
269
+ symbol: 'z',
270
+ label: localization.filterEndsWith,
271
+ divider: true
272
+ }, {
273
+ option: 'equals',
274
+ symbol: '=',
275
+ label: localization.filterEquals,
276
+ divider: false
277
+ }, {
278
+ option: 'notEquals',
279
+ symbol: '≠',
280
+ label: localization.filterNotEquals,
281
+ divider: true
282
+ }, {
283
+ option: 'between',
284
+ symbol: '⇿',
285
+ label: localization.filterBetween,
286
+ divider: false
287
+ }, {
288
+ option: 'betweenInclusive',
289
+ symbol: '⬌',
290
+ label: localization.filterBetweenInclusive,
291
+ divider: true
292
+ }, {
293
+ option: 'greaterThan',
294
+ symbol: '>',
295
+ label: localization.filterGreaterThan,
296
+ divider: false
297
+ }, {
298
+ option: 'greaterThanOrEqualTo',
299
+ symbol: '≥',
300
+ label: localization.filterGreaterThanOrEqualTo,
301
+ divider: false
302
+ }, {
303
+ option: 'lessThan',
304
+ symbol: '<',
305
+ label: localization.filterLessThan,
306
+ divider: false
307
+ }, {
308
+ option: 'lessThanOrEqualTo',
309
+ symbol: '≤',
310
+ label: localization.filterLessThanOrEqualTo,
311
+ divider: true
312
+ }, {
313
+ option: 'empty',
314
+ symbol: '∅',
315
+ label: localization.filterEmpty,
316
+ divider: false
317
+ }, {
318
+ option: 'notEmpty',
319
+ symbol: '!∅',
320
+ label: localization.filterNotEmpty,
321
+ divider: false
322
+ }];
323
+ };
242
324
  var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
243
325
  var _columnDef$columnFilt;
244
326
 
@@ -268,78 +350,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
268
350
 
269
351
  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
270
352
  var filterOptions = React.useMemo(function () {
271
- return [{
272
- option: 'fuzzy',
273
- symbol: '≈',
274
- label: localization.filterFuzzy,
275
- divider: false
276
- }, {
277
- option: 'contains',
278
- symbol: '*',
279
- label: localization.filterContains,
280
- divider: false
281
- }, {
282
- option: 'startsWith',
283
- symbol: 'a',
284
- label: localization.filterStartsWith,
285
- divider: false
286
- }, {
287
- option: 'endsWith',
288
- symbol: 'z',
289
- label: localization.filterEndsWith,
290
- divider: true
291
- }, {
292
- option: 'equals',
293
- symbol: '=',
294
- label: localization.filterEquals,
295
- divider: false
296
- }, {
297
- option: 'notEquals',
298
- symbol: '≠',
299
- label: localization.filterNotEquals,
300
- divider: true
301
- }, {
302
- option: 'between',
303
- symbol: '⇿',
304
- label: localization.filterBetween,
305
- divider: false
306
- }, {
307
- option: 'betweenInclusive',
308
- symbol: '⬌',
309
- label: localization.filterBetweenInclusive,
310
- divider: true
311
- }, {
312
- option: 'greaterThan',
313
- symbol: '>',
314
- label: localization.filterGreaterThan,
315
- divider: false
316
- }, {
317
- option: 'greaterThanOrEqualTo',
318
- symbol: '≥',
319
- label: localization.filterGreaterThanOrEqualTo,
320
- divider: false
321
- }, {
322
- option: 'lessThan',
323
- symbol: '<',
324
- label: localization.filterLessThan,
325
- divider: false
326
- }, {
327
- option: 'lessThanOrEqualTo',
328
- symbol: '≤',
329
- label: localization.filterLessThanOrEqualTo,
330
- divider: true
331
- }, {
332
- option: 'empty',
333
- symbol: '∅',
334
- label: localization.filterEmpty,
335
- divider: false
336
- }, {
337
- option: 'notEmpty',
338
- symbol: '!∅',
339
- label: localization.filterNotEmpty,
340
- divider: false
341
- }].filter(function (filterType) {
342
- return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterType.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && ['fuzzy', 'contains'].includes(filterType.option);
353
+ return internalFilterOptions(localization).filter(function (filterOption) {
354
+ return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterOption.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterOption.option)) && ['fuzzy', 'contains'].includes(filterOption.option);
343
355
  });
344
356
  }, []);
345
357
 
@@ -706,7 +718,9 @@ var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
706
718
  if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
707
719
  var _MRT_FilterFns$curren;
708
720
 
709
- columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy;
721
+ columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy; //@ts-ignore
722
+
723
+ columnDef._filterFn = currentFilterFns[columnDef.id];
710
724
  }
711
725
 
712
726
  if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn)) {
@@ -737,6 +751,12 @@ var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
737
751
  return getColumnId(columnDef);
738
752
  }), getTrailingDisplayColumnIds(props)).filter(Boolean);
739
753
  };
754
+ var getDefaultColumnFilterFn = function getDefaultColumnFilterFn(columnDef) {
755
+ if (columnDef.filterVariant === 'multiSelect') return 'arrIncludesSome';
756
+ if (columnDef.filterVariant === 'select') return 'equals';
757
+ if (columnDef.filterVariant === 'range') return 'betweenInclusive';
758
+ return 'fuzzy';
759
+ };
740
760
 
741
761
  var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
742
762
  var _column$columns2;
@@ -2124,7 +2144,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2124
2144
  var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
2125
2145
 
2126
2146
  var header = _ref.header,
2127
- inputIndex = _ref.inputIndex,
2147
+ rangeFilterIndex = _ref.rangeFilterIndex,
2128
2148
  table = _ref.table;
2129
2149
  var getState = table.getState,
2130
2150
  _table$options = table.options,
@@ -2143,25 +2163,39 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2143
2163
  var _getState = getState(),
2144
2164
  currentFilterFns = _getState.currentFilterFns;
2145
2165
 
2146
- var _useState = React.useState(null),
2147
- anchorEl = _useState[0],
2148
- setAnchorEl = _useState[1];
2149
-
2150
2166
  var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps({
2151
2167
  column: column,
2152
- table: table
2168
+ table: table,
2169
+ rangeFilterIndex: rangeFilterIndex
2153
2170
  }) : muiTableHeadCellFilterTextFieldProps;
2154
2171
  var mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function ? columnDef.muiTableHeadCellFilterTextFieldProps({
2155
2172
  column: column,
2156
- table: table
2173
+ table: table,
2174
+ rangeFilterIndex: rangeFilterIndex
2157
2175
  }) : columnDef.muiTableHeadCellFilterTextFieldProps;
2158
2176
 
2159
2177
  var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
2160
2178
 
2179
+ var isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
2180
+ var isSelectFilter = columnDef.filterVariant === 'select';
2181
+ var isMultiSelectFilter = columnDef.filterVariant === 'multiSelect';
2182
+ var isTextboxFilter = !isSelectFilter && !isMultiSelectFilter;
2183
+ var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2184
+ var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (rangeFilterIndex != null ? rangeFilterIndex : '');
2185
+ var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
2186
+ localization["filter" + ((currentFilterOption == null ? void 0 : currentFilterOption.charAt == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
2187
+ var filterPlaceholder = !isRangeFilter ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : rangeFilterIndex === 0 ? localization.min : rangeFilterIndex === 1 ? localization.max : '';
2188
+ var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
2189
+ var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !rangeFilterIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
2190
+
2191
+ var _useState = React.useState(null),
2192
+ anchorEl = _useState[0],
2193
+ setAnchorEl = _useState[1];
2194
+
2161
2195
  var _useState2 = React.useState(function () {
2162
- var _column$getFilterValu, _column$getFilterValu2, _column$getFilterValu3;
2196
+ var _column$getFilterValu, _column$getFilterValu2;
2163
2197
 
2164
- return inputIndex !== undefined ? (_column$getFilterValu = (_column$getFilterValu2 = column.getFilterValue()) == null ? void 0 : _column$getFilterValu2[inputIndex]) != null ? _column$getFilterValu : '' : (_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : '';
2198
+ return isMultiSelectFilter ? column.getFilterValue() || [] : isRangeFilter ? ((_column$getFilterValu = column.getFilterValue()) == null ? void 0 : _column$getFilterValu[rangeFilterIndex]) || [] : (_column$getFilterValu2 = column.getFilterValue()) != null ? _column$getFilterValu2 : '';
2165
2199
  }),
2166
2200
  filterValue = _useState2[0],
2167
2201
  setFilterValue = _useState2[1];
@@ -2169,41 +2203,40 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2169
2203
  var handleChangeDebounced = React.useCallback(material.debounce(function (event) {
2170
2204
  var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
2171
2205
 
2172
- if (inputIndex !== undefined) {
2206
+ if (isRangeFilter) {
2173
2207
  column.setFilterValue(function (old) {
2174
2208
  var newFilterValues = old != null ? old : ['', ''];
2175
- newFilterValues[inputIndex] = value;
2209
+ newFilterValues[rangeFilterIndex] = value;
2176
2210
  return newFilterValues;
2177
2211
  });
2178
2212
  } else {
2179
2213
  column.setFilterValue(value != null ? value : undefined);
2180
2214
  }
2181
- }, 200), []);
2215
+ }, isTextboxFilter ? 200 : 1), []);
2182
2216
 
2183
2217
  var handleChange = function handleChange(event) {
2184
2218
  setFilterValue(event.target.value);
2185
2219
  handleChangeDebounced(event);
2186
2220
  };
2187
2221
 
2188
- var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
2189
- setAnchorEl(event.currentTarget);
2190
- };
2191
-
2192
2222
  var handleClear = function handleClear() {
2193
- setFilterValue('');
2194
-
2195
- if (inputIndex !== undefined) {
2223
+ if (isMultiSelectFilter) {
2224
+ setFilterValue([]);
2225
+ column.setFilterValue([]);
2226
+ } else if (isRangeFilter) {
2227
+ setFilterValue('');
2196
2228
  column.setFilterValue(function (old) {
2197
2229
  var newFilterValues = old != null ? old : ['', ''];
2198
- newFilterValues[inputIndex] = undefined;
2230
+ newFilterValues[rangeFilterIndex] = undefined;
2199
2231
  return newFilterValues;
2200
2232
  });
2201
2233
  } else {
2234
+ setFilterValue('');
2202
2235
  column.setFilterValue(undefined);
2203
2236
  }
2204
2237
  };
2205
2238
 
2206
- var handleClearFilterChip = function handleClearFilterChip() {
2239
+ var handleClearEmptyFilterChip = function handleClearEmptyFilterChip() {
2207
2240
  setFilterValue('');
2208
2241
  column.setFilterValue(undefined);
2209
2242
  setCurrentFilterFns(function (prev) {
@@ -2213,6 +2246,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2213
2246
  });
2214
2247
  };
2215
2248
 
2249
+ var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
2250
+ setAnchorEl(event.currentTarget);
2251
+ };
2252
+
2216
2253
  if (columnDef.Filter) {
2217
2254
  return React__default.createElement(React__default.Fragment, null, columnDef.Filter == null ? void 0 : columnDef.Filter({
2218
2255
  header: header,
@@ -2220,14 +2257,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2220
2257
  }));
2221
2258
  }
2222
2259
 
2223
- var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
2224
- var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2225
- var isSelectFilter = !!columnDef.filterSelectOptions;
2226
- var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
2227
- localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
2228
- var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
2229
- var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
2230
- var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
2231
2260
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
2232
2261
  fullWidth: true,
2233
2262
  id: filterId,
@@ -2251,13 +2280,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2251
2280
  }
2252
2281
  },
2253
2282
  margin: "none",
2254
- placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
2283
+ placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter ? undefined : filterPlaceholder,
2255
2284
  onChange: handleChange,
2256
2285
  onClick: function onClick(e) {
2257
2286
  return e.stopPropagation();
2258
2287
  },
2259
- select: isSelectFilter,
2260
- value: filterValue != null ? filterValue : '',
2288
+ select: isSelectFilter || isMultiSelectFilter,
2289
+ value: filterValue,
2261
2290
  variant: "standard",
2262
2291
  InputProps: {
2263
2292
  startAdornment: showChangeModeButton ? React__default.createElement(material.InputAdornment, {
@@ -2274,14 +2303,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2274
2303
  width: '1.75rem'
2275
2304
  }
2276
2305
  }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
2277
- onDelete: handleClearFilterChip,
2306
+ onDelete: handleClearEmptyFilterChip,
2278
2307
  label: filterChipLabel
2279
2308
  })) : React__default.createElement(FilterListIcon, null),
2280
2309
  endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
2281
2310
  position: "end"
2282
2311
  }, React__default.createElement(material.Tooltip, {
2283
2312
  arrow: true,
2284
- disableHoverListener: isSelectFilter,
2285
2313
  placement: "right",
2286
2314
  title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
2287
2315
  }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
@@ -2294,30 +2322,59 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2294
2322
  width: '1.75rem'
2295
2323
  }
2296
2324
  }, React__default.createElement(CloseIcon, null)))))
2325
+ },
2326
+ SelectProps: {
2327
+ displayEmpty: true,
2328
+ multiple: isMultiSelectFilter,
2329
+ renderValue: isMultiSelectFilter ? function (selected) {
2330
+ return !(selected != null && selected.length) ? React__default.createElement(material.Box, {
2331
+ sx: {
2332
+ opacity: 0.5
2333
+ }
2334
+ }, filterPlaceholder) : React__default.createElement(material.Box, {
2335
+ sx: {
2336
+ display: 'flex',
2337
+ flexWrap: 'wrap',
2338
+ gap: '2px'
2339
+ }
2340
+ }, selected == null ? void 0 : selected.map(function (value) {
2341
+ return React__default.createElement(material.Chip, {
2342
+ key: value,
2343
+ label: value
2344
+ });
2345
+ }));
2346
+ } : undefined
2297
2347
  }
2298
2348
  }, textFieldProps, {
2299
2349
  sx: function sx(theme) {
2300
2350
  return _extends({
2301
2351
  p: 0,
2302
- minWidth: !filterChipLabel ? '8rem' : 'auto',
2352
+ minWidth: !filterChipLabel ? '6rem' : 'auto',
2303
2353
  width: 'calc(100% + 0.5rem)',
2304
2354
  '& .MuiSelect-icon': {
2305
2355
  mr: '1.5rem'
2306
2356
  }
2307
2357
  }, (textFieldProps == null ? void 0 : textFieldProps.sx) instanceof Function ? textFieldProps.sx(theme) : textFieldProps == null ? void 0 : textFieldProps.sx);
2308
2358
  }
2309
- }), isSelectFilter && React__default.createElement(material.MenuItem, {
2359
+ }), (isSelectFilter || isMultiSelectFilter) && React__default.createElement(material.MenuItem, {
2310
2360
  divider: true,
2311
- disabled: !filterValue,
2361
+ disabled: true,
2362
+ hidden: true,
2312
2363
  value: ""
2313
- }, localization.clearFilter), columnDef == null ? void 0 : (_columnDef$filterSele = columnDef.filterSelectOptions) == null ? void 0 : _columnDef$filterSele.map(function (option) {
2364
+ }, React__default.createElement(material.Box, {
2365
+ sx: {
2366
+ opacity: 0.5
2367
+ }
2368
+ }, filterPlaceholder)), columnDef == null ? void 0 : (_columnDef$filterSele = columnDef.filterSelectOptions) == null ? void 0 : _columnDef$filterSele.map(function (option) {
2369
+ var _column$getFilterValu3;
2370
+
2314
2371
  var value;
2315
2372
  var text;
2316
2373
 
2317
- if (typeof option === 'string') {
2374
+ if (typeof option !== 'object') {
2318
2375
  value = option;
2319
2376
  text = option;
2320
- } else if (typeof option === 'object') {
2377
+ } else {
2321
2378
  value = option.value;
2322
2379
  text = option.text;
2323
2380
  }
@@ -2325,7 +2382,12 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2325
2382
  return React__default.createElement(material.MenuItem, {
2326
2383
  key: value,
2327
2384
  value: value
2328
- }, text);
2385
+ }, isMultiSelectFilter && React__default.createElement(material.Checkbox, {
2386
+ checked: ((_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : []).includes(value),
2387
+ sx: {
2388
+ mr: '0.5rem'
2389
+ }
2390
+ }), React__default.createElement(material.ListItemText, null, text));
2329
2391
  })), React__default.createElement(MRT_FilterOptionMenu, {
2330
2392
  anchorEl: anchorEl,
2331
2393
  header: header,
@@ -2345,11 +2407,11 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
2345
2407
  }
2346
2408
  }, React__default.createElement(MRT_FilterTextField, {
2347
2409
  header: header,
2348
- inputIndex: 0,
2410
+ rangeFilterIndex: 0,
2349
2411
  table: table
2350
2412
  }), React__default.createElement(MRT_FilterTextField, {
2351
2413
  header: header,
2352
- inputIndex: 1,
2414
+ rangeFilterIndex: 1,
2353
2415
  table: table
2354
2416
  }));
2355
2417
  };
@@ -2368,7 +2430,7 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
2368
2430
  "in": showColumnFilters,
2369
2431
  mountOnEnter: true,
2370
2432
  unmountOnExit: true
2371
- }, currentFilterFns[column.id] === 'between' ? React__default.createElement(MRT_FilterRangeFields, {
2433
+ }, ['between', 'betweenInclusive', 'inNumberRange'].includes(currentFilterFns[column.id]) ? React__default.createElement(MRT_FilterRangeFields, {
2372
2434
  header: header,
2373
2435
  table: table
2374
2436
  }) : React__default.createElement(MRT_FilterTextField, {
@@ -2392,12 +2454,13 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
2392
2454
 
2393
2455
  var column = header.column;
2394
2456
  var columnDef = column.columnDef;
2457
+ var isRangeFilter = ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
2395
2458
  var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2396
2459
  var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', // @ts-ignore
2397
- localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
2460
+ localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + (isRangeFilter ? localization.and : localization.or) + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
2398
2461
  return React__default.createElement(material.Grow, {
2399
2462
  unmountOnExit: true,
2400
- "in": !!column.getFilterValue() && currentFilterOption !== 'between' || currentFilterOption === 'between' && ( // @ts-ignore
2463
+ "in": !!column.getFilterValue() && isRangeFilter || !isRangeFilter && ( // @ts-ignore
2401
2464
  !!((_column$getFilterValu = column.getFilterValue()) != null && _column$getFilterValu[0]) || !!((_column$getFilterValu2 = column.getFilterValue()) != null && _column$getFilterValu2[1]))
2402
2465
  }, React__default.createElement("span", null, React__default.createElement(material.Tooltip, {
2403
2466
  arrow: true,
@@ -3551,9 +3614,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
3551
3614
 
3552
3615
  var _useState14 = React.useState(function () {
3553
3616
  return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
3554
- var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
3617
+ var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _ref4;
3555
3618
 
3556
- return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
3619
+ return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : getDefaultColumnFilterFn(col), _ref4;
3557
3620
  })));
3558
3621
  }),
3559
3622
  currentFilterFns = _useState14[0],