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
@@ -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>;
|
package/dist/column.utils.d.ts
CHANGED
@@ -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;
|
package/dist/localization.d.ts
CHANGED
@@ -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
|
-
|
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
|
2196
|
+
var _column$getFilterValu, _column$getFilterValu2;
|
2163
2197
|
|
2164
|
-
return
|
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 (
|
2206
|
+
if (isRangeFilter) {
|
2173
2207
|
column.setFilterValue(function (old) {
|
2174
2208
|
var newFilterValues = old != null ? old : ['', ''];
|
2175
|
-
newFilterValues[
|
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
|
-
|
2194
|
-
|
2195
|
-
|
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[
|
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
|
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
|
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:
|
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 ? '
|
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:
|
2361
|
+
disabled: true,
|
2362
|
+
hidden: true,
|
2312
2363
|
value: ""
|
2313
|
-
},
|
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
|
2374
|
+
if (typeof option !== 'object') {
|
2318
2375
|
value = option;
|
2319
2376
|
text = option;
|
2320
|
-
} else
|
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
|
-
},
|
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
|
-
|
2410
|
+
rangeFilterIndex: 0,
|
2349
2411
|
table: table
|
2350
2412
|
}), React__default.createElement(MRT_FilterTextField, {
|
2351
2413
|
header: header,
|
2352
|
-
|
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]
|
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() &&
|
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,
|
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 :
|
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],
|