material-react-table 0.5.8 → 0.6.1
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 +1 -10
- package/dist/body/MRT_TableBodyCell.d.ts +1 -1
- package/dist/body/MRT_TableBodyRow.d.ts +1 -1
- package/dist/body/MRT_TableDetailPanel.d.ts +1 -1
- package/dist/buttons/MRT_EditActionButtons.d.ts +1 -1
- package/dist/buttons/MRT_ExpandButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleColumnActionMenuButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +1 -1
- package/dist/enums.d.ts +12 -0
- package/dist/filtersFNs.d.ts +20 -0
- package/dist/footer/MRT_TableFooterCell.d.ts +1 -1
- package/dist/footer/MRT_TableFooterRow.d.ts +1 -1
- package/dist/head/MRT_TableHeadCell.d.ts +1 -1
- package/dist/head/MRT_TableHeadRow.d.ts +1 -1
- package/dist/inputs/MRT_EditCellTextField.d.ts +1 -1
- package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
- package/dist/inputs/MRT_SelectCheckbox.d.ts +1 -1
- package/dist/localization.d.ts +43 -44
- package/dist/material-react-table.cjs.development.js +375 -227
- 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 +367 -221
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +1 -1
- package/dist/menus/MRT_FilterTypeMenu.d.ts +1 -1
- package/dist/menus/MRT_RowActionMenu.d.ts +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +3 -2
- package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +8 -0
- package/dist/useMRT.d.ts +1 -1
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +1 -11
- package/src/body/MRT_TableBody.tsx +1 -1
- package/src/body/MRT_TableBodyCell.tsx +1 -1
- package/src/body/MRT_TableBodyRow.tsx +1 -1
- package/src/body/MRT_TableDetailPanel.tsx +1 -1
- package/src/buttons/MRT_EditActionButtons.tsx +5 -8
- package/src/buttons/MRT_ExpandAllButton.tsx +2 -2
- package/src/buttons/MRT_ExpandButton.tsx +3 -3
- package/src/buttons/MRT_FullScreenToggleButton.tsx +2 -2
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +4 -52
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +4 -3
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -2
- package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -2
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +4 -8
- package/src/buttons/MRT_ToggleSearchButton.tsx +1 -1
- package/src/enums.ts +12 -0
- package/src/filtersFNs.ts +31 -0
- package/src/footer/MRT_TableFooter.tsx +1 -1
- package/src/footer/MRT_TableFooterCell.tsx +1 -1
- package/src/footer/MRT_TableFooterRow.tsx +1 -1
- package/src/head/MRT_TableHead.tsx +1 -1
- package/src/head/MRT_TableHeadCell.tsx +20 -7
- package/src/head/MRT_TableHeadCellActions.tsx +1 -1
- package/src/head/MRT_TableHeadRow.tsx +1 -1
- package/src/inputs/MRT_EditCellTextField.tsx +1 -1
- package/src/inputs/MRT_FilterTextField.tsx +35 -11
- package/src/inputs/MRT_SearchTextField.tsx +3 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +5 -5
- package/src/localization.ts +87 -88
- package/src/menus/MRT_ColumnActionMenu.tsx +60 -15
- package/src/menus/MRT_FilterTypeMenu.tsx +45 -11
- package/src/menus/MRT_RowActionMenu.tsx +2 -2
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +53 -36
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +57 -0
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +3 -3
- package/src/useMRT.tsx +22 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { useState, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
|
|
1
|
+
import React, { useState, useMemo, useCallback, useContext, createContext, Fragment, useRef, useEffect } from 'react';
|
|
2
2
|
import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
|
|
3
3
|
import { matchSorter } from 'match-sorter';
|
|
4
|
-
import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, Box, TableCell, TableSortLabel,
|
|
4
|
+
import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
|
|
5
5
|
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
|
|
6
6
|
import CancelIcon from '@mui/icons-material/Cancel';
|
|
7
7
|
import ClearAllIcon from '@mui/icons-material/ClearAll';
|
|
@@ -97,6 +97,21 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
97
97
|
return target;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
+
var fuzzySearchFN = function fuzzySearchFN(rows, columnIds, filterValue) {
|
|
101
|
+
return matchSorter(rows, filterValue.toString().trim(), {
|
|
102
|
+
keys: columnIds.map(function (c) {
|
|
103
|
+
return "values." + c;
|
|
104
|
+
}),
|
|
105
|
+
sorter: function sorter(rankedItems) {
|
|
106
|
+
return rankedItems;
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
fuzzySearchFN.autoRemove = function (val) {
|
|
112
|
+
return !val;
|
|
113
|
+
};
|
|
114
|
+
|
|
100
115
|
var fuzzyFilterFN = function fuzzyFilterFN(rows, id, filterValue) {
|
|
101
116
|
return matchSorter(rows, filterValue.toString().trim(), {
|
|
102
117
|
keys: ["values." + id],
|
|
@@ -160,6 +175,26 @@ notEqualsFilterFN.autoRemove = function (val) {
|
|
|
160
175
|
return !val;
|
|
161
176
|
};
|
|
162
177
|
|
|
178
|
+
var greaterThanFilterFN = function greaterThanFilterFN(rows, id, filterValue) {
|
|
179
|
+
return rows.filter(function (row) {
|
|
180
|
+
return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] > +filterValue : row.values[id].toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
|
|
181
|
+
});
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
greaterThanFilterFN.autoRemove = function (val) {
|
|
185
|
+
return !val;
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
var lessThanFilterFN = function lessThanFilterFN(rows, id, filterValue) {
|
|
189
|
+
return rows.filter(function (row) {
|
|
190
|
+
return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] < +filterValue : row.values[id].toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
|
|
191
|
+
});
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
lessThanFilterFN.autoRemove = function (val) {
|
|
195
|
+
return !val;
|
|
196
|
+
};
|
|
197
|
+
|
|
163
198
|
var emptyFilterFN = function emptyFilterFN(rows, id, _filterValue) {
|
|
164
199
|
return rows.filter(function (row) {
|
|
165
200
|
return !row.values[id].toString().toLowerCase().trim();
|
|
@@ -186,6 +221,9 @@ var defaultFilterFNs = {
|
|
|
186
221
|
endsWith: endsWithFilterFN,
|
|
187
222
|
equals: equalsFilterFN,
|
|
188
223
|
fuzzy: fuzzyFilterFN,
|
|
224
|
+
globalFuzzy: fuzzySearchFN,
|
|
225
|
+
greaterThan: greaterThanFilterFN,
|
|
226
|
+
lessThan: lessThanFilterFN,
|
|
189
227
|
notEmpty: notEmptyFilterFN,
|
|
190
228
|
notEquals: notEqualsFilterFN,
|
|
191
229
|
startsWith: startsWithFilterFN
|
|
@@ -196,7 +234,7 @@ var MaterialReactTableContext = /*#__PURE__*/function () {
|
|
|
196
234
|
}();
|
|
197
235
|
|
|
198
236
|
var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
199
|
-
var _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4;
|
|
237
|
+
var _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$globalFilter;
|
|
200
238
|
|
|
201
239
|
var hooks = [useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
|
|
202
240
|
if (props.enableColumnResizing) hooks.unshift(useResizeColumns, useFlexLayout);
|
|
@@ -224,9 +262,35 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
224
262
|
var filterTypes = useMemo(function () {
|
|
225
263
|
return _extends({}, defaultFilterFNs, props.filterTypes);
|
|
226
264
|
}, [props.filterTypes]);
|
|
265
|
+
var findLowestLevelCols = useCallback(function () {
|
|
266
|
+
var lowestLevelColumns = props.columns;
|
|
267
|
+
var currentCols = props.columns;
|
|
268
|
+
|
|
269
|
+
while (!!currentCols.length && currentCols.some(function (col) {
|
|
270
|
+
return col.columns;
|
|
271
|
+
})) {
|
|
272
|
+
var nextCols = currentCols.filter(function (col) {
|
|
273
|
+
return !!col.columns;
|
|
274
|
+
}).map(function (col) {
|
|
275
|
+
return col.columns;
|
|
276
|
+
}).flat();
|
|
277
|
+
|
|
278
|
+
if (nextCols.every(function (col) {
|
|
279
|
+
return !col.columns;
|
|
280
|
+
})) {
|
|
281
|
+
lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
currentCols = nextCols;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
return lowestLevelColumns.filter(function (col) {
|
|
288
|
+
return !col.columns;
|
|
289
|
+
});
|
|
290
|
+
}, [props.columns]);
|
|
227
291
|
|
|
228
292
|
var _useState6 = useState(function () {
|
|
229
|
-
return Object.assign.apply(Object, [{}].concat(
|
|
293
|
+
return Object.assign.apply(Object, [{}].concat(findLowestLevelCols().map(function (c) {
|
|
230
294
|
var _ref, _c$filter, _props$initialState5, _props$initialState5$, _ref2;
|
|
231
295
|
|
|
232
296
|
return _ref2 = {}, _ref2[c.accessor] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[c.accessor]) != null ? _ref : !!c.filterSelectOptions ? 'equals' : 'fuzzy', _ref2;
|
|
@@ -236,7 +300,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
236
300
|
setCurrentFilterTypes = _useState6[1];
|
|
237
301
|
|
|
238
302
|
var columns = useMemo(function () {
|
|
239
|
-
return
|
|
303
|
+
return findLowestLevelCols().map(function (column) {
|
|
240
304
|
column.filter = filterTypes[currentFilterTypes[column.accessor]];
|
|
241
305
|
return column;
|
|
242
306
|
});
|
|
@@ -245,7 +309,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
245
309
|
columns: columns,
|
|
246
310
|
// @ts-ignore
|
|
247
311
|
filterTypes: filterTypes,
|
|
248
|
-
|
|
312
|
+
globalFilter: (_props$globalFilter = props.globalFilter) != null ? _props$globalFilter : 'globalFuzzy',
|
|
249
313
|
useControlledState: function useControlledState(state) {
|
|
250
314
|
return useMemo(function () {
|
|
251
315
|
return _extends({}, state, {
|
|
@@ -295,6 +359,21 @@ var useMRT = function useMRT() {
|
|
|
295
359
|
return useContext(MaterialReactTableContext);
|
|
296
360
|
};
|
|
297
361
|
|
|
362
|
+
var MRT_FILTER_TYPE;
|
|
363
|
+
|
|
364
|
+
(function (MRT_FILTER_TYPE) {
|
|
365
|
+
MRT_FILTER_TYPE["CONTAINS"] = "contains";
|
|
366
|
+
MRT_FILTER_TYPE["EMPTY"] = "empty";
|
|
367
|
+
MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
|
|
368
|
+
MRT_FILTER_TYPE["EQUALS"] = "equals";
|
|
369
|
+
MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
|
|
370
|
+
MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
|
|
371
|
+
MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
|
|
372
|
+
MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
|
|
373
|
+
MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
|
|
374
|
+
MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
|
|
375
|
+
})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
|
|
376
|
+
|
|
298
377
|
var commonMenuItemStyles = {
|
|
299
378
|
py: '6px',
|
|
300
379
|
my: 0,
|
|
@@ -314,36 +393,54 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
|
|
|
314
393
|
var filterTypes = useMemo(function () {
|
|
315
394
|
return [{
|
|
316
395
|
type: MRT_FILTER_TYPE.FUZZY,
|
|
317
|
-
label: localization.
|
|
318
|
-
divider: false
|
|
396
|
+
label: localization.filterFuzzy,
|
|
397
|
+
divider: false,
|
|
398
|
+
fn: fuzzyFilterFN
|
|
319
399
|
}, {
|
|
320
400
|
type: MRT_FILTER_TYPE.CONTAINS,
|
|
321
|
-
label: localization.
|
|
322
|
-
divider: true
|
|
401
|
+
label: localization.filterContains,
|
|
402
|
+
divider: true,
|
|
403
|
+
fn: containsFilterFN
|
|
323
404
|
}, {
|
|
324
405
|
type: MRT_FILTER_TYPE.STARTS_WITH,
|
|
325
|
-
label: localization.
|
|
326
|
-
divider: false
|
|
406
|
+
label: localization.filterStartsWith,
|
|
407
|
+
divider: false,
|
|
408
|
+
fn: startsWithFilterFN
|
|
327
409
|
}, {
|
|
328
410
|
type: MRT_FILTER_TYPE.ENDS_WITH,
|
|
329
|
-
label: localization.
|
|
330
|
-
divider: true
|
|
411
|
+
label: localization.filterEndsWith,
|
|
412
|
+
divider: true,
|
|
413
|
+
fn: endsWithFilterFN
|
|
331
414
|
}, {
|
|
332
415
|
type: MRT_FILTER_TYPE.EQUALS,
|
|
333
|
-
label: localization.
|
|
334
|
-
divider: false
|
|
416
|
+
label: localization.filterEquals,
|
|
417
|
+
divider: false,
|
|
418
|
+
fn: equalsFilterFN
|
|
335
419
|
}, {
|
|
336
420
|
type: MRT_FILTER_TYPE.NOT_EQUALS,
|
|
337
|
-
label: localization.
|
|
338
|
-
divider: true
|
|
421
|
+
label: localization.filterNotEquals,
|
|
422
|
+
divider: true,
|
|
423
|
+
fn: notEqualsFilterFN
|
|
424
|
+
}, {
|
|
425
|
+
type: MRT_FILTER_TYPE.GREATER_THAN,
|
|
426
|
+
label: localization.filterGreaterThan,
|
|
427
|
+
divider: false,
|
|
428
|
+
fn: greaterThanFilterFN
|
|
429
|
+
}, {
|
|
430
|
+
type: MRT_FILTER_TYPE.LESS_THAN,
|
|
431
|
+
label: localization.filterLessThan,
|
|
432
|
+
divider: true,
|
|
433
|
+
fn: lessThanFilterFN
|
|
339
434
|
}, {
|
|
340
435
|
type: MRT_FILTER_TYPE.EMPTY,
|
|
341
|
-
label: localization.
|
|
342
|
-
divider: false
|
|
436
|
+
label: localization.filterEmpty,
|
|
437
|
+
divider: false,
|
|
438
|
+
fn: emptyFilterFN
|
|
343
439
|
}, {
|
|
344
440
|
type: MRT_FILTER_TYPE.NOT_EMPTY,
|
|
345
|
-
label: localization.
|
|
346
|
-
divider: false
|
|
441
|
+
label: localization.filterNotEmpty,
|
|
442
|
+
divider: false,
|
|
443
|
+
fn: notEmptyFilterFN
|
|
347
444
|
}];
|
|
348
445
|
}, []);
|
|
349
446
|
|
|
@@ -379,14 +476,15 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
|
|
|
379
476
|
}, filterTypes.map(function (_ref2, index) {
|
|
380
477
|
var type = _ref2.type,
|
|
381
478
|
label = _ref2.label,
|
|
382
|
-
divider = _ref2.divider
|
|
479
|
+
divider = _ref2.divider,
|
|
480
|
+
fn = _ref2.fn;
|
|
383
481
|
return React.createElement(MenuItem, {
|
|
384
482
|
divider: divider,
|
|
385
483
|
key: index,
|
|
386
484
|
onClick: function onClick() {
|
|
387
485
|
return handleSelectFilterType(type);
|
|
388
486
|
},
|
|
389
|
-
selected: type === filterType,
|
|
487
|
+
selected: type === filterType || fn === filterType,
|
|
390
488
|
sx: commonMenuItemStyles,
|
|
391
489
|
value: type
|
|
392
490
|
}, label);
|
|
@@ -394,7 +492,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
|
|
|
394
492
|
};
|
|
395
493
|
|
|
396
494
|
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
397
|
-
var _localization$
|
|
495
|
+
var _localization$filterB, _localization$clearFi, _column$filterSelectO;
|
|
398
496
|
|
|
399
497
|
var column = _ref.column;
|
|
400
498
|
|
|
@@ -453,10 +551,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
453
551
|
}
|
|
454
552
|
|
|
455
553
|
var filterType = tableInstance.state.currentFilterTypes[column.id];
|
|
456
|
-
var isCustomFilterType = filterType instanceof Function;
|
|
457
554
|
var isSelectFilter = !!column.filterSelectOptions;
|
|
458
|
-
var filterChipLabel = !
|
|
459
|
-
|
|
555
|
+
var filterChipLabel = !(filterType instanceof Function) && [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType) ? //@ts-ignore
|
|
556
|
+
localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))] : '';
|
|
557
|
+
var filterPlaceholder = (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header));
|
|
460
558
|
return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
|
|
461
559
|
fullWidth: true,
|
|
462
560
|
id: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
|
|
@@ -468,6 +566,14 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
468
566
|
},
|
|
469
567
|
title: filterPlaceholder
|
|
470
568
|
},
|
|
569
|
+
helperText: filterType instanceof Function ? '' : localization.filterMode.replace('{filterType}', // @ts-ignore
|
|
570
|
+
localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]),
|
|
571
|
+
FormHelperTextProps: {
|
|
572
|
+
sx: {
|
|
573
|
+
fontSize: '0.6rem',
|
|
574
|
+
lineHeight: '0.8rem'
|
|
575
|
+
}
|
|
576
|
+
},
|
|
471
577
|
label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
|
|
472
578
|
InputLabelProps: {
|
|
473
579
|
shrink: false,
|
|
@@ -495,7 +601,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
495
601
|
arrow: true,
|
|
496
602
|
title: localization.changeFilterMode
|
|
497
603
|
}, React.createElement("span", null, React.createElement(IconButton, {
|
|
498
|
-
disabled: isCustomFilterType,
|
|
499
604
|
onClick: handleFilterMenuOpen,
|
|
500
605
|
size: "small",
|
|
501
606
|
sx: {
|
|
@@ -504,7 +609,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
504
609
|
}
|
|
505
610
|
}, React.createElement(FilterListIcon, null)))), filterChipLabel && React.createElement(Chip, {
|
|
506
611
|
onDelete: handleClearFilterChip,
|
|
507
|
-
label:
|
|
612
|
+
label: filterChipLabel
|
|
508
613
|
})),
|
|
509
614
|
endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
|
|
510
615
|
position: "end"
|
|
@@ -512,9 +617,9 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
512
617
|
arrow: true,
|
|
513
618
|
disableHoverListener: isSelectFilter,
|
|
514
619
|
placement: "right",
|
|
515
|
-
title: (_localization$
|
|
620
|
+
title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
|
|
516
621
|
}, React.createElement("span", null, React.createElement(IconButton, {
|
|
517
|
-
"aria-label": localization.
|
|
622
|
+
"aria-label": localization.clearFilter,
|
|
518
623
|
disabled: !(filterValue != null && filterValue.length),
|
|
519
624
|
onClick: handleClear,
|
|
520
625
|
size: "small",
|
|
@@ -528,7 +633,8 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
528
633
|
}
|
|
529
634
|
}, textFieldProps, {
|
|
530
635
|
sx: _extends({
|
|
531
|
-
m: '
|
|
636
|
+
m: '-0.25rem',
|
|
637
|
+
p: 0,
|
|
532
638
|
minWidth: !filterChipLabel ? '5rem' : 'auto',
|
|
533
639
|
width: 'calc(100% + 0.5rem)',
|
|
534
640
|
mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
|
|
@@ -540,7 +646,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
540
646
|
divider: true,
|
|
541
647
|
disabled: !filterValue,
|
|
542
648
|
value: ""
|
|
543
|
-
}, localization.
|
|
649
|
+
}, localization.clearFilter), column == null ? void 0 : (_column$filterSelectO = column.filterSelectOptions) == null ? void 0 : _column$filterSelectO.map(function (option) {
|
|
544
650
|
var value;
|
|
545
651
|
var text;
|
|
546
652
|
|
|
@@ -563,6 +669,101 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
563
669
|
}));
|
|
564
670
|
};
|
|
565
671
|
|
|
672
|
+
var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
673
|
+
var _column$columns, _column$columns2, _column$isVisible, _column$columns4;
|
|
674
|
+
|
|
675
|
+
var column = _ref.column,
|
|
676
|
+
isSubMenu = _ref.isSubMenu;
|
|
677
|
+
var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
|
|
678
|
+
var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
|
|
679
|
+
return childColumn.isVisible;
|
|
680
|
+
}));
|
|
681
|
+
var switchChecked = (_column$isVisible = column.isVisible) != null ? _column$isVisible : allChildColumnsVisible;
|
|
682
|
+
|
|
683
|
+
var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
|
|
684
|
+
if (isParentHeader) {
|
|
685
|
+
var _column$columns3;
|
|
686
|
+
|
|
687
|
+
column == null ? void 0 : (_column$columns3 = column.columns) == null ? void 0 : _column$columns3.forEach == null ? void 0 : _column$columns3.forEach(function (childColumn) {
|
|
688
|
+
childColumn.toggleHidden(switchChecked);
|
|
689
|
+
});
|
|
690
|
+
} else {
|
|
691
|
+
column.toggleHidden();
|
|
692
|
+
}
|
|
693
|
+
};
|
|
694
|
+
|
|
695
|
+
return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
|
|
696
|
+
sx: _extends({}, commonMenuItemStyles$1, {
|
|
697
|
+
pl: (column.depth + 0.5) * 2 + "rem"
|
|
698
|
+
})
|
|
699
|
+
}, React.createElement(FormControlLabel, {
|
|
700
|
+
componentsProps: {
|
|
701
|
+
typography: {
|
|
702
|
+
sx: {
|
|
703
|
+
marginBottom: 0
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
},
|
|
707
|
+
checked: switchChecked,
|
|
708
|
+
control: React.createElement(Switch, null),
|
|
709
|
+
disabled: isSubMenu && switchChecked,
|
|
710
|
+
label: column.Header,
|
|
711
|
+
onChange: function onChange() {
|
|
712
|
+
return handleToggleColumnHidden(column);
|
|
713
|
+
}
|
|
714
|
+
})), (_column$columns4 = column.columns) == null ? void 0 : _column$columns4.map(function (c, i) {
|
|
715
|
+
return React.createElement(MRT_ShowHideColumnsMenuItems, {
|
|
716
|
+
key: i + "-" + c.id,
|
|
717
|
+
column: c,
|
|
718
|
+
isSubMenu: isSubMenu
|
|
719
|
+
});
|
|
720
|
+
}));
|
|
721
|
+
};
|
|
722
|
+
|
|
723
|
+
var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
724
|
+
var anchorEl = _ref.anchorEl,
|
|
725
|
+
isSubMenu = _ref.isSubMenu,
|
|
726
|
+
setAnchorEl = _ref.setAnchorEl;
|
|
727
|
+
|
|
728
|
+
var _useMRT = useMRT(),
|
|
729
|
+
localization = _useMRT.localization,
|
|
730
|
+
tableInstance = _useMRT.tableInstance;
|
|
731
|
+
|
|
732
|
+
return React.createElement(Menu, {
|
|
733
|
+
anchorEl: anchorEl,
|
|
734
|
+
open: !!anchorEl,
|
|
735
|
+
onClose: function onClose() {
|
|
736
|
+
return setAnchorEl(null);
|
|
737
|
+
},
|
|
738
|
+
MenuListProps: {
|
|
739
|
+
dense: tableInstance.state.densePadding
|
|
740
|
+
}
|
|
741
|
+
}, React.createElement(Box, {
|
|
742
|
+
sx: {
|
|
743
|
+
display: 'flex',
|
|
744
|
+
justifyContent: isSubMenu ? 'center' : 'space-between',
|
|
745
|
+
p: '0.5rem',
|
|
746
|
+
pt: 0
|
|
747
|
+
}
|
|
748
|
+
}, !isSubMenu && React.createElement(Button, {
|
|
749
|
+
disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
|
|
750
|
+
onClick: function onClick() {
|
|
751
|
+
return tableInstance.toggleHideAllColumns(true);
|
|
752
|
+
}
|
|
753
|
+
}, localization.hideAll), React.createElement(Button, {
|
|
754
|
+
disabled: tableInstance.getToggleHideAllColumnsProps().checked,
|
|
755
|
+
onClick: function onClick() {
|
|
756
|
+
return tableInstance.toggleHideAllColumns(false);
|
|
757
|
+
}
|
|
758
|
+
}, localization.showAll)), React.createElement(Divider, null), tableInstance.columns.map(function (column, index) {
|
|
759
|
+
return React.createElement(MRT_ShowHideColumnsMenuItems, {
|
|
760
|
+
column: column,
|
|
761
|
+
isSubMenu: isSubMenu,
|
|
762
|
+
key: index + "-" + column.id
|
|
763
|
+
});
|
|
764
|
+
}));
|
|
765
|
+
};
|
|
766
|
+
|
|
566
767
|
var commonMenuItemStyles$1 = {
|
|
567
768
|
py: '6px',
|
|
568
769
|
my: 0,
|
|
@@ -575,7 +776,7 @@ var commonListItemStyles = {
|
|
|
575
776
|
alignItems: 'center'
|
|
576
777
|
};
|
|
577
778
|
var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
578
|
-
var _localization$
|
|
779
|
+
var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _tableInstance$state$, _localization$showAll;
|
|
579
780
|
|
|
580
781
|
var anchorEl = _ref.anchorEl,
|
|
581
782
|
column = _ref.column,
|
|
@@ -589,6 +790,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
589
790
|
_useMRT$icons = _useMRT.icons,
|
|
590
791
|
ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
|
|
591
792
|
ClearAllIcon = _useMRT$icons.ClearAllIcon,
|
|
793
|
+
ViewColumnIcon = _useMRT$icons.ViewColumnIcon,
|
|
592
794
|
DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
|
|
593
795
|
FilterListIcon = _useMRT$icons.FilterListIcon,
|
|
594
796
|
FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
|
|
@@ -603,6 +805,10 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
603
805
|
filterMenuAnchorEl = _useState[0],
|
|
604
806
|
setFilterMenuAnchorEl = _useState[1];
|
|
605
807
|
|
|
808
|
+
var _useState2 = useState(null),
|
|
809
|
+
showHideColumnsMenuAnchorEl = _useState2[0],
|
|
810
|
+
setShowHideColumnsMenuAnchorEl = _useState2[1];
|
|
811
|
+
|
|
606
812
|
var handleClearSort = function handleClearSort() {
|
|
607
813
|
column.clearSortBy();
|
|
608
814
|
setAnchorEl(null);
|
|
@@ -649,6 +855,15 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
649
855
|
setFilterMenuAnchorEl(event.currentTarget);
|
|
650
856
|
};
|
|
651
857
|
|
|
858
|
+
var handleShowAllColumns = function handleShowAllColumns() {
|
|
859
|
+
tableInstance.toggleHideAllColumns(false);
|
|
860
|
+
};
|
|
861
|
+
|
|
862
|
+
var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
|
|
863
|
+
event.stopPropagation();
|
|
864
|
+
setShowHideColumnsMenuAnchorEl(event.currentTarget);
|
|
865
|
+
};
|
|
866
|
+
|
|
652
867
|
return React.createElement(Menu, {
|
|
653
868
|
anchorEl: anchorEl,
|
|
654
869
|
open: !!anchorEl,
|
|
@@ -660,21 +875,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
660
875
|
}
|
|
661
876
|
}, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
|
|
662
877
|
disabled: !column.isSorted,
|
|
663
|
-
key:
|
|
878
|
+
key: 0,
|
|
664
879
|
onClick: handleClearSort,
|
|
665
880
|
sx: commonMenuItemStyles$1
|
|
666
881
|
}, React.createElement(Box, {
|
|
667
882
|
sx: commonListItemStyles
|
|
668
|
-
}, React.createElement(ClearAllIcon, null), localization.
|
|
883
|
+
}, React.createElement(ClearAllIcon, null), localization.clearSort)), React.createElement(MenuItem, {
|
|
669
884
|
disabled: column.isSorted && !column.isSortedDesc,
|
|
670
|
-
key:
|
|
885
|
+
key: 1,
|
|
671
886
|
onClick: handleSortAsc,
|
|
672
887
|
sx: commonMenuItemStyles$1
|
|
673
888
|
}, React.createElement(Box, {
|
|
674
889
|
sx: commonListItemStyles
|
|
675
|
-
}, React.createElement(SortIcon, null), (_localization$
|
|
890
|
+
}, React.createElement(SortIcon, null), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
|
|
676
891
|
divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
|
|
677
|
-
key:
|
|
892
|
+
key: 2,
|
|
678
893
|
disabled: column.isSorted && column.isSortedDesc,
|
|
679
894
|
onClick: handleSortDesc,
|
|
680
895
|
sx: commonMenuItemStyles$1
|
|
@@ -684,21 +899,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
684
899
|
style: {
|
|
685
900
|
transform: 'rotate(180deg) scaleX(-1)'
|
|
686
901
|
}
|
|
687
|
-
}), (_localization$
|
|
902
|
+
}), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
|
|
688
903
|
disabled: !column.filterValue,
|
|
689
904
|
key: 0,
|
|
690
905
|
onClick: handleClearFilter,
|
|
691
906
|
sx: commonMenuItemStyles$1
|
|
692
907
|
}, React.createElement(Box, {
|
|
693
908
|
sx: commonListItemStyles
|
|
694
|
-
}, React.createElement(FilterListOffIcon, null), localization.
|
|
909
|
+
}, React.createElement(FilterListOffIcon, null), localization.clearFilter)), React.createElement(MenuItem, {
|
|
695
910
|
divider: enableColumnGrouping || !disableColumnHiding,
|
|
696
911
|
key: 1,
|
|
697
912
|
onClick: handleFilterByColumn,
|
|
698
913
|
sx: commonMenuItemStyles$1
|
|
699
914
|
}, React.createElement(Box, {
|
|
700
915
|
sx: commonListItemStyles
|
|
701
|
-
}, React.createElement(FilterListIcon, null), (_localization$
|
|
916
|
+
}, React.createElement(FilterListIcon, null), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
|
|
702
917
|
onClick: handleOpenFilterModeMenu,
|
|
703
918
|
onMouseEnter: handleOpenFilterModeMenu,
|
|
704
919
|
size: "small",
|
|
@@ -713,18 +928,37 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
713
928
|
onSelect: handleFilterByColumn
|
|
714
929
|
})], enableColumnGrouping && column.canGroupBy && [React.createElement(MenuItem, {
|
|
715
930
|
divider: !disableColumnHiding,
|
|
716
|
-
key:
|
|
931
|
+
key: 0,
|
|
717
932
|
onClick: handleGroupByColumn,
|
|
718
933
|
sx: commonMenuItemStyles$1
|
|
719
934
|
}, React.createElement(Box, {
|
|
720
935
|
sx: commonListItemStyles
|
|
721
|
-
}, React.createElement(DynamicFeedIcon, null), (_localization = localization[column.isGrouped ? '
|
|
722
|
-
key:
|
|
936
|
+
}, React.createElement(DynamicFeedIcon, null), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
|
|
937
|
+
key: 0,
|
|
723
938
|
onClick: handleHideColumn,
|
|
724
939
|
sx: commonMenuItemStyles$1
|
|
725
940
|
}, React.createElement(Box, {
|
|
726
941
|
sx: commonListItemStyles
|
|
727
|
-
}, React.createElement(VisibilityOffIcon, null), (_localization$
|
|
942
|
+
}, React.createElement(VisibilityOffIcon, null), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
|
|
943
|
+
disabled: !((_tableInstance$state$ = tableInstance.state.hiddenColumns) != null && _tableInstance$state$.length),
|
|
944
|
+
key: 1,
|
|
945
|
+
onClick: handleShowAllColumns,
|
|
946
|
+
sx: commonMenuItemStyles$1
|
|
947
|
+
}, React.createElement(Box, {
|
|
948
|
+
sx: commonListItemStyles
|
|
949
|
+
}, React.createElement(ViewColumnIcon, null), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
|
|
950
|
+
onClick: handleOpenShowHideColumnsMenu,
|
|
951
|
+
onMouseEnter: handleOpenShowHideColumnsMenu,
|
|
952
|
+
size: "small",
|
|
953
|
+
sx: {
|
|
954
|
+
p: 0
|
|
955
|
+
}
|
|
956
|
+
}, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
|
|
957
|
+
anchorEl: showHideColumnsMenuAnchorEl,
|
|
958
|
+
isSubMenu: true,
|
|
959
|
+
key: 2,
|
|
960
|
+
setAnchorEl: setShowHideColumnsMenuAnchorEl
|
|
961
|
+
})]);
|
|
728
962
|
};
|
|
729
963
|
|
|
730
964
|
var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
|
|
@@ -748,9 +982,10 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
748
982
|
arrow: true,
|
|
749
983
|
enterDelay: 1000,
|
|
750
984
|
enterNextDelay: 1000,
|
|
751
|
-
|
|
985
|
+
placement: "top",
|
|
986
|
+
title: localization.columnActions
|
|
752
987
|
}, React.createElement(IconButton, {
|
|
753
|
-
"aria-label": localization.
|
|
988
|
+
"aria-label": localization.columnActions,
|
|
754
989
|
onClick: handleClick,
|
|
755
990
|
size: "small",
|
|
756
991
|
sx: {
|
|
@@ -782,7 +1017,7 @@ var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding,
|
|
|
782
1017
|
};
|
|
783
1018
|
};
|
|
784
1019
|
var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
785
|
-
var _column$columns, _localization$
|
|
1020
|
+
var _column$columns, _localization$sortByC, _localization$sortByC2;
|
|
786
1021
|
|
|
787
1022
|
var column = _ref.column;
|
|
788
1023
|
|
|
@@ -806,8 +1041,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
806
1041
|
style: _extends({}, column.getHeaderProps().style, mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style, mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style)
|
|
807
1042
|
});
|
|
808
1043
|
|
|
809
|
-
var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.
|
|
810
|
-
var
|
|
1044
|
+
var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.clearSort : (_localization$sortByC = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC.replace('{column}', column.Header) : (_localization$sortByC2 = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC2.replace('{column}', column.Header);
|
|
1045
|
+
var filterType = tableInstance.state.currentFilterTypes[column.id];
|
|
1046
|
+
var filterTooltip = !!column.filterValue ? localization.filteringByColumn.replace('{column}', String(column.Header)).replace('{filterType}', filterType instanceof Function ? '' : // @ts-ignore
|
|
1047
|
+
localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.filterValue) : localization.showHideFilters;
|
|
811
1048
|
var columnHeader = column.render('Header');
|
|
812
1049
|
return React.createElement(TableCell, Object.assign({
|
|
813
1050
|
align: isParentHeader ? 'center' : 'left'
|
|
@@ -1011,10 +1248,10 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
|
1011
1248
|
arrow: true,
|
|
1012
1249
|
enterDelay: 1000,
|
|
1013
1250
|
enterNextDelay: 1000,
|
|
1014
|
-
title: selectAll ? localization.
|
|
1251
|
+
title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
|
1015
1252
|
}, React.createElement(Checkbox, Object.assign({
|
|
1016
1253
|
inputProps: {
|
|
1017
|
-
'aria-label': selectAll ? localization.
|
|
1254
|
+
'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
|
1018
1255
|
},
|
|
1019
1256
|
onChange: onSelectChange
|
|
1020
1257
|
}, checkboxProps, {
|
|
@@ -1034,8 +1271,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
|
|
|
1034
1271
|
}, tableInstance.getToggleAllRowsExpandedProps(), {
|
|
1035
1272
|
sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
|
|
1036
1273
|
}), React.createElement(IconButton, {
|
|
1037
|
-
"aria-label": localization.
|
|
1038
|
-
title: localization.
|
|
1274
|
+
"aria-label": localization.expandAll,
|
|
1275
|
+
title: localization.expandAll
|
|
1039
1276
|
}, React.createElement(DoubleArrowDownIcon, {
|
|
1040
1277
|
style: {
|
|
1041
1278
|
transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
|
|
@@ -1075,7 +1312,7 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
|
|
|
1075
1312
|
sx: _extends({}, commonTableHeadCellStyles(densePadding), {
|
|
1076
1313
|
textAlign: 'center'
|
|
1077
1314
|
})
|
|
1078
|
-
}, localization.
|
|
1315
|
+
}, localization.actions);
|
|
1079
1316
|
};
|
|
1080
1317
|
|
|
1081
1318
|
var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
@@ -1181,9 +1418,9 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
|
1181
1418
|
textAlign: 'left'
|
|
1182
1419
|
})
|
|
1183
1420
|
}, React.createElement(IconButton, Object.assign({
|
|
1184
|
-
"aria-label": localization.
|
|
1421
|
+
"aria-label": localization.expand,
|
|
1185
1422
|
disabled: !row.canExpand && !renderDetailPanel,
|
|
1186
|
-
title: localization.
|
|
1423
|
+
title: localization.expand
|
|
1187
1424
|
}, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
|
|
1188
1425
|
style: {
|
|
1189
1426
|
transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
|
|
@@ -1219,7 +1456,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
|
1219
1456
|
}, enableRowEditing && React.createElement(MenuItem, {
|
|
1220
1457
|
onClick: handleEdit,
|
|
1221
1458
|
sx: commonMenuItemStyles$1
|
|
1222
|
-
}, React.createElement(EditIcon, null), localization.
|
|
1459
|
+
}, React.createElement(EditIcon, null), localization.edit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
|
|
1223
1460
|
return setAnchorEl(null);
|
|
1224
1461
|
})) != null ? _renderRowActionMenuI : null);
|
|
1225
1462
|
};
|
|
@@ -2033,15 +2270,15 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
|
|
|
2033
2270
|
}
|
|
2034
2271
|
}, React.createElement(Tooltip, {
|
|
2035
2272
|
arrow: true,
|
|
2036
|
-
title: localization.
|
|
2273
|
+
title: localization.cancel
|
|
2037
2274
|
}, React.createElement(IconButton, {
|
|
2038
|
-
"aria-label": localization.
|
|
2275
|
+
"aria-label": localization.cancel,
|
|
2039
2276
|
onClick: handleCancel
|
|
2040
2277
|
}, React.createElement(CancelIcon, null))), React.createElement(Tooltip, {
|
|
2041
2278
|
arrow: true,
|
|
2042
|
-
title: localization.
|
|
2279
|
+
title: localization.save
|
|
2043
2280
|
}, React.createElement(IconButton, {
|
|
2044
|
-
"aria-label": localization.
|
|
2281
|
+
"aria-label": localization.save,
|
|
2045
2282
|
color: "info",
|
|
2046
2283
|
onClick: handleSave
|
|
2047
2284
|
}, React.createElement(SaveIcon, null))));
|
|
@@ -2095,7 +2332,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
|
|
|
2095
2332
|
}) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
|
|
2096
2333
|
placement: "right",
|
|
2097
2334
|
arrow: true,
|
|
2098
|
-
title: localization.
|
|
2335
|
+
title: localization.edit
|
|
2099
2336
|
}, React.createElement(IconButton, {
|
|
2100
2337
|
sx: commonIconButtonStyles,
|
|
2101
2338
|
onClick: handleEdit
|
|
@@ -2103,9 +2340,9 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
|
|
|
2103
2340
|
arrow: true,
|
|
2104
2341
|
enterDelay: 1000,
|
|
2105
2342
|
enterNextDelay: 1000,
|
|
2106
|
-
title: localization.
|
|
2343
|
+
title: localization.rowActions
|
|
2107
2344
|
}, React.createElement(IconButton, {
|
|
2108
|
-
"aria-label": localization.
|
|
2345
|
+
"aria-label": localization.rowActions,
|
|
2109
2346
|
onClick: handleOpenRowActionMenu,
|
|
2110
2347
|
size: "small",
|
|
2111
2348
|
sx: commonIconButtonStyles
|
|
@@ -2325,7 +2562,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
2325
2562
|
orientation: "horizontal"
|
|
2326
2563
|
}, React.createElement(TextField, Object.assign({
|
|
2327
2564
|
id: "mrt-" + idPrefix + "-search-text-field",
|
|
2328
|
-
placeholder: localization.
|
|
2565
|
+
placeholder: localization.search,
|
|
2329
2566
|
onChange: function onChange(event) {
|
|
2330
2567
|
setSearchValue(event.target.value);
|
|
2331
2568
|
handleChange(event);
|
|
@@ -2341,11 +2578,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
2341
2578
|
endAdornment: React.createElement(InputAdornment, {
|
|
2342
2579
|
position: "end"
|
|
2343
2580
|
}, React.createElement(IconButton, {
|
|
2344
|
-
"aria-label": localization.
|
|
2581
|
+
"aria-label": localization.clearSearch,
|
|
2345
2582
|
disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
|
|
2346
2583
|
onClick: handleClear,
|
|
2347
2584
|
size: "small",
|
|
2348
|
-
title: localization.
|
|
2585
|
+
title: localization.clearSearch
|
|
2349
2586
|
}, React.createElement(CloseIcon, {
|
|
2350
2587
|
fontSize: "small"
|
|
2351
2588
|
})))
|
|
@@ -2370,9 +2607,9 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
|
|
2370
2607
|
|
|
2371
2608
|
return React.createElement(Tooltip, {
|
|
2372
2609
|
arrow: true,
|
|
2373
|
-
title: localization.
|
|
2610
|
+
title: localization.toggleFullScreen
|
|
2374
2611
|
}, React.createElement(IconButton, Object.assign({
|
|
2375
|
-
"aria-label": localization.
|
|
2612
|
+
"aria-label": localization.showHideFilters,
|
|
2376
2613
|
onClick: function onClick() {
|
|
2377
2614
|
return setFullScreen(!fullScreen);
|
|
2378
2615
|
},
|
|
@@ -2380,61 +2617,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
|
|
2380
2617
|
}, rest), fullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
|
|
2381
2618
|
};
|
|
2382
2619
|
|
|
2383
|
-
var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
2384
|
-
var _column$columns, _column$columns2, _column$isVisible, _column$columns4;
|
|
2385
|
-
|
|
2386
|
-
var column = _ref.column;
|
|
2387
|
-
var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
|
|
2388
|
-
var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
|
|
2389
|
-
return childColumn.isVisible;
|
|
2390
|
-
}));
|
|
2391
|
-
var switchChecked = (_column$isVisible = column.isVisible) != null ? _column$isVisible : allChildColumnsVisible;
|
|
2392
|
-
|
|
2393
|
-
var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
|
|
2394
|
-
if (isParentHeader) {
|
|
2395
|
-
var _column$columns3;
|
|
2396
|
-
|
|
2397
|
-
column == null ? void 0 : (_column$columns3 = column.columns) == null ? void 0 : _column$columns3.forEach == null ? void 0 : _column$columns3.forEach(function (childColumn) {
|
|
2398
|
-
childColumn.toggleHidden(switchChecked);
|
|
2399
|
-
});
|
|
2400
|
-
} else {
|
|
2401
|
-
column.toggleHidden();
|
|
2402
|
-
}
|
|
2403
|
-
};
|
|
2404
|
-
|
|
2405
|
-
return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
|
|
2406
|
-
sx: _extends({}, commonMenuItemStyles$1, {
|
|
2407
|
-
pl: (column.depth + 0.5) * 2 + "rem"
|
|
2408
|
-
})
|
|
2409
|
-
}, React.createElement(FormControlLabel, {
|
|
2410
|
-
componentsProps: {
|
|
2411
|
-
typography: {
|
|
2412
|
-
sx: {
|
|
2413
|
-
marginBottom: 0
|
|
2414
|
-
}
|
|
2415
|
-
}
|
|
2416
|
-
},
|
|
2417
|
-
checked: switchChecked,
|
|
2418
|
-
control: React.createElement(Switch, null),
|
|
2419
|
-
label: column.Header,
|
|
2420
|
-
onChange: function onChange() {
|
|
2421
|
-
return handleToggleColumnHidden(column);
|
|
2422
|
-
}
|
|
2423
|
-
})), (_column$columns4 = column.columns) == null ? void 0 : _column$columns4.map(function (c, i) {
|
|
2424
|
-
return React.createElement(MRT_ShowHideColumnsMenu, {
|
|
2425
|
-
key: i + "-" + c.id,
|
|
2426
|
-
column: c
|
|
2427
|
-
});
|
|
2428
|
-
}));
|
|
2429
|
-
};
|
|
2430
|
-
|
|
2431
2620
|
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
|
2432
2621
|
var rest = _extends({}, _ref);
|
|
2433
2622
|
|
|
2434
2623
|
var _useMRT = useMRT(),
|
|
2435
2624
|
ViewColumnIcon = _useMRT.icons.ViewColumnIcon,
|
|
2436
|
-
localization = _useMRT.localization
|
|
2437
|
-
tableInstance = _useMRT.tableInstance;
|
|
2625
|
+
localization = _useMRT.localization;
|
|
2438
2626
|
|
|
2439
2627
|
var _useState = useState(null),
|
|
2440
2628
|
anchorEl = _useState[0],
|
|
@@ -2446,42 +2634,15 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
|
|
|
2446
2634
|
|
|
2447
2635
|
return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
|
|
2448
2636
|
arrow: true,
|
|
2449
|
-
title: localization.
|
|
2637
|
+
title: localization.showHideColumns
|
|
2450
2638
|
}, React.createElement(IconButton, Object.assign({
|
|
2451
|
-
"aria-label": localization.
|
|
2639
|
+
"aria-label": localization.showHideColumns,
|
|
2452
2640
|
onClick: handleClick,
|
|
2453
2641
|
size: "small"
|
|
2454
|
-
}, rest), React.createElement(ViewColumnIcon, null))), React.createElement(
|
|
2642
|
+
}, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
|
|
2455
2643
|
anchorEl: anchorEl,
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
return setAnchorEl(null);
|
|
2459
|
-
},
|
|
2460
|
-
MenuListProps: {
|
|
2461
|
-
dense: tableInstance.state.densePadding
|
|
2462
|
-
}
|
|
2463
|
-
}, React.createElement(Box, {
|
|
2464
|
-
sx: {
|
|
2465
|
-
display: 'flex',
|
|
2466
|
-
justifyContent: 'space-between',
|
|
2467
|
-
p: '0.5rem'
|
|
2468
|
-
}
|
|
2469
|
-
}, React.createElement(Button, {
|
|
2470
|
-
disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
|
|
2471
|
-
onClick: function onClick() {
|
|
2472
|
-
return tableInstance.toggleHideAllColumns(true);
|
|
2473
|
-
}
|
|
2474
|
-
}, localization.columnShowHideMenuHideAll), React.createElement(Button, {
|
|
2475
|
-
disabled: tableInstance.getToggleHideAllColumnsProps().checked,
|
|
2476
|
-
onClick: function onClick() {
|
|
2477
|
-
return tableInstance.toggleHideAllColumns(false);
|
|
2478
|
-
}
|
|
2479
|
-
}, localization.columnShowHideMenuShowAll)), React.createElement(Divider, null), tableInstance.columns.map(function (column, index) {
|
|
2480
|
-
return React.createElement(MRT_ShowHideColumnsMenu, {
|
|
2481
|
-
key: index + "-" + column.id,
|
|
2482
|
-
column: column
|
|
2483
|
-
});
|
|
2484
|
-
})));
|
|
2644
|
+
setAnchorEl: setAnchorEl
|
|
2645
|
+
}));
|
|
2485
2646
|
};
|
|
2486
2647
|
|
|
2487
2648
|
var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
|
@@ -2497,9 +2658,9 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
|
|
2497
2658
|
|
|
2498
2659
|
return React.createElement(Tooltip, {
|
|
2499
2660
|
arrow: true,
|
|
2500
|
-
title: localization.
|
|
2661
|
+
title: localization.toggleDensePadding
|
|
2501
2662
|
}, React.createElement(IconButton, Object.assign({
|
|
2502
|
-
"aria-label": localization.
|
|
2663
|
+
"aria-label": localization.toggleDensePadding,
|
|
2503
2664
|
onClick: function onClick() {
|
|
2504
2665
|
return setDensePadding(!densePadding);
|
|
2505
2666
|
},
|
|
@@ -2520,9 +2681,9 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
|
|
2520
2681
|
|
|
2521
2682
|
return React.createElement(Tooltip, {
|
|
2522
2683
|
arrow: true,
|
|
2523
|
-
title: localization.
|
|
2684
|
+
title: localization.showHideFilters
|
|
2524
2685
|
}, React.createElement(IconButton, Object.assign({
|
|
2525
|
-
"aria-label": localization.
|
|
2686
|
+
"aria-label": localization.showHideFilters,
|
|
2526
2687
|
onClick: function onClick() {
|
|
2527
2688
|
return setShowFilters(!showFilters);
|
|
2528
2689
|
},
|
|
@@ -2554,7 +2715,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
|
|
|
2554
2715
|
|
|
2555
2716
|
return React.createElement(Tooltip, {
|
|
2556
2717
|
arrow: true,
|
|
2557
|
-
title: localization.
|
|
2718
|
+
title: localization.showHideSearch
|
|
2558
2719
|
}, React.createElement(IconButton, Object.assign({
|
|
2559
2720
|
size: "small",
|
|
2560
2721
|
onClick: handleToggleSearch
|
|
@@ -2629,7 +2790,7 @@ var MRT_TablePagination = function MRT_TablePagination() {
|
|
|
2629
2790
|
};
|
|
2630
2791
|
|
|
2631
2792
|
var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
|
|
2632
|
-
var _localization$
|
|
2793
|
+
var _localization$selecte, _localization$selecte2;
|
|
2633
2794
|
|
|
2634
2795
|
var _useMRT = useMRT(),
|
|
2635
2796
|
muiTableToolbarAlertBannerProps = _useMRT.muiTableToolbarAlertBannerProps,
|
|
@@ -2641,13 +2802,13 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
|
|
|
2641
2802
|
|
|
2642
2803
|
var isMobile = useMediaQuery('(max-width:720px)');
|
|
2643
2804
|
var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(tableInstance) : muiTableToolbarAlertBannerProps;
|
|
2644
|
-
var selectMessage = tableInstance.selectedFlatRows.length > 0 ? (_localization$
|
|
2645
|
-
var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React.createElement("span", null, localization.
|
|
2805
|
+
var selectMessage = tableInstance.selectedFlatRows.length > 0 ? (_localization$selecte = localization.selectedCountOfRowCountRowsSelected) == null ? void 0 : (_localization$selecte2 = _localization$selecte.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$selecte2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
|
|
2806
|
+
var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React.createElement("span", null, localization.groupedBy, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
|
|
2646
2807
|
var _tableInstance$allCol;
|
|
2647
2808
|
|
|
2648
2809
|
return React.createElement(Fragment, {
|
|
2649
2810
|
key: index + "-" + columnId
|
|
2650
|
-
}, index > 0 ? localization.
|
|
2811
|
+
}, index > 0 ? localization.thenBy : '', React.createElement(Chip, {
|
|
2651
2812
|
color: "secondary",
|
|
2652
2813
|
label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
|
|
2653
2814
|
return column.id === columnId;
|
|
@@ -2819,51 +2980,50 @@ var MRT_TableContainer = function MRT_TableContainer() {
|
|
|
2819
2980
|
};
|
|
2820
2981
|
|
|
2821
2982
|
var MRT_DefaultLocalization_EN = {
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
columnActionMenuItemClearSort: 'Clear sort',
|
|
2825
|
-
columnActionMenuItemGroupBy: 'Group by {column}',
|
|
2826
|
-
columnActionMenuItemHideColumn: 'Hide {column} column',
|
|
2827
|
-
columnActionMenuItemSortAsc: 'Sort by {column} ascending',
|
|
2828
|
-
columnActionMenuItemSortDesc: 'Sort by {column} descending',
|
|
2829
|
-
columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
|
|
2830
|
-
columnShowHideMenuHideAll: 'Hide all',
|
|
2831
|
-
columnShowHideMenuShowAll: 'Show all',
|
|
2832
|
-
expandAllButtonTitle: 'Expand all',
|
|
2833
|
-
expandButtonTitle: 'Expand',
|
|
2834
|
-
filterApplied: 'Filtering by {column} - ({filterType})',
|
|
2835
|
-
filterMenuItemContains: 'Contains Exact',
|
|
2836
|
-
filterMenuItemEmpty: 'Empty',
|
|
2837
|
-
filterMenuItemEndsWith: 'Ends With',
|
|
2838
|
-
filterMenuItemEquals: 'Equals',
|
|
2983
|
+
actions: 'Actions',
|
|
2984
|
+
cancel: 'Cancel',
|
|
2839
2985
|
changeFilterMode: 'Change filter mode',
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2986
|
+
clearFilter: 'Clear filter',
|
|
2987
|
+
clearSearch: 'Clear search',
|
|
2988
|
+
clearSort: 'Clear sort',
|
|
2989
|
+
columnActions: 'Column Actions',
|
|
2990
|
+
edit: 'Edit',
|
|
2991
|
+
expand: 'Expand',
|
|
2992
|
+
expandAll: 'Expand all',
|
|
2993
|
+
filterByColumn: 'Filter by {column}',
|
|
2994
|
+
filterContains: 'Contains Exact',
|
|
2995
|
+
filterEmpty: 'Empty',
|
|
2996
|
+
filterEndsWith: 'Ends With',
|
|
2997
|
+
filterEquals: 'Equals',
|
|
2998
|
+
filterFuzzy: 'Fuzzy Match',
|
|
2999
|
+
filterGreaterThan: 'Greater Than',
|
|
3000
|
+
filterLessThan: 'Less Than',
|
|
3001
|
+
filterMode: 'Filter Mode: {filterType}',
|
|
3002
|
+
filterNotEmpty: 'Not Empty',
|
|
3003
|
+
filterNotEquals: 'Not Equals',
|
|
3004
|
+
filterStartsWith: 'Starts With',
|
|
3005
|
+
filteringByColumn: 'Filtering by {column} - {filterType} "{filterValue}"',
|
|
3006
|
+
groupByColumn: 'Group by {column}',
|
|
3007
|
+
groupedBy: 'Grouped by ',
|
|
3008
|
+
hideAll: 'Hide all',
|
|
3009
|
+
hideColumn: 'Hide {column} column',
|
|
3010
|
+
rowActions: 'Row Actions',
|
|
3011
|
+
save: 'Save',
|
|
3012
|
+
search: 'Search',
|
|
3013
|
+
selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
|
|
3014
|
+
showAll: 'Show all',
|
|
3015
|
+
showAllColumns: 'Show all columns',
|
|
3016
|
+
showHideColumns: 'Show/Hide columns',
|
|
3017
|
+
showHideFilters: 'Show/Hide filters',
|
|
3018
|
+
showHideSearch: 'Show/Hide search',
|
|
3019
|
+
sortByColumnAsc: 'Sort by {column} ascending',
|
|
3020
|
+
sortByColumnDesc: 'Sort by {column} descending',
|
|
3021
|
+
thenBy: ', then by ',
|
|
3022
|
+
toggleDensePadding: 'Toggle dense padding',
|
|
3023
|
+
toggleFullScreen: 'Toggle full screen',
|
|
3024
|
+
toggleSelectAll: 'Toggle select all',
|
|
3025
|
+
toggleSelectRow: 'Toggle select row',
|
|
3026
|
+
ungroupByColumn: 'Ungroup by {column}'
|
|
2867
3027
|
};
|
|
2868
3028
|
|
|
2869
3029
|
var MRT_Default_Icons = {
|
|
@@ -2895,19 +3055,6 @@ var MRT_Default_Icons = {
|
|
|
2895
3055
|
};
|
|
2896
3056
|
|
|
2897
3057
|
var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
|
|
2898
|
-
var MRT_FILTER_TYPE;
|
|
2899
|
-
|
|
2900
|
-
(function (MRT_FILTER_TYPE) {
|
|
2901
|
-
MRT_FILTER_TYPE["CONTAINS"] = "contains";
|
|
2902
|
-
MRT_FILTER_TYPE["EMPTY"] = "empty";
|
|
2903
|
-
MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
|
|
2904
|
-
MRT_FILTER_TYPE["EQUALS"] = "equals";
|
|
2905
|
-
MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
|
|
2906
|
-
MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
|
|
2907
|
-
MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
|
|
2908
|
-
MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
|
|
2909
|
-
})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
|
|
2910
|
-
|
|
2911
3058
|
var MaterialReactTable = (function (_ref) {
|
|
2912
3059
|
var _ref$defaultColumn = _ref.defaultColumn,
|
|
2913
3060
|
defaultColumn = _ref$defaultColumn === void 0 ? {
|
|
@@ -2938,5 +3085,4 @@ var MaterialReactTable = (function (_ref) {
|
|
|
2938
3085
|
});
|
|
2939
3086
|
|
|
2940
3087
|
export default MaterialReactTable;
|
|
2941
|
-
export { MRT_FILTER_TYPE };
|
|
2942
3088
|
//# sourceMappingURL=material-react-table.esm.js.map
|