material-react-table 0.6.7 → 0.6.10
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 +12 -3
- package/dist/enums.d.ts +2 -1
- package/dist/filtersFNs.d.ts +13 -5
- package/dist/localization.d.ts +3 -1
- package/dist/material-react-table.cjs.development.js +339 -248
- 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 +340 -249
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_FilterTypeMenu.d.ts +1 -1
- package/dist/useMRT.d.ts +1 -0
- package/dist/utils.d.ts +2 -2
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +29 -4
- package/src/body/MRT_TableBodyCell.tsx +8 -2
- package/src/body/MRT_TableBodyRow.tsx +30 -7
- package/src/buttons/MRT_CopyButton.tsx +24 -6
- package/src/buttons/MRT_ExpandAllButton.tsx +13 -20
- package/src/buttons/MRT_ExpandButton.tsx +20 -33
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +19 -1
- package/src/enums.ts +2 -1
- package/src/filtersFNs.ts +17 -3
- package/src/head/MRT_TableHeadCell.tsx +6 -3
- package/src/head/MRT_TableHeadRow.tsx +38 -15
- package/src/inputs/MRT_EditCellTextField.tsx +0 -6
- package/src/inputs/MRT_FilterTextField.tsx +1 -12
- package/src/inputs/MRT_SearchTextField.tsx +27 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +58 -31
- package/src/localization.ts +7 -3
- package/src/menus/MRT_ColumnActionMenu.tsx +6 -1
- package/src/menus/MRT_FilterTypeMenu.tsx +44 -18
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +12 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -1
- package/src/table/MRT_TableSpacerCell.tsx +1 -8
- package/src/useMRT.tsx +12 -1
- package/src/utils.ts +8 -4
|
@@ -106,6 +106,22 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
106
106
|
return target;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
+
var MRT_FILTER_TYPE;
|
|
110
|
+
|
|
111
|
+
(function (MRT_FILTER_TYPE) {
|
|
112
|
+
MRT_FILTER_TYPE["BEST_MATCH"] = "bestMatch";
|
|
113
|
+
MRT_FILTER_TYPE["BEST_MATCH_FIRST"] = "bestMatchFirst";
|
|
114
|
+
MRT_FILTER_TYPE["CONTAINS"] = "contains";
|
|
115
|
+
MRT_FILTER_TYPE["EMPTY"] = "empty";
|
|
116
|
+
MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
|
|
117
|
+
MRT_FILTER_TYPE["EQUALS"] = "equals";
|
|
118
|
+
MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
|
|
119
|
+
MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
|
|
120
|
+
MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
|
|
121
|
+
MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
|
|
122
|
+
MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
|
|
123
|
+
})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
|
|
124
|
+
|
|
109
125
|
var findLowestLevelCols = function findLowestLevelCols(columns) {
|
|
110
126
|
var lowestLevelColumns = columns;
|
|
111
127
|
var currentCols = columns;
|
|
@@ -167,14 +183,18 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
167
183
|
|
|
168
184
|
var _useState6 = React.useState(function () {
|
|
169
185
|
return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
|
|
170
|
-
var _ref, _c$filter, _props$initialState5, _props$initialState5$, _ref2;
|
|
186
|
+
var _ref, _c$filter, _props$initialState5, _props$initialState5$, _c$filterSelectOption, _ref2;
|
|
171
187
|
|
|
172
|
-
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 ?
|
|
188
|
+
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$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
|
|
173
189
|
})));
|
|
174
190
|
}),
|
|
175
191
|
currentFilterTypes = _useState6[0],
|
|
176
192
|
setCurrentFilterTypes = _useState6[1];
|
|
177
193
|
|
|
194
|
+
var _useState7 = React.useState(props.globalFilter),
|
|
195
|
+
currentGlobalFilterType = _useState7[0],
|
|
196
|
+
setCurrentGlobalFilterType = _useState7[1];
|
|
197
|
+
|
|
178
198
|
var applyFiltersToColumns = React.useCallback(function (cols) {
|
|
179
199
|
return cols.map(function (column) {
|
|
180
200
|
if (column.columns) {
|
|
@@ -205,17 +225,19 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
205
225
|
// @ts-ignore
|
|
206
226
|
columns: columns,
|
|
207
227
|
data: data,
|
|
228
|
+
globalFilter: currentGlobalFilterType,
|
|
208
229
|
useControlledState: function useControlledState(state) {
|
|
209
230
|
return React.useMemo(function () {
|
|
210
231
|
return _extends({}, state, {
|
|
211
232
|
currentEditingRow: currentEditingRow,
|
|
212
233
|
currentFilterTypes: currentFilterTypes,
|
|
234
|
+
currentGlobalFilterType: currentGlobalFilterType,
|
|
213
235
|
densePadding: densePadding,
|
|
214
236
|
fullScreen: fullScreen,
|
|
215
237
|
showFilters: showFilters,
|
|
216
238
|
showSearch: showSearch
|
|
217
239
|
}, props == null ? void 0 : props.useControlledState == null ? void 0 : props.useControlledState(state));
|
|
218
|
-
}, [currentEditingRow, currentFilterTypes, densePadding, fullScreen, showFilters, showSearch, state]);
|
|
240
|
+
}, [currentEditingRow, currentFilterTypes, currentGlobalFilterType, densePadding, fullScreen, showFilters, showSearch, state]);
|
|
219
241
|
}
|
|
220
242
|
})].concat(hooks));
|
|
221
243
|
var idPrefix = React.useMemo(function () {
|
|
@@ -241,6 +263,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
|
241
263
|
//@ts-ignore
|
|
242
264
|
setCurrentEditingRow: setCurrentEditingRow,
|
|
243
265
|
setCurrentFilterTypes: setCurrentFilterTypes,
|
|
266
|
+
setCurrentGlobalFilterType: setCurrentGlobalFilterType,
|
|
244
267
|
setDensePadding: setDensePadding,
|
|
245
268
|
setFullScreen: setFullScreen,
|
|
246
269
|
setShowFilters: setShowFilters,
|
|
@@ -254,22 +277,19 @@ var useMRT = function useMRT() {
|
|
|
254
277
|
return React.useContext(MaterialReactTableContext);
|
|
255
278
|
};
|
|
256
279
|
|
|
257
|
-
var
|
|
280
|
+
var bestMatchFirst = function bestMatchFirst(rows, columnIds, filterValue) {
|
|
281
|
+
return matchSorter.matchSorter(rows, filterValue.toString().trim(), {
|
|
282
|
+
keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
|
|
283
|
+
return "values." + c;
|
|
284
|
+
}) : ["values." + columnIds]
|
|
285
|
+
});
|
|
286
|
+
};
|
|
258
287
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
|
|
263
|
-
MRT_FILTER_TYPE["EQUALS"] = "equals";
|
|
264
|
-
MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
|
|
265
|
-
MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
|
|
266
|
-
MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
|
|
267
|
-
MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
|
|
268
|
-
MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
|
|
269
|
-
MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
|
|
270
|
-
})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
|
|
288
|
+
bestMatchFirst.autoRemove = function (val) {
|
|
289
|
+
return !val;
|
|
290
|
+
};
|
|
271
291
|
|
|
272
|
-
var
|
|
292
|
+
var bestMatch = function bestMatch(rows, columnIds, filterValue) {
|
|
273
293
|
return matchSorter.matchSorter(rows, filterValue.toString().trim(), {
|
|
274
294
|
keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
|
|
275
295
|
return "values." + c;
|
|
@@ -280,7 +300,7 @@ var fuzzy = function fuzzy(rows, columnIds, filterValue) {
|
|
|
280
300
|
});
|
|
281
301
|
};
|
|
282
302
|
|
|
283
|
-
|
|
303
|
+
bestMatch.autoRemove = function (val) {
|
|
284
304
|
return !val;
|
|
285
305
|
};
|
|
286
306
|
|
|
@@ -375,11 +395,12 @@ notEmpty.autoRemove = function (val) {
|
|
|
375
395
|
};
|
|
376
396
|
|
|
377
397
|
var defaultFilterFNs = {
|
|
398
|
+
bestMatch: bestMatch,
|
|
399
|
+
bestMatchFirst: bestMatchFirst,
|
|
378
400
|
contains: contains,
|
|
379
401
|
empty: empty,
|
|
380
402
|
endsWith: endsWith,
|
|
381
403
|
equals: equals,
|
|
382
|
-
fuzzy: fuzzy,
|
|
383
404
|
greaterThan: greaterThan,
|
|
384
405
|
lessThan: lessThan,
|
|
385
406
|
notEmpty: notEmpty,
|
|
@@ -399,20 +420,27 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
|
|
|
399
420
|
setAnchorEl = _ref.setAnchorEl;
|
|
400
421
|
|
|
401
422
|
var _useMRT = useMRT(),
|
|
423
|
+
enabledGlobalFilterTypes = _useMRT.enabledGlobalFilterTypes,
|
|
402
424
|
localization = _useMRT.localization,
|
|
403
425
|
setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
|
|
426
|
+
setCurrentGlobalFilterType = _useMRT.setCurrentGlobalFilterType,
|
|
404
427
|
tableInstance = _useMRT.tableInstance;
|
|
405
428
|
|
|
406
429
|
var filterTypes = React.useMemo(function () {
|
|
407
430
|
return [{
|
|
408
|
-
type: MRT_FILTER_TYPE.
|
|
409
|
-
label: localization.
|
|
431
|
+
type: MRT_FILTER_TYPE.BEST_MATCH_FIRST,
|
|
432
|
+
label: localization.filterBestMatchFirst,
|
|
410
433
|
divider: false,
|
|
411
|
-
fn:
|
|
434
|
+
fn: bestMatchFirst
|
|
435
|
+
}, {
|
|
436
|
+
type: MRT_FILTER_TYPE.BEST_MATCH,
|
|
437
|
+
label: localization.filterBestMatch,
|
|
438
|
+
divider: !!column,
|
|
439
|
+
fn: bestMatch
|
|
412
440
|
}, {
|
|
413
441
|
type: MRT_FILTER_TYPE.CONTAINS,
|
|
414
442
|
label: localization.filterContains,
|
|
415
|
-
divider:
|
|
443
|
+
divider: false,
|
|
416
444
|
fn: contains
|
|
417
445
|
}, {
|
|
418
446
|
type: MRT_FILTER_TYPE.STARTS_WITH,
|
|
@@ -455,26 +483,30 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
|
|
|
455
483
|
divider: false,
|
|
456
484
|
fn: notEmpty
|
|
457
485
|
}].filter(function (filterType) {
|
|
458
|
-
return !column.
|
|
486
|
+
return column ? !column.enabledFilterTypes || column.enabledFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
|
|
459
487
|
});
|
|
460
488
|
}, []);
|
|
461
489
|
|
|
462
490
|
var handleSelectFilterType = function handleSelectFilterType(value) {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
491
|
+
if (column) {
|
|
492
|
+
setCurrentFilterTypes(function (prev) {
|
|
493
|
+
var _extends2;
|
|
466
494
|
|
|
467
|
-
|
|
468
|
-
|
|
495
|
+
return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
|
|
496
|
+
});
|
|
469
497
|
|
|
470
|
-
|
|
471
|
-
|
|
498
|
+
if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
|
|
499
|
+
column.setFilter(' ');
|
|
500
|
+
}
|
|
501
|
+
} else {
|
|
502
|
+
setCurrentGlobalFilterType(value);
|
|
472
503
|
}
|
|
473
504
|
|
|
505
|
+
setAnchorEl(null);
|
|
474
506
|
onSelect == null ? void 0 : onSelect();
|
|
475
507
|
};
|
|
476
508
|
|
|
477
|
-
var filterType = tableInstance.state.currentFilterTypes[column.id];
|
|
509
|
+
var filterType = column ? tableInstance.state.currentFilterTypes[column.id] : tableInstance.state.currentGlobalFilterType;
|
|
478
510
|
return React__default.createElement(material.Menu, {
|
|
479
511
|
anchorEl: anchorEl,
|
|
480
512
|
anchorOrigin: {
|
|
@@ -528,9 +560,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
528
560
|
var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps(column) : muiTableHeadCellFilterTextFieldProps;
|
|
529
561
|
var mcTableHeadCellFilterTextFieldProps = column.muiTableHeadCellFilterTextFieldProps instanceof Function ? column.muiTableHeadCellFilterTextFieldProps(column) : column.muiTableHeadCellFilterTextFieldProps;
|
|
530
562
|
|
|
531
|
-
var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps
|
|
532
|
-
style: _extends({}, mTableHeadCellFilterTextFieldProps == null ? void 0 : mTableHeadCellFilterTextFieldProps.style, mcTableHeadCellFilterTextFieldProps == null ? void 0 : mcTableHeadCellFilterTextFieldProps.style)
|
|
533
|
-
});
|
|
563
|
+
var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
|
|
534
564
|
|
|
535
565
|
var _useState2 = React.useState(''),
|
|
536
566
|
filterValue = _useState2[0],
|
|
@@ -555,7 +585,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
555
585
|
setCurrentFilterTypes(function (prev) {
|
|
556
586
|
var _extends2;
|
|
557
587
|
|
|
558
|
-
return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.
|
|
588
|
+
return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.BEST_MATCH, _extends2));
|
|
559
589
|
});
|
|
560
590
|
};
|
|
561
591
|
|
|
@@ -594,13 +624,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
594
624
|
}
|
|
595
625
|
},
|
|
596
626
|
label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
|
|
597
|
-
InputLabelProps: {
|
|
598
|
-
shrink: false,
|
|
599
|
-
sx: {
|
|
600
|
-
maxWidth: 'calc(100% - 2.5rem)'
|
|
601
|
-
},
|
|
602
|
-
title: filterPlaceholder
|
|
603
|
-
},
|
|
604
627
|
margin: "none",
|
|
605
628
|
placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
|
|
606
629
|
onChange: function onChange(e) {
|
|
@@ -733,7 +756,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
|
733
756
|
},
|
|
734
757
|
checked: switchChecked,
|
|
735
758
|
control: React__default.createElement(material.Switch, null),
|
|
736
|
-
disabled: isSubMenu && switchChecked,
|
|
759
|
+
disabled: isSubMenu && switchChecked || column.disableColumnHiding,
|
|
737
760
|
label: column.Header,
|
|
738
761
|
onChange: function onChange() {
|
|
739
762
|
return handleToggleColumnHidden(column);
|
|
@@ -756,6 +779,14 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
|
756
779
|
localization = _useMRT.localization,
|
|
757
780
|
tableInstance = _useMRT.tableInstance;
|
|
758
781
|
|
|
782
|
+
var hideAllColumns = function hideAllColumns() {
|
|
783
|
+
findLowestLevelCols(tableInstance.columns).filter(function (col) {
|
|
784
|
+
return !col.disableColumnHiding;
|
|
785
|
+
}).forEach(function (col) {
|
|
786
|
+
return col.toggleHidden(true);
|
|
787
|
+
});
|
|
788
|
+
};
|
|
789
|
+
|
|
759
790
|
return React__default.createElement(material.Menu, {
|
|
760
791
|
anchorEl: anchorEl,
|
|
761
792
|
open: !!anchorEl,
|
|
@@ -774,9 +805,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
|
774
805
|
}
|
|
775
806
|
}, !isSubMenu && React__default.createElement(material.Button, {
|
|
776
807
|
disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
|
|
777
|
-
onClick:
|
|
778
|
-
return tableInstance.toggleHideAllColumns(true);
|
|
779
|
-
}
|
|
808
|
+
onClick: hideAllColumns
|
|
780
809
|
}, localization.hideAll), React__default.createElement(material.Button, {
|
|
781
810
|
disabled: tableInstance.getToggleHideAllColumnsProps().checked,
|
|
782
811
|
onClick: function onClick() {
|
|
@@ -961,6 +990,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
961
990
|
}, React__default.createElement(material.Box, {
|
|
962
991
|
sx: commonListItemStyles
|
|
963
992
|
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React__default.createElement(material.MenuItem, {
|
|
993
|
+
disabled: column.disableColumnHiding,
|
|
964
994
|
key: 0,
|
|
965
995
|
onClick: handleHideColumn,
|
|
966
996
|
sx: commonMenuItemStyles$1
|
|
@@ -992,8 +1022,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
992
1022
|
var column = _ref.column;
|
|
993
1023
|
|
|
994
1024
|
var _useMRT = useMRT(),
|
|
1025
|
+
MoreVertIcon = _useMRT.icons.MoreVertIcon,
|
|
995
1026
|
localization = _useMRT.localization,
|
|
996
|
-
|
|
1027
|
+
muiTableHeadCellColumnActionsButtonProps = _useMRT.muiTableHeadCellColumnActionsButtonProps;
|
|
997
1028
|
|
|
998
1029
|
var _useState = React.useState(null),
|
|
999
1030
|
anchorEl = _useState[0],
|
|
@@ -1005,17 +1036,23 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
1005
1036
|
setAnchorEl(event.currentTarget);
|
|
1006
1037
|
};
|
|
1007
1038
|
|
|
1039
|
+
var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps(column) : muiTableHeadCellColumnActionsButtonProps;
|
|
1040
|
+
var mcTableHeadCellColumnActionsButtonProps = column.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.muiTableHeadCellColumnActionsButtonProps(column) : column.muiTableHeadCellColumnActionsButtonProps;
|
|
1041
|
+
|
|
1042
|
+
var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
|
|
1043
|
+
|
|
1008
1044
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
|
|
1009
1045
|
arrow: true,
|
|
1010
1046
|
enterDelay: 1000,
|
|
1011
1047
|
enterNextDelay: 1000,
|
|
1012
1048
|
placement: "top",
|
|
1013
1049
|
title: localization.columnActions
|
|
1014
|
-
}, React__default.createElement(material.IconButton, {
|
|
1050
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
|
1015
1051
|
"aria-label": localization.columnActions,
|
|
1016
1052
|
onClick: handleClick,
|
|
1017
|
-
size: "small"
|
|
1018
|
-
|
|
1053
|
+
size: "small"
|
|
1054
|
+
}, iconButtonProps, {
|
|
1055
|
+
sx: _extends({
|
|
1019
1056
|
height: '2rem',
|
|
1020
1057
|
mr: '2px',
|
|
1021
1058
|
mt: '-0.2rem',
|
|
@@ -1025,8 +1062,8 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
1025
1062
|
'&:hover': {
|
|
1026
1063
|
opacity: 1
|
|
1027
1064
|
}
|
|
1028
|
-
}
|
|
1029
|
-
}, React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
|
1065
|
+
}, iconButtonProps.sx)
|
|
1066
|
+
}), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
|
1030
1067
|
anchorEl: anchorEl,
|
|
1031
1068
|
column: column,
|
|
1032
1069
|
setAnchorEl: setAnchorEl
|
|
@@ -1071,7 +1108,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
1071
1108
|
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);
|
|
1072
1109
|
var filterType = tableInstance.state.currentFilterTypes[column.id];
|
|
1073
1110
|
var filterTooltip = !!column.filterValue ? localization.filteringByColumn.replace('{column}', String(column.Header)).replace('{filterType}', filterType instanceof Function ? '' : // @ts-ignore
|
|
1074
|
-
localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.filterValue) : localization.showHideFilters;
|
|
1111
|
+
localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.filterValue).replace('" "', '') : localization.showHideFilters;
|
|
1075
1112
|
var columnHeader = column.render('Header');
|
|
1076
1113
|
return React__default.createElement(material.TableCell, Object.assign({
|
|
1077
1114
|
align: isParentHeader ? 'center' : 'left'
|
|
@@ -1135,7 +1172,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
1135
1172
|
display: 'flex',
|
|
1136
1173
|
flexWrap: 'nowrap'
|
|
1137
1174
|
}
|
|
1138
|
-
}, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
|
|
1175
|
+
}, !disableColumnActions && !column.disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
|
|
1139
1176
|
column: column
|
|
1140
1177
|
}), enableColumnResizing && !isParentHeader && React__default.createElement(material.Divider, Object.assign({
|
|
1141
1178
|
flexItem: true,
|
|
@@ -1156,174 +1193,42 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
1156
1193
|
})));
|
|
1157
1194
|
};
|
|
1158
1195
|
|
|
1159
|
-
var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
1160
|
-
var _cell$column$muiTable;
|
|
1161
|
-
|
|
1162
|
-
var cell = _ref.cell;
|
|
1163
|
-
|
|
1164
|
-
var _useMRT = useMRT(),
|
|
1165
|
-
muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
|
|
1166
|
-
setCurrentEditingRow = _useMRT.setCurrentEditingRow,
|
|
1167
|
-
currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
|
|
1168
|
-
|
|
1169
|
-
var handleChange = function handleChange(event) {
|
|
1170
|
-
if (currentEditingRow) {
|
|
1171
|
-
cell.row.values[cell.column.id] = event.target.value;
|
|
1172
|
-
setCurrentEditingRow(_extends({}, currentEditingRow));
|
|
1173
|
-
}
|
|
1174
|
-
|
|
1175
|
-
cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
|
|
1176
|
-
};
|
|
1177
|
-
|
|
1178
|
-
var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
|
|
1179
|
-
var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
|
|
1180
|
-
|
|
1181
|
-
var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
|
|
1182
|
-
style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
|
|
1183
|
-
});
|
|
1184
|
-
|
|
1185
|
-
if (!cell.column.disableEditing && cell.column.Edit) {
|
|
1186
|
-
return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
|
|
1187
|
-
cell: cell
|
|
1188
|
-
})));
|
|
1189
|
-
}
|
|
1190
|
-
|
|
1191
|
-
return React__default.createElement(material.TextField, Object.assign({
|
|
1192
|
-
margin: "dense",
|
|
1193
|
-
onChange: handleChange,
|
|
1194
|
-
onClick: function onClick(e) {
|
|
1195
|
-
return e.stopPropagation();
|
|
1196
|
-
},
|
|
1197
|
-
placeholder: cell.column.Header,
|
|
1198
|
-
value: cell.value,
|
|
1199
|
-
variant: "standard"
|
|
1200
|
-
}, textFieldProps));
|
|
1201
|
-
};
|
|
1202
|
-
|
|
1203
|
-
var MRT_CopyButton = function MRT_CopyButton(_ref) {
|
|
1204
|
-
var cell = _ref.cell;
|
|
1205
|
-
|
|
1206
|
-
var _useMRT = useMRT(),
|
|
1207
|
-
localization = _useMRT.localization;
|
|
1208
|
-
|
|
1209
|
-
var _useState = React.useState(false),
|
|
1210
|
-
copied = _useState[0],
|
|
1211
|
-
setCopied = _useState[1];
|
|
1212
|
-
|
|
1213
|
-
var handleCopy = function handleCopy(text) {
|
|
1214
|
-
navigator.clipboard.writeText(text);
|
|
1215
|
-
setCopied(true);
|
|
1216
|
-
setTimeout(function () {
|
|
1217
|
-
return setCopied(false);
|
|
1218
|
-
}, 4000);
|
|
1219
|
-
};
|
|
1220
|
-
|
|
1221
|
-
return React__default.createElement(material.Tooltip, {
|
|
1222
|
-
arrow: true,
|
|
1223
|
-
enterDelay: 1000,
|
|
1224
|
-
enterNextDelay: 1000,
|
|
1225
|
-
placement: "top",
|
|
1226
|
-
title: copied ? localization.copiedToClipboard : localization.clickToCopy
|
|
1227
|
-
}, React__default.createElement(material.Button, {
|
|
1228
|
-
"aria-label": localization.clickToCopy,
|
|
1229
|
-
onClick: function onClick() {
|
|
1230
|
-
return handleCopy(cell.value);
|
|
1231
|
-
},
|
|
1232
|
-
size: "small",
|
|
1233
|
-
sx: {
|
|
1234
|
-
backgroundColor: 'transparent',
|
|
1235
|
-
color: 'inherit',
|
|
1236
|
-
letterSpacing: 'inherit',
|
|
1237
|
-
fontFamily: 'inherit',
|
|
1238
|
-
fontSize: 'inherit',
|
|
1239
|
-
m: '-0.25rem',
|
|
1240
|
-
textTransform: 'inherit',
|
|
1241
|
-
textAlign: 'inherit',
|
|
1242
|
-
minWidth: 'unset'
|
|
1243
|
-
},
|
|
1244
|
-
variant: "text"
|
|
1245
|
-
}, cell.render('Cell')));
|
|
1246
|
-
};
|
|
1247
|
-
|
|
1248
|
-
var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
|
|
1249
|
-
return {
|
|
1250
|
-
p: densePadding ? '0.5rem' : '1rem',
|
|
1251
|
-
transition: 'all 0.2s ease-in-out',
|
|
1252
|
-
whiteSpace: densePadding ? 'nowrap' : 'normal'
|
|
1253
|
-
};
|
|
1254
|
-
};
|
|
1255
|
-
var commonTableBodyButtonCellStyles = function commonTableBodyButtonCellStyles(densePadding) {
|
|
1256
|
-
return {
|
|
1257
|
-
p: densePadding ? '1px' : '0.6rem',
|
|
1258
|
-
textAlign: 'center',
|
|
1259
|
-
transition: 'all 0.2s ease-in-out'
|
|
1260
|
-
};
|
|
1261
|
-
};
|
|
1262
|
-
var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
1263
|
-
var cell = _ref.cell;
|
|
1264
|
-
|
|
1265
|
-
var _useMRT = useMRT(),
|
|
1266
|
-
enableClickToCopy = _useMRT.enableClickToCopy,
|
|
1267
|
-
isLoading = _useMRT.isLoading,
|
|
1268
|
-
muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
|
|
1269
|
-
muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
|
|
1270
|
-
onCellClick = _useMRT.onCellClick,
|
|
1271
|
-
_useMRT$tableInstance = _useMRT.tableInstance.state,
|
|
1272
|
-
currentEditingRow = _useMRT$tableInstance.currentEditingRow,
|
|
1273
|
-
densePadding = _useMRT$tableInstance.densePadding;
|
|
1274
|
-
|
|
1275
|
-
var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
|
|
1276
|
-
var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
|
|
1277
|
-
|
|
1278
|
-
var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
|
|
1279
|
-
style: _extends({}, cell.getCellProps().style, mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style, mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style)
|
|
1280
|
-
});
|
|
1281
|
-
|
|
1282
|
-
return React__default.createElement(material.TableCell, Object.assign({
|
|
1283
|
-
onClick: function onClick(event) {
|
|
1284
|
-
return onCellClick == null ? void 0 : onCellClick(event, cell);
|
|
1285
|
-
}
|
|
1286
|
-
}, tableCellProps, {
|
|
1287
|
-
sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
|
|
1288
|
-
}), isLoading ? React__default.createElement(material.Skeleton, Object.assign({
|
|
1289
|
-
animation: "wave",
|
|
1290
|
-
height: 20,
|
|
1291
|
-
width: Math.random() * (120 - 60) + 60
|
|
1292
|
-
}, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
|
|
1293
|
-
cell: cell
|
|
1294
|
-
}) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableClickToCopy && !cell.column.disableClickToCopy ? React__default.createElement(MRT_CopyButton, {
|
|
1295
|
-
cell: cell
|
|
1296
|
-
}) : cell.render('Cell'));
|
|
1297
|
-
};
|
|
1298
|
-
|
|
1299
1196
|
var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1300
1197
|
var row = _ref.row,
|
|
1301
1198
|
selectAll = _ref.selectAll;
|
|
1302
1199
|
|
|
1303
1200
|
var _useMRT = useMRT(),
|
|
1304
1201
|
localization = _useMRT.localization,
|
|
1305
|
-
|
|
1202
|
+
muiSelectCheckboxProps = _useMRT.muiSelectCheckboxProps,
|
|
1203
|
+
onSelectChange = _useMRT.onSelectChange,
|
|
1306
1204
|
onSelectAllChange = _useMRT.onSelectAllChange,
|
|
1307
|
-
tableInstance = _useMRT.tableInstance
|
|
1205
|
+
tableInstance = _useMRT.tableInstance,
|
|
1206
|
+
densePadding = _useMRT.tableInstance.state.densePadding;
|
|
1308
1207
|
|
|
1309
|
-
var
|
|
1208
|
+
var handleSelectChange = function handleSelectChange(event) {
|
|
1310
1209
|
if (selectAll) {
|
|
1311
1210
|
var _tableInstance$getTog;
|
|
1312
1211
|
|
|
1313
1212
|
tableInstance == null ? void 0 : tableInstance.getToggleAllRowsSelectedProps == null ? void 0 : (_tableInstance$getTog = tableInstance.getToggleAllRowsSelectedProps()) == null ? void 0 : _tableInstance$getTog.onChange == null ? void 0 : _tableInstance$getTog.onChange(event);
|
|
1314
|
-
onSelectAllChange == null ? void 0 : onSelectAllChange(event, tableInstance.
|
|
1213
|
+
onSelectAllChange == null ? void 0 : onSelectAllChange(event, event.target.checked ? tableInstance.rows : []);
|
|
1315
1214
|
} else if (row) {
|
|
1316
1215
|
var _row$getToggleRowSele;
|
|
1317
1216
|
|
|
1318
1217
|
row == null ? void 0 : (_row$getToggleRowSele = row.getToggleRowSelectedProps()) == null ? void 0 : _row$getToggleRowSele.onChange == null ? void 0 : _row$getToggleRowSele.onChange(event);
|
|
1319
|
-
|
|
1218
|
+
onSelectChange == null ? void 0 : onSelectChange(event, row, event.target.checked ? [].concat(tableInstance.selectedFlatRows, [row]) : tableInstance.selectedFlatRows.filter(function (selectedRow) {
|
|
1219
|
+
return selectedRow.id !== row.id;
|
|
1220
|
+
}));
|
|
1320
1221
|
}
|
|
1321
1222
|
};
|
|
1322
1223
|
|
|
1323
|
-
var
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
},
|
|
1224
|
+
var mTableBodyRowSelectCheckboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps(selectAll, row, tableInstance) : muiSelectCheckboxProps;
|
|
1225
|
+
var rtSelectCheckboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
|
|
1226
|
+
|
|
1227
|
+
var checkboxProps = _extends({}, mTableBodyRowSelectCheckboxProps, rtSelectCheckboxProps, {
|
|
1228
|
+
style: _extends({}, rtSelectCheckboxProps == null ? void 0 : rtSelectCheckboxProps.style, mTableBodyRowSelectCheckboxProps == null ? void 0 : mTableBodyRowSelectCheckboxProps.style)
|
|
1229
|
+
});
|
|
1230
|
+
|
|
1231
|
+
return React__default.createElement(material.Tooltip, {
|
|
1327
1232
|
arrow: true,
|
|
1328
1233
|
enterDelay: 1000,
|
|
1329
1234
|
enterNextDelay: 1000,
|
|
@@ -1332,10 +1237,11 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
|
1332
1237
|
inputProps: {
|
|
1333
1238
|
'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
|
1334
1239
|
},
|
|
1335
|
-
|
|
1240
|
+
size: densePadding ? 'small' : 'medium'
|
|
1336
1241
|
}, checkboxProps, {
|
|
1242
|
+
onChange: handleSelectChange,
|
|
1337
1243
|
title: undefined
|
|
1338
|
-
})))
|
|
1244
|
+
})));
|
|
1339
1245
|
};
|
|
1340
1246
|
|
|
1341
1247
|
var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
|
|
@@ -1345,11 +1251,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
|
|
|
1345
1251
|
localization = _useMRT.localization,
|
|
1346
1252
|
tableInstance = _useMRT.tableInstance;
|
|
1347
1253
|
|
|
1348
|
-
return React__default.createElement(material.
|
|
1349
|
-
size: "small"
|
|
1350
|
-
}, tableInstance.getToggleAllRowsExpandedProps(), {
|
|
1351
|
-
sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
|
|
1352
|
-
}), React__default.createElement(material.IconButton, {
|
|
1254
|
+
return React__default.createElement(material.IconButton, {
|
|
1353
1255
|
"aria-label": localization.expandAll,
|
|
1354
1256
|
title: localization.expandAll
|
|
1355
1257
|
}, React__default.createElement(DoubleArrowDownIcon, {
|
|
@@ -1357,7 +1259,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
|
|
|
1357
1259
|
transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
|
|
1358
1260
|
transition: 'transform 0.2s'
|
|
1359
1261
|
}
|
|
1360
|
-
}))
|
|
1262
|
+
}));
|
|
1361
1263
|
};
|
|
1362
1264
|
|
|
1363
1265
|
var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
|
|
@@ -1366,12 +1268,7 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
|
|
|
1366
1268
|
var _useMRT = useMRT(),
|
|
1367
1269
|
muiTableBodyCellProps = _useMRT.muiTableBodyCellProps;
|
|
1368
1270
|
|
|
1369
|
-
var
|
|
1370
|
-
|
|
1371
|
-
var tableCellProps = _extends({}, mTableBodyCellrops, {
|
|
1372
|
-
style: _extends({}, mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style)
|
|
1373
|
-
});
|
|
1374
|
-
|
|
1271
|
+
var tableCellProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
|
|
1375
1272
|
return React__default.createElement(material.TableCell, Object.assign({}, tableCellProps, {
|
|
1376
1273
|
sx: _extends({
|
|
1377
1274
|
width: width
|
|
@@ -1402,6 +1299,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
|
1402
1299
|
var _useMRT = useMRT(),
|
|
1403
1300
|
anyRowsCanExpand = _useMRT.anyRowsCanExpand,
|
|
1404
1301
|
disableExpandAll = _useMRT.disableExpandAll,
|
|
1302
|
+
disableSelectAll = _useMRT.disableSelectAll,
|
|
1405
1303
|
enableRowActions = _useMRT.enableRowActions,
|
|
1406
1304
|
enableRowEditing = _useMRT.enableRowEditing,
|
|
1407
1305
|
enableRowNumbers = _useMRT.enableRowNumbers,
|
|
@@ -1424,15 +1322,32 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
|
1424
1322
|
style: _extends({}, headerGroup.getHeaderGroupProps().style, mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style)
|
|
1425
1323
|
});
|
|
1426
1324
|
|
|
1427
|
-
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps),
|
|
1428
|
-
|
|
1429
|
-
},
|
|
1325
|
+
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(material.TableCell, Object.assign({
|
|
1326
|
+
size: "small"
|
|
1327
|
+
}, tableInstance.getToggleAllRowsExpandedProps(), {
|
|
1328
|
+
sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
|
|
1329
|
+
width: '3rem',
|
|
1330
|
+
maxWidth: '3rem',
|
|
1331
|
+
textAlign: 'center'
|
|
1332
|
+
})
|
|
1333
|
+
}), React__default.createElement(MRT_ExpandAllButton, null)) : React__default.createElement(MRT_TableSpacerCell, {
|
|
1430
1334
|
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
|
|
1431
|
-
}) : null, enableSelection ? !isParentHeader ? React__default.createElement(
|
|
1335
|
+
}) : null, enableSelection ? !isParentHeader && !disableSelectAll ? React__default.createElement(material.TableCell, {
|
|
1336
|
+
sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
|
|
1337
|
+
maxWidth: '3rem',
|
|
1338
|
+
width: '3rem',
|
|
1339
|
+
textAlign: 'center'
|
|
1340
|
+
})
|
|
1341
|
+
}, React__default.createElement(MRT_SelectCheckbox, {
|
|
1432
1342
|
selectAll: true
|
|
1433
|
-
}) : React__default.createElement(MRT_TableSpacerCell, {
|
|
1343
|
+
})) : React__default.createElement(MRT_TableSpacerCell, {
|
|
1434
1344
|
width: "1rem"
|
|
1435
|
-
}) : null,
|
|
1345
|
+
}) : null, enableRowNumbers && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(material.TableCell, {
|
|
1346
|
+
sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
|
|
1347
|
+
width: '2rem',
|
|
1348
|
+
maxWidth: '2rem'
|
|
1349
|
+
})
|
|
1350
|
+
}, "#")), headerGroup.headers.map(function (column) {
|
|
1436
1351
|
return React__default.createElement(MRT_TableHeadCell, {
|
|
1437
1352
|
key: column.getHeaderProps().key,
|
|
1438
1353
|
column: column
|
|
@@ -1454,6 +1369,153 @@ var MRT_TableHead = function MRT_TableHead() {
|
|
|
1454
1369
|
}));
|
|
1455
1370
|
};
|
|
1456
1371
|
|
|
1372
|
+
var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
1373
|
+
var cell = _ref.cell;
|
|
1374
|
+
|
|
1375
|
+
var _useMRT = useMRT(),
|
|
1376
|
+
muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
|
|
1377
|
+
setCurrentEditingRow = _useMRT.setCurrentEditingRow,
|
|
1378
|
+
currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
|
|
1379
|
+
|
|
1380
|
+
var handleChange = function handleChange(event) {
|
|
1381
|
+
if (currentEditingRow) {
|
|
1382
|
+
cell.row.values[cell.column.id] = event.target.value;
|
|
1383
|
+
setCurrentEditingRow(_extends({}, currentEditingRow));
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1386
|
+
cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
|
|
1387
|
+
};
|
|
1388
|
+
|
|
1389
|
+
var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
|
|
1390
|
+
var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
|
|
1391
|
+
|
|
1392
|
+
var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
|
|
1393
|
+
|
|
1394
|
+
if (!cell.column.disableEditing && cell.column.Edit) {
|
|
1395
|
+
return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
|
|
1396
|
+
cell: cell
|
|
1397
|
+
})));
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
return React__default.createElement(material.TextField, Object.assign({
|
|
1401
|
+
margin: "dense",
|
|
1402
|
+
onChange: handleChange,
|
|
1403
|
+
onClick: function onClick(e) {
|
|
1404
|
+
return e.stopPropagation();
|
|
1405
|
+
},
|
|
1406
|
+
placeholder: cell.column.Header,
|
|
1407
|
+
value: cell.value,
|
|
1408
|
+
variant: "standard"
|
|
1409
|
+
}, textFieldProps));
|
|
1410
|
+
};
|
|
1411
|
+
|
|
1412
|
+
var MRT_CopyButton = function MRT_CopyButton(_ref) {
|
|
1413
|
+
var cell = _ref.cell,
|
|
1414
|
+
children = _ref.children;
|
|
1415
|
+
|
|
1416
|
+
var _useMRT = useMRT(),
|
|
1417
|
+
localization = _useMRT.localization,
|
|
1418
|
+
muiTableBodyCellCopyButtonProps = _useMRT.muiTableBodyCellCopyButtonProps;
|
|
1419
|
+
|
|
1420
|
+
var _useState = React.useState(false),
|
|
1421
|
+
copied = _useState[0],
|
|
1422
|
+
setCopied = _useState[1];
|
|
1423
|
+
|
|
1424
|
+
var handleCopy = function handleCopy(text) {
|
|
1425
|
+
navigator.clipboard.writeText(text);
|
|
1426
|
+
setCopied(true);
|
|
1427
|
+
setTimeout(function () {
|
|
1428
|
+
return setCopied(false);
|
|
1429
|
+
}, 4000);
|
|
1430
|
+
};
|
|
1431
|
+
|
|
1432
|
+
var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps(cell) : muiTableBodyCellCopyButtonProps;
|
|
1433
|
+
var mcTableBodyCellCopyButtonProps = cell.column.muiTableBodyCellCopyButtonProps instanceof Function ? cell.column.muiTableBodyCellCopyButtonProps(cell) : cell.column.muiTableBodyCellCopyButtonProps;
|
|
1434
|
+
|
|
1435
|
+
var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
|
|
1436
|
+
|
|
1437
|
+
return React__default.createElement(material.Tooltip, {
|
|
1438
|
+
arrow: true,
|
|
1439
|
+
enterDelay: 1000,
|
|
1440
|
+
enterNextDelay: 1000,
|
|
1441
|
+
placement: "top",
|
|
1442
|
+
title: copied ? localization.copiedToClipboard : localization.clickToCopy
|
|
1443
|
+
}, React__default.createElement(material.Button, Object.assign({
|
|
1444
|
+
"aria-label": localization.clickToCopy,
|
|
1445
|
+
onClick: function onClick() {
|
|
1446
|
+
return handleCopy(cell.value);
|
|
1447
|
+
},
|
|
1448
|
+
size: "small"
|
|
1449
|
+
}, buttonProps, {
|
|
1450
|
+
sx: _extends({
|
|
1451
|
+
backgroundColor: 'transparent',
|
|
1452
|
+
border: 'none',
|
|
1453
|
+
color: 'inherit',
|
|
1454
|
+
fontFamily: 'inherit',
|
|
1455
|
+
fontSize: 'inherit',
|
|
1456
|
+
letterSpacing: 'inherit',
|
|
1457
|
+
m: '-0.25rem',
|
|
1458
|
+
minWidth: 'unset',
|
|
1459
|
+
textAlign: 'inherit',
|
|
1460
|
+
textTransform: 'inherit'
|
|
1461
|
+
}, buttonProps == null ? void 0 : buttonProps.sx),
|
|
1462
|
+
variant: "text"
|
|
1463
|
+
}), children));
|
|
1464
|
+
};
|
|
1465
|
+
|
|
1466
|
+
var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
|
|
1467
|
+
return {
|
|
1468
|
+
p: densePadding ? '0.5rem' : '1rem',
|
|
1469
|
+
transition: 'all 0.2s ease-in-out',
|
|
1470
|
+
whiteSpace: densePadding ? 'nowrap' : 'normal'
|
|
1471
|
+
};
|
|
1472
|
+
};
|
|
1473
|
+
var commonTableBodyButtonCellStyles = function commonTableBodyButtonCellStyles(densePadding) {
|
|
1474
|
+
return {
|
|
1475
|
+
p: densePadding ? '1px' : '0.6rem',
|
|
1476
|
+
textAlign: 'center',
|
|
1477
|
+
transition: 'all 0.2s ease-in-out'
|
|
1478
|
+
};
|
|
1479
|
+
};
|
|
1480
|
+
var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
1481
|
+
var cell = _ref.cell;
|
|
1482
|
+
|
|
1483
|
+
var _useMRT = useMRT(),
|
|
1484
|
+
enableClickToCopy = _useMRT.enableClickToCopy,
|
|
1485
|
+
isLoading = _useMRT.isLoading,
|
|
1486
|
+
muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
|
|
1487
|
+
muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
|
|
1488
|
+
onCellClick = _useMRT.onCellClick,
|
|
1489
|
+
_useMRT$tableInstance = _useMRT.tableInstance.state,
|
|
1490
|
+
currentEditingRow = _useMRT$tableInstance.currentEditingRow,
|
|
1491
|
+
densePadding = _useMRT$tableInstance.densePadding;
|
|
1492
|
+
|
|
1493
|
+
var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
|
|
1494
|
+
var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
|
|
1495
|
+
|
|
1496
|
+
var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
|
|
1497
|
+
style: _extends({}, cell.getCellProps().style, mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style, mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style)
|
|
1498
|
+
});
|
|
1499
|
+
|
|
1500
|
+
return React__default.createElement(material.TableCell, Object.assign({
|
|
1501
|
+
onClick: function onClick(event) {
|
|
1502
|
+
return onCellClick == null ? void 0 : onCellClick(event, cell);
|
|
1503
|
+
}
|
|
1504
|
+
}, tableCellProps, {
|
|
1505
|
+
sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
|
|
1506
|
+
}), isLoading ? React__default.createElement(material.Skeleton, Object.assign({
|
|
1507
|
+
animation: "wave",
|
|
1508
|
+
height: 20,
|
|
1509
|
+
width: Math.random() * (120 - 60) + 60
|
|
1510
|
+
}, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
|
|
1511
|
+
cell: cell
|
|
1512
|
+
}) : cell.isPlaceholder ? null : cell.isAggregated ? enableClickToCopy && !cell.column.disableClickToCopy ? React__default.createElement(MRT_CopyButton, {
|
|
1513
|
+
cell: cell
|
|
1514
|
+
}, cell.render('Aggregated')) : cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableClickToCopy && !cell.column.disableClickToCopy ? React__default.createElement(MRT_CopyButton, {
|
|
1515
|
+
cell: cell
|
|
1516
|
+
}, cell.render('Cell')) : cell.render('Cell'));
|
|
1517
|
+
};
|
|
1518
|
+
|
|
1457
1519
|
var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
|
|
1458
1520
|
var row = _ref.row;
|
|
1459
1521
|
|
|
@@ -1490,8 +1552,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
|
1490
1552
|
ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
|
|
1491
1553
|
localization = _useMRT.localization,
|
|
1492
1554
|
onRowExpandChange = _useMRT.onRowExpandChange,
|
|
1493
|
-
renderDetailPanel = _useMRT.renderDetailPanel
|
|
1494
|
-
densePadding = _useMRT.tableInstance.state.densePadding;
|
|
1555
|
+
renderDetailPanel = _useMRT.renderDetailPanel;
|
|
1495
1556
|
|
|
1496
1557
|
var handleToggleExpand = function handleToggleExpand(event) {
|
|
1497
1558
|
var _row$getToggleRowExpa;
|
|
@@ -1501,13 +1562,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
|
1501
1562
|
onRowExpandChange == null ? void 0 : onRowExpandChange(event, row);
|
|
1502
1563
|
};
|
|
1503
1564
|
|
|
1504
|
-
return React__default.createElement(material.
|
|
1505
|
-
size: "small",
|
|
1506
|
-
sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
|
|
1507
|
-
pl: row.depth + 0.5 + "rem",
|
|
1508
|
-
textAlign: 'left'
|
|
1509
|
-
})
|
|
1510
|
-
}, React__default.createElement(material.IconButton, Object.assign({
|
|
1565
|
+
return React__default.createElement(material.IconButton, Object.assign({
|
|
1511
1566
|
"aria-label": localization.expand,
|
|
1512
1567
|
disabled: !row.canExpand && !renderDetailPanel,
|
|
1513
1568
|
title: localization.expand
|
|
@@ -1518,7 +1573,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
|
1518
1573
|
transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
|
|
1519
1574
|
transition: 'transform 0.2s'
|
|
1520
1575
|
}
|
|
1521
|
-
}))
|
|
1576
|
+
}));
|
|
1522
1577
|
};
|
|
1523
1578
|
|
|
1524
1579
|
var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
@@ -2461,6 +2516,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
|
2461
2516
|
onRowClick = _useMRT.onRowClick,
|
|
2462
2517
|
positionActionsColumn = _useMRT.positionActionsColumn,
|
|
2463
2518
|
renderDetailPanel = _useMRT.renderDetailPanel,
|
|
2519
|
+
tableInstance = _useMRT.tableInstance,
|
|
2464
2520
|
densePadding = _useMRT.tableInstance.state.densePadding;
|
|
2465
2521
|
|
|
2466
2522
|
var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
|
|
@@ -2475,15 +2531,26 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
|
2475
2531
|
return onRowClick == null ? void 0 : onRowClick(event, row);
|
|
2476
2532
|
},
|
|
2477
2533
|
selected: row.isSelected
|
|
2478
|
-
}, tableRowProps),
|
|
2479
|
-
sx: _extends({}, commonTableBodyCellStyles(densePadding))
|
|
2480
|
-
}, row.index + 1), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
|
2534
|
+
}, tableRowProps), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
|
2481
2535
|
row: row
|
|
2482
|
-
}), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(
|
|
2536
|
+
}), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(material.TableCell, {
|
|
2537
|
+
size: "small",
|
|
2538
|
+
sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
|
|
2539
|
+
pl: row.depth + 0.5 + "rem",
|
|
2540
|
+
textAlign: 'left'
|
|
2541
|
+
})
|
|
2542
|
+
}, React__default.createElement(MRT_ExpandButton, {
|
|
2483
2543
|
row: row
|
|
2484
|
-
}), enableSelection && React__default.createElement(
|
|
2544
|
+
})), enableSelection && React__default.createElement(material.TableCell, {
|
|
2545
|
+
sx: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
|
|
2546
|
+
maxWidth: '3rem',
|
|
2547
|
+
width: '3rem'
|
|
2548
|
+
})
|
|
2549
|
+
}, React__default.createElement(MRT_SelectCheckbox, {
|
|
2485
2550
|
row: row
|
|
2486
|
-
}),
|
|
2551
|
+
})), enableRowNumbers && React__default.createElement(material.TableCell, {
|
|
2552
|
+
sx: _extends({}, commonTableBodyCellStyles(densePadding))
|
|
2553
|
+
}, row.index + 1), row.cells.map(function (cell) {
|
|
2487
2554
|
return React__default.createElement(MRT_TableBodyCell, {
|
|
2488
2555
|
key: cell.getCellProps().key,
|
|
2489
2556
|
cell: cell
|
|
@@ -2628,9 +2695,13 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
2628
2695
|
onGlobalFilterChange = _useMRT.onGlobalFilterChange,
|
|
2629
2696
|
tableInstance = _useMRT.tableInstance;
|
|
2630
2697
|
|
|
2631
|
-
var _useState = React.useState(
|
|
2632
|
-
|
|
2633
|
-
|
|
2698
|
+
var _useState = React.useState(null),
|
|
2699
|
+
anchorEl = _useState[0],
|
|
2700
|
+
setAnchorEl = _useState[1];
|
|
2701
|
+
|
|
2702
|
+
var _useState2 = React.useState(''),
|
|
2703
|
+
searchValue = _useState2[0],
|
|
2704
|
+
setSearchValue = _useState2[1];
|
|
2634
2705
|
|
|
2635
2706
|
var handleChange = reactTable.useAsyncDebounce(function (event) {
|
|
2636
2707
|
var _event$target$value;
|
|
@@ -2639,6 +2710,10 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
2639
2710
|
onGlobalFilterChange == null ? void 0 : onGlobalFilterChange(event);
|
|
2640
2711
|
}, 200);
|
|
2641
2712
|
|
|
2713
|
+
var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
|
|
2714
|
+
setAnchorEl(event.currentTarget);
|
|
2715
|
+
};
|
|
2716
|
+
|
|
2642
2717
|
var handleClear = function handleClear() {
|
|
2643
2718
|
setSearchValue('');
|
|
2644
2719
|
tableInstance.setGlobalFilter(undefined);
|
|
@@ -2659,9 +2734,20 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
2659
2734
|
InputProps: {
|
|
2660
2735
|
startAdornment: React__default.createElement(material.InputAdornment, {
|
|
2661
2736
|
position: "start"
|
|
2737
|
+
}, React__default.createElement(material.Tooltip, {
|
|
2738
|
+
arrow: true,
|
|
2739
|
+
title: localization.changeSearchMode
|
|
2740
|
+
}, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
|
|
2741
|
+
"aria-label": localization.changeSearchMode,
|
|
2742
|
+
onClick: handleGlobalFilterMenuOpen,
|
|
2743
|
+
size: "small",
|
|
2744
|
+
sx: {
|
|
2745
|
+
height: '1.75rem',
|
|
2746
|
+
width: '1.75rem'
|
|
2747
|
+
}
|
|
2662
2748
|
}, React__default.createElement(SearchIcon, {
|
|
2663
2749
|
fontSize: "small"
|
|
2664
|
-
})),
|
|
2750
|
+
}))))),
|
|
2665
2751
|
endAdornment: React__default.createElement(material.InputAdornment, {
|
|
2666
2752
|
position: "end"
|
|
2667
2753
|
}, React__default.createElement(material.IconButton, {
|
|
@@ -2678,7 +2764,10 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
2678
2764
|
sx: _extends({
|
|
2679
2765
|
justifySelf: 'end'
|
|
2680
2766
|
}, muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.sx)
|
|
2681
|
-
}))
|
|
2767
|
+
})), React__default.createElement(MRT_FilterTypeMenu, {
|
|
2768
|
+
anchorEl: anchorEl,
|
|
2769
|
+
setAnchorEl: setAnchorEl
|
|
2770
|
+
}));
|
|
2682
2771
|
};
|
|
2683
2772
|
|
|
2684
2773
|
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
|
@@ -3074,6 +3163,7 @@ var MRT_DefaultLocalization_EN = {
|
|
|
3074
3163
|
actions: 'Actions',
|
|
3075
3164
|
cancel: 'Cancel',
|
|
3076
3165
|
changeFilterMode: 'Change filter mode',
|
|
3166
|
+
changeSearchMode: 'Change search mode',
|
|
3077
3167
|
clearFilter: 'Clear filter',
|
|
3078
3168
|
clearSearch: 'Clear search',
|
|
3079
3169
|
clearSort: 'Clear sort',
|
|
@@ -3083,12 +3173,13 @@ var MRT_DefaultLocalization_EN = {
|
|
|
3083
3173
|
edit: 'Edit',
|
|
3084
3174
|
expand: 'Expand',
|
|
3085
3175
|
expandAll: 'Expand all',
|
|
3176
|
+
filterBestMatch: 'Best Match',
|
|
3177
|
+
filterBestMatchFirst: 'Best Match First',
|
|
3086
3178
|
filterByColumn: 'Filter by {column}',
|
|
3087
|
-
filterContains: 'Contains
|
|
3179
|
+
filterContains: 'Contains',
|
|
3088
3180
|
filterEmpty: 'Empty',
|
|
3089
3181
|
filterEndsWith: 'Ends With',
|
|
3090
3182
|
filterEquals: 'Equals',
|
|
3091
|
-
filterFuzzy: 'Fuzzy Match',
|
|
3092
3183
|
filterGreaterThan: 'Greater Than',
|
|
3093
3184
|
filterLessThan: 'Less Than',
|
|
3094
3185
|
filterMode: 'Filter Mode: {filterType}',
|
|
@@ -3158,7 +3249,7 @@ var MaterialReactTable = (function (_ref) {
|
|
|
3158
3249
|
} : _ref$defaultColumn,
|
|
3159
3250
|
filterTypes = _ref.filterTypes,
|
|
3160
3251
|
_ref$globalFilter = _ref.globalFilter,
|
|
3161
|
-
globalFilter = _ref$globalFilter === void 0 ?
|
|
3252
|
+
globalFilter = _ref$globalFilter === void 0 ? MRT_FILTER_TYPE.BEST_MATCH_FIRST : _ref$globalFilter,
|
|
3162
3253
|
icons = _ref.icons,
|
|
3163
3254
|
localization = _ref.localization,
|
|
3164
3255
|
_ref$positionActionsC = _ref.positionActionsColumn,
|