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.
@@ -1,7 +1,7 @@
1
1
  import React, { useMemo, useState, useCallback, Fragment, useRef, useLayoutEffect, useEffect } from 'react';
2
2
  import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
3
3
  import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
4
- import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
4
+ import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
5
5
  import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
6
6
  import { useVirtualizer } from '@tanstack/react-virtual';
7
7
 
@@ -52,6 +52,9 @@ var MRT_DefaultLocalization_EN = {
52
52
  edit: 'Edit',
53
53
  expand: 'Expand',
54
54
  expandAll: 'Expand all',
55
+ filterArrIncludes: 'Includes',
56
+ filterArrIncludesAll: 'Includes all',
57
+ filterArrIncludesSome: 'Includes',
55
58
  filterBetween: 'Between',
56
59
  filterBetweenInclusive: 'Between Inclusive',
57
60
  filterByColumn: 'Filter by {column}',
@@ -59,15 +62,20 @@ var MRT_DefaultLocalization_EN = {
59
62
  filterEmpty: 'Empty',
60
63
  filterEndsWith: 'Ends With',
61
64
  filterEquals: 'Equals',
65
+ filterEqualsString: 'Equals',
62
66
  filterFuzzy: 'Fuzzy',
63
67
  filterGreaterThan: 'Greater Than',
64
68
  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
69
+ filterInNumberRange: 'Between',
70
+ filterIncludesString: 'Contains',
71
+ filterIncludesStringSensitive: 'Contains',
65
72
  filterLessThan: 'Less Than',
66
73
  filterLessThanOrEqualTo: 'Less Than Or Equal To',
67
74
  filterMode: 'Filter Mode: {filterType}',
68
75
  filterNotEmpty: 'Not Empty',
69
76
  filterNotEquals: 'Not Equals',
70
77
  filterStartsWith: 'Starts With',
78
+ filterWeakEquals: 'Equals',
71
79
  filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
72
80
  grab: 'Grab',
73
81
  groupByColumn: 'Group by {column}',
@@ -77,6 +85,7 @@ var MRT_DefaultLocalization_EN = {
77
85
  max: 'Max',
78
86
  min: 'Min',
79
87
  move: 'Move',
88
+ or: 'or',
80
89
  pinToLeft: 'Pin to left',
81
90
  pinToRight: 'Pin to right',
82
91
  resetColumnSize: 'Reset column size',
@@ -232,6 +241,79 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
232
241
  }))));
233
242
  };
234
243
 
244
+ var internalFilterOptions = function internalFilterOptions(localization) {
245
+ return [{
246
+ option: 'fuzzy',
247
+ symbol: '≈',
248
+ label: localization.filterFuzzy,
249
+ divider: false
250
+ }, {
251
+ option: 'contains',
252
+ symbol: '*',
253
+ label: localization.filterContains,
254
+ divider: false
255
+ }, {
256
+ option: 'startsWith',
257
+ symbol: 'a',
258
+ label: localization.filterStartsWith,
259
+ divider: false
260
+ }, {
261
+ option: 'endsWith',
262
+ symbol: 'z',
263
+ label: localization.filterEndsWith,
264
+ divider: true
265
+ }, {
266
+ option: 'equals',
267
+ symbol: '=',
268
+ label: localization.filterEquals,
269
+ divider: false
270
+ }, {
271
+ option: 'notEquals',
272
+ symbol: '≠',
273
+ label: localization.filterNotEquals,
274
+ divider: true
275
+ }, {
276
+ option: 'between',
277
+ symbol: '⇿',
278
+ label: localization.filterBetween,
279
+ divider: false
280
+ }, {
281
+ option: 'betweenInclusive',
282
+ symbol: '⬌',
283
+ label: localization.filterBetweenInclusive,
284
+ divider: true
285
+ }, {
286
+ option: 'greaterThan',
287
+ symbol: '>',
288
+ label: localization.filterGreaterThan,
289
+ divider: false
290
+ }, {
291
+ option: 'greaterThanOrEqualTo',
292
+ symbol: '≥',
293
+ label: localization.filterGreaterThanOrEqualTo,
294
+ divider: false
295
+ }, {
296
+ option: 'lessThan',
297
+ symbol: '<',
298
+ label: localization.filterLessThan,
299
+ divider: false
300
+ }, {
301
+ option: 'lessThanOrEqualTo',
302
+ symbol: '≤',
303
+ label: localization.filterLessThanOrEqualTo,
304
+ divider: true
305
+ }, {
306
+ option: 'empty',
307
+ symbol: '∅',
308
+ label: localization.filterEmpty,
309
+ divider: false
310
+ }, {
311
+ option: 'notEmpty',
312
+ symbol: '!∅',
313
+ label: localization.filterNotEmpty,
314
+ divider: false
315
+ }];
316
+ };
235
317
  var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
236
318
  var _columnDef$columnFilt;
237
319
 
@@ -261,78 +343,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
261
343
 
262
344
  var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
263
345
  var filterOptions = useMemo(function () {
264
- return [{
265
- option: 'fuzzy',
266
- symbol: '≈',
267
- label: localization.filterFuzzy,
268
- divider: false
269
- }, {
270
- option: 'contains',
271
- symbol: '*',
272
- label: localization.filterContains,
273
- divider: false
274
- }, {
275
- option: 'startsWith',
276
- symbol: 'a',
277
- label: localization.filterStartsWith,
278
- divider: false
279
- }, {
280
- option: 'endsWith',
281
- symbol: 'z',
282
- label: localization.filterEndsWith,
283
- divider: true
284
- }, {
285
- option: 'equals',
286
- symbol: '=',
287
- label: localization.filterEquals,
288
- divider: false
289
- }, {
290
- option: 'notEquals',
291
- symbol: '≠',
292
- label: localization.filterNotEquals,
293
- divider: true
294
- }, {
295
- option: 'between',
296
- symbol: '⇿',
297
- label: localization.filterBetween,
298
- divider: false
299
- }, {
300
- option: 'betweenInclusive',
301
- symbol: '⬌',
302
- label: localization.filterBetweenInclusive,
303
- divider: true
304
- }, {
305
- option: 'greaterThan',
306
- symbol: '>',
307
- label: localization.filterGreaterThan,
308
- divider: false
309
- }, {
310
- option: 'greaterThanOrEqualTo',
311
- symbol: '≥',
312
- label: localization.filterGreaterThanOrEqualTo,
313
- divider: false
314
- }, {
315
- option: 'lessThan',
316
- symbol: '<',
317
- label: localization.filterLessThan,
318
- divider: false
319
- }, {
320
- option: 'lessThanOrEqualTo',
321
- symbol: '≤',
322
- label: localization.filterLessThanOrEqualTo,
323
- divider: true
324
- }, {
325
- option: 'empty',
326
- symbol: '∅',
327
- label: localization.filterEmpty,
328
- divider: false
329
- }, {
330
- option: 'notEmpty',
331
- symbol: '!∅',
332
- label: localization.filterNotEmpty,
333
- divider: false
334
- }].filter(function (filterType) {
335
- return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterType.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && ['fuzzy', 'contains'].includes(filterType.option);
346
+ return internalFilterOptions(localization).filter(function (filterOption) {
347
+ return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterOption.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterOption.option)) && ['fuzzy', 'contains'].includes(filterOption.option);
336
348
  });
337
349
  }, []);
338
350
 
@@ -699,7 +711,9 @@ var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
699
711
  if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
700
712
  var _MRT_FilterFns$curren;
701
713
 
702
- columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy;
714
+ columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy; //@ts-ignore
715
+
716
+ columnDef._filterFn = currentFilterFns[columnDef.id];
703
717
  }
704
718
 
705
719
  if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn)) {
@@ -730,6 +744,12 @@ var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
730
744
  return getColumnId(columnDef);
731
745
  }), getTrailingDisplayColumnIds(props)).filter(Boolean);
732
746
  };
747
+ var getDefaultColumnFilterFn = function getDefaultColumnFilterFn(columnDef) {
748
+ if (columnDef.filterVariant === 'multiSelect') return 'arrIncludesSome';
749
+ if (columnDef.filterVariant === 'select') return 'equals';
750
+ if (columnDef.filterVariant === 'range') return 'betweenInclusive';
751
+ return 'fuzzy';
752
+ };
733
753
 
734
754
  var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
735
755
  var _column$columns2;
@@ -2117,7 +2137,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2117
2137
  var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
2118
2138
 
2119
2139
  var header = _ref.header,
2120
- inputIndex = _ref.inputIndex,
2140
+ rangeFilterIndex = _ref.rangeFilterIndex,
2121
2141
  table = _ref.table;
2122
2142
  var getState = table.getState,
2123
2143
  _table$options = table.options,
@@ -2136,25 +2156,39 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2136
2156
  var _getState = getState(),
2137
2157
  currentFilterFns = _getState.currentFilterFns;
2138
2158
 
2139
- var _useState = useState(null),
2140
- anchorEl = _useState[0],
2141
- setAnchorEl = _useState[1];
2142
-
2143
2159
  var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps({
2144
2160
  column: column,
2145
- table: table
2161
+ table: table,
2162
+ rangeFilterIndex: rangeFilterIndex
2146
2163
  }) : muiTableHeadCellFilterTextFieldProps;
2147
2164
  var mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function ? columnDef.muiTableHeadCellFilterTextFieldProps({
2148
2165
  column: column,
2149
- table: table
2166
+ table: table,
2167
+ rangeFilterIndex: rangeFilterIndex
2150
2168
  }) : columnDef.muiTableHeadCellFilterTextFieldProps;
2151
2169
 
2152
2170
  var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
2153
2171
 
2172
+ var isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
2173
+ var isSelectFilter = columnDef.filterVariant === 'select';
2174
+ var isMultiSelectFilter = columnDef.filterVariant === 'multiSelect';
2175
+ var isTextboxFilter = !isSelectFilter && !isMultiSelectFilter;
2176
+ var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2177
+ var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (rangeFilterIndex != null ? rangeFilterIndex : '');
2178
+ var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
2179
+ 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)))] : '';
2180
+ 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 : '';
2181
+ var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
2182
+ var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !rangeFilterIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
2183
+
2184
+ var _useState = useState(null),
2185
+ anchorEl = _useState[0],
2186
+ setAnchorEl = _useState[1];
2187
+
2154
2188
  var _useState2 = useState(function () {
2155
- var _column$getFilterValu, _column$getFilterValu2, _column$getFilterValu3;
2189
+ var _column$getFilterValu, _column$getFilterValu2;
2156
2190
 
2157
- 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 : '';
2191
+ return isMultiSelectFilter ? column.getFilterValue() || [] : isRangeFilter ? ((_column$getFilterValu = column.getFilterValue()) == null ? void 0 : _column$getFilterValu[rangeFilterIndex]) || [] : (_column$getFilterValu2 = column.getFilterValue()) != null ? _column$getFilterValu2 : '';
2158
2192
  }),
2159
2193
  filterValue = _useState2[0],
2160
2194
  setFilterValue = _useState2[1];
@@ -2162,41 +2196,40 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2162
2196
  var handleChangeDebounced = useCallback(debounce(function (event) {
2163
2197
  var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
2164
2198
 
2165
- if (inputIndex !== undefined) {
2199
+ if (isRangeFilter) {
2166
2200
  column.setFilterValue(function (old) {
2167
2201
  var newFilterValues = old != null ? old : ['', ''];
2168
- newFilterValues[inputIndex] = value;
2202
+ newFilterValues[rangeFilterIndex] = value;
2169
2203
  return newFilterValues;
2170
2204
  });
2171
2205
  } else {
2172
2206
  column.setFilterValue(value != null ? value : undefined);
2173
2207
  }
2174
- }, 200), []);
2208
+ }, isTextboxFilter ? 200 : 1), []);
2175
2209
 
2176
2210
  var handleChange = function handleChange(event) {
2177
2211
  setFilterValue(event.target.value);
2178
2212
  handleChangeDebounced(event);
2179
2213
  };
2180
2214
 
2181
- var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
2182
- setAnchorEl(event.currentTarget);
2183
- };
2184
-
2185
2215
  var handleClear = function handleClear() {
2186
- setFilterValue('');
2187
-
2188
- if (inputIndex !== undefined) {
2216
+ if (isMultiSelectFilter) {
2217
+ setFilterValue([]);
2218
+ column.setFilterValue([]);
2219
+ } else if (isRangeFilter) {
2220
+ setFilterValue('');
2189
2221
  column.setFilterValue(function (old) {
2190
2222
  var newFilterValues = old != null ? old : ['', ''];
2191
- newFilterValues[inputIndex] = undefined;
2223
+ newFilterValues[rangeFilterIndex] = undefined;
2192
2224
  return newFilterValues;
2193
2225
  });
2194
2226
  } else {
2227
+ setFilterValue('');
2195
2228
  column.setFilterValue(undefined);
2196
2229
  }
2197
2230
  };
2198
2231
 
2199
- var handleClearFilterChip = function handleClearFilterChip() {
2232
+ var handleClearEmptyFilterChip = function handleClearEmptyFilterChip() {
2200
2233
  setFilterValue('');
2201
2234
  column.setFilterValue(undefined);
2202
2235
  setCurrentFilterFns(function (prev) {
@@ -2206,6 +2239,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2206
2239
  });
2207
2240
  };
2208
2241
 
2242
+ var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
2243
+ setAnchorEl(event.currentTarget);
2244
+ };
2245
+
2209
2246
  if (columnDef.Filter) {
2210
2247
  return React.createElement(React.Fragment, null, columnDef.Filter == null ? void 0 : columnDef.Filter({
2211
2248
  header: header,
@@ -2213,14 +2250,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2213
2250
  }));
2214
2251
  }
2215
2252
 
2216
- var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
2217
- var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2218
- var isSelectFilter = !!columnDef.filterSelectOptions;
2219
- var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
2220
- localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
2221
- 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 : '';
2222
- var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
2223
- var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
2224
2253
  return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
2225
2254
  fullWidth: true,
2226
2255
  id: filterId,
@@ -2244,13 +2273,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2244
2273
  }
2245
2274
  },
2246
2275
  margin: "none",
2247
- placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
2276
+ placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter ? undefined : filterPlaceholder,
2248
2277
  onChange: handleChange,
2249
2278
  onClick: function onClick(e) {
2250
2279
  return e.stopPropagation();
2251
2280
  },
2252
- select: isSelectFilter,
2253
- value: filterValue != null ? filterValue : '',
2281
+ select: isSelectFilter || isMultiSelectFilter,
2282
+ value: filterValue,
2254
2283
  variant: "standard",
2255
2284
  InputProps: {
2256
2285
  startAdornment: showChangeModeButton ? React.createElement(InputAdornment, {
@@ -2267,14 +2296,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2267
2296
  width: '1.75rem'
2268
2297
  }
2269
2298
  }, React.createElement(FilterListIcon, null)))), filterChipLabel && React.createElement(Chip, {
2270
- onDelete: handleClearFilterChip,
2299
+ onDelete: handleClearEmptyFilterChip,
2271
2300
  label: filterChipLabel
2272
2301
  })) : React.createElement(FilterListIcon, null),
2273
2302
  endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
2274
2303
  position: "end"
2275
2304
  }, React.createElement(Tooltip, {
2276
2305
  arrow: true,
2277
- disableHoverListener: isSelectFilter,
2278
2306
  placement: "right",
2279
2307
  title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
2280
2308
  }, React.createElement("span", null, React.createElement(IconButton, {
@@ -2287,30 +2315,59 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2287
2315
  width: '1.75rem'
2288
2316
  }
2289
2317
  }, React.createElement(CloseIcon, null)))))
2318
+ },
2319
+ SelectProps: {
2320
+ displayEmpty: true,
2321
+ multiple: isMultiSelectFilter,
2322
+ renderValue: isMultiSelectFilter ? function (selected) {
2323
+ return !(selected != null && selected.length) ? React.createElement(Box, {
2324
+ sx: {
2325
+ opacity: 0.5
2326
+ }
2327
+ }, filterPlaceholder) : React.createElement(Box, {
2328
+ sx: {
2329
+ display: 'flex',
2330
+ flexWrap: 'wrap',
2331
+ gap: '2px'
2332
+ }
2333
+ }, selected == null ? void 0 : selected.map(function (value) {
2334
+ return React.createElement(Chip, {
2335
+ key: value,
2336
+ label: value
2337
+ });
2338
+ }));
2339
+ } : undefined
2290
2340
  }
2291
2341
  }, textFieldProps, {
2292
2342
  sx: function sx(theme) {
2293
2343
  return _extends({
2294
2344
  p: 0,
2295
- minWidth: !filterChipLabel ? '8rem' : 'auto',
2345
+ minWidth: !filterChipLabel ? '6rem' : 'auto',
2296
2346
  width: 'calc(100% + 0.5rem)',
2297
2347
  '& .MuiSelect-icon': {
2298
2348
  mr: '1.5rem'
2299
2349
  }
2300
2350
  }, (textFieldProps == null ? void 0 : textFieldProps.sx) instanceof Function ? textFieldProps.sx(theme) : textFieldProps == null ? void 0 : textFieldProps.sx);
2301
2351
  }
2302
- }), isSelectFilter && React.createElement(MenuItem, {
2352
+ }), (isSelectFilter || isMultiSelectFilter) && React.createElement(MenuItem, {
2303
2353
  divider: true,
2304
- disabled: !filterValue,
2354
+ disabled: true,
2355
+ hidden: true,
2305
2356
  value: ""
2306
- }, localization.clearFilter), columnDef == null ? void 0 : (_columnDef$filterSele = columnDef.filterSelectOptions) == null ? void 0 : _columnDef$filterSele.map(function (option) {
2357
+ }, React.createElement(Box, {
2358
+ sx: {
2359
+ opacity: 0.5
2360
+ }
2361
+ }, filterPlaceholder)), columnDef == null ? void 0 : (_columnDef$filterSele = columnDef.filterSelectOptions) == null ? void 0 : _columnDef$filterSele.map(function (option) {
2362
+ var _column$getFilterValu3;
2363
+
2307
2364
  var value;
2308
2365
  var text;
2309
2366
 
2310
- if (typeof option === 'string') {
2367
+ if (typeof option !== 'object') {
2311
2368
  value = option;
2312
2369
  text = option;
2313
- } else if (typeof option === 'object') {
2370
+ } else {
2314
2371
  value = option.value;
2315
2372
  text = option.text;
2316
2373
  }
@@ -2318,7 +2375,12 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2318
2375
  return React.createElement(MenuItem, {
2319
2376
  key: value,
2320
2377
  value: value
2321
- }, text);
2378
+ }, isMultiSelectFilter && React.createElement(Checkbox, {
2379
+ checked: ((_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : []).includes(value),
2380
+ sx: {
2381
+ mr: '0.5rem'
2382
+ }
2383
+ }), React.createElement(ListItemText, null, text));
2322
2384
  })), React.createElement(MRT_FilterOptionMenu, {
2323
2385
  anchorEl: anchorEl,
2324
2386
  header: header,
@@ -2338,11 +2400,11 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
2338
2400
  }
2339
2401
  }, React.createElement(MRT_FilterTextField, {
2340
2402
  header: header,
2341
- inputIndex: 0,
2403
+ rangeFilterIndex: 0,
2342
2404
  table: table
2343
2405
  }), React.createElement(MRT_FilterTextField, {
2344
2406
  header: header,
2345
- inputIndex: 1,
2407
+ rangeFilterIndex: 1,
2346
2408
  table: table
2347
2409
  }));
2348
2410
  };
@@ -2361,7 +2423,7 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
2361
2423
  "in": showColumnFilters,
2362
2424
  mountOnEnter: true,
2363
2425
  unmountOnExit: true
2364
- }, currentFilterFns[column.id] === 'between' ? React.createElement(MRT_FilterRangeFields, {
2426
+ }, ['between', 'betweenInclusive', 'inNumberRange'].includes(currentFilterFns[column.id]) ? React.createElement(MRT_FilterRangeFields, {
2365
2427
  header: header,
2366
2428
  table: table
2367
2429
  }) : React.createElement(MRT_FilterTextField, {
@@ -2385,12 +2447,13 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
2385
2447
 
2386
2448
  var column = header.column;
2387
2449
  var columnDef = column.columnDef;
2450
+ var isRangeFilter = ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
2388
2451
  var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2389
2452
  var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', // @ts-ignore
2390
- 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('" "', '');
2453
+ 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('" "', '');
2391
2454
  return React.createElement(Grow, {
2392
2455
  unmountOnExit: true,
2393
- "in": !!column.getFilterValue() && currentFilterOption !== 'between' || currentFilterOption === 'between' && ( // @ts-ignore
2456
+ "in": !!column.getFilterValue() && isRangeFilter || !isRangeFilter && ( // @ts-ignore
2394
2457
  !!((_column$getFilterValu = column.getFilterValue()) != null && _column$getFilterValu[0]) || !!((_column$getFilterValu2 = column.getFilterValue()) != null && _column$getFilterValu2[1]))
2395
2458
  }, React.createElement("span", null, React.createElement(Tooltip, {
2396
2459
  arrow: true,
@@ -3544,9 +3607,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
3544
3607
 
3545
3608
  var _useState14 = useState(function () {
3546
3609
  return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
3547
- 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;
3610
+ 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;
3548
3611
 
3549
- 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;
3612
+ 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;
3550
3613
  })));
3551
3614
  }),
3552
3615
  currentFilterFns = _useState14[0],