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.
- package/dist/MaterialReactTable.d.ts +6 -2
- package/dist/column.utils.d.ts +1 -0
- package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
- package/dist/localization.d.ts +9 -0
- package/dist/material-react-table.cjs.development.js +184 -121
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +185 -122
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_FilterOptionMenu.d.ts +7 -0
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +6 -0
- package/src/column.utils.ts +13 -0
- package/src/head/MRT_TableHeadCellFilterContainer.tsx +3 -1
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +8 -3
- package/src/inputs/MRT_FilterRangeFields.tsx +2 -2
- package/src/inputs/MRT_FilterTextField.tsx +123 -82
- package/src/localization.ts +18 -0
- package/src/menus/MRT_FilterOptionMenu.tsx +101 -99
- package/src/table/MRT_TableRoot.tsx +2 -1
@@ -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
|
-
|
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
|
2189
|
+
var _column$getFilterValu, _column$getFilterValu2;
|
2156
2190
|
|
2157
|
-
return
|
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 (
|
2199
|
+
if (isRangeFilter) {
|
2166
2200
|
column.setFilterValue(function (old) {
|
2167
2201
|
var newFilterValues = old != null ? old : ['', ''];
|
2168
|
-
newFilterValues[
|
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
|
-
|
2187
|
-
|
2188
|
-
|
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[
|
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
|
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
|
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:
|
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 ? '
|
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:
|
2354
|
+
disabled: true,
|
2355
|
+
hidden: true,
|
2305
2356
|
value: ""
|
2306
|
-
},
|
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
|
2367
|
+
if (typeof option !== 'object') {
|
2311
2368
|
value = option;
|
2312
2369
|
text = option;
|
2313
|
-
} else
|
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
|
-
},
|
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
|
-
|
2403
|
+
rangeFilterIndex: 0,
|
2342
2404
|
table: table
|
2343
2405
|
}), React.createElement(MRT_FilterTextField, {
|
2344
2406
|
header: header,
|
2345
|
-
|
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]
|
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() &&
|
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,
|
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 :
|
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],
|