material-react-table 0.6.7 → 0.6.8
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 +4 -0
- package/dist/material-react-table.cjs.development.js +34 -27
- 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 +34 -27
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/utils.d.ts +2 -2
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +8 -0
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +19 -1
- package/src/head/MRT_TableHeadCell.tsx +5 -3
- package/src/head/MRT_TableHeadRow.tsx +2 -1
- package/src/inputs/MRT_EditCellTextField.tsx +0 -6
- package/src/inputs/MRT_FilterTextField.tsx +0 -4
- package/src/inputs/MRT_SelectCheckbox.tsx +5 -1
- package/src/menus/MRT_ColumnActionMenu.tsx +6 -1
- 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/utils.ts +8 -4
|
@@ -32,6 +32,8 @@ export declare type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D>
|
|
|
32
32
|
accessor?: string;
|
|
33
33
|
columns?: MRT_ColumnInterface<D>[];
|
|
34
34
|
disableClickToCopy?: boolean;
|
|
35
|
+
disableColumnActions?: boolean;
|
|
36
|
+
disableColumnHiding?: boolean;
|
|
35
37
|
disableEditing?: boolean;
|
|
36
38
|
disableFilters?: boolean;
|
|
37
39
|
filter?: MRT_FilterType | string | FilterType<D>;
|
|
@@ -44,6 +46,7 @@ export declare type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D>
|
|
|
44
46
|
muiTableBodyCellProps?: TableCellProps | ((cell: MRT_Cell<D>) => TableCellProps);
|
|
45
47
|
muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
|
|
46
48
|
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
|
|
49
|
+
muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | ((column: Column<D>) => IconButtonProps);
|
|
47
50
|
muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
|
|
48
51
|
onCellEditChange?: (event: ChangeEvent<HTMLInputElement>, cell: MRT_Cell<D>) => void;
|
|
49
52
|
onFilterChange?: (event: ChangeEvent<HTMLInputElement>, filterValue: any) => void;
|
|
@@ -109,6 +112,7 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
|
|
|
109
112
|
muiTableContainerProps?: TableContainerProps | ((tableInstance: MRT_TableInstance<D>) => TableContainerProps);
|
|
110
113
|
muiTableDetailPanelProps?: TableCellProps | ((row: Row<D>) => TableCellProps);
|
|
111
114
|
muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
|
|
115
|
+
muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | ((column: Column<D>) => IconButtonProps);
|
|
112
116
|
muiTableFooterProps?: TableFooterProps | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);
|
|
113
117
|
muiTableFooterRowProps?: TableRowProps | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
|
|
114
118
|
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
|
|
@@ -528,9 +528,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
|
528
528
|
var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps(column) : muiTableHeadCellFilterTextFieldProps;
|
|
529
529
|
var mcTableHeadCellFilterTextFieldProps = column.muiTableHeadCellFilterTextFieldProps instanceof Function ? column.muiTableHeadCellFilterTextFieldProps(column) : column.muiTableHeadCellFilterTextFieldProps;
|
|
530
530
|
|
|
531
|
-
var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps
|
|
532
|
-
style: _extends({}, mTableHeadCellFilterTextFieldProps == null ? void 0 : mTableHeadCellFilterTextFieldProps.style, mcTableHeadCellFilterTextFieldProps == null ? void 0 : mcTableHeadCellFilterTextFieldProps.style)
|
|
533
|
-
});
|
|
531
|
+
var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
|
|
534
532
|
|
|
535
533
|
var _useState2 = React.useState(''),
|
|
536
534
|
filterValue = _useState2[0],
|
|
@@ -733,7 +731,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
|
733
731
|
},
|
|
734
732
|
checked: switchChecked,
|
|
735
733
|
control: React__default.createElement(material.Switch, null),
|
|
736
|
-
disabled: isSubMenu && switchChecked,
|
|
734
|
+
disabled: isSubMenu && switchChecked || column.disableColumnHiding,
|
|
737
735
|
label: column.Header,
|
|
738
736
|
onChange: function onChange() {
|
|
739
737
|
return handleToggleColumnHidden(column);
|
|
@@ -756,6 +754,14 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
|
756
754
|
localization = _useMRT.localization,
|
|
757
755
|
tableInstance = _useMRT.tableInstance;
|
|
758
756
|
|
|
757
|
+
var hideAllColumns = function hideAllColumns() {
|
|
758
|
+
findLowestLevelCols(tableInstance.columns).filter(function (col) {
|
|
759
|
+
return !col.disableColumnHiding;
|
|
760
|
+
}).forEach(function (col) {
|
|
761
|
+
return col.toggleHidden(true);
|
|
762
|
+
});
|
|
763
|
+
};
|
|
764
|
+
|
|
759
765
|
return React__default.createElement(material.Menu, {
|
|
760
766
|
anchorEl: anchorEl,
|
|
761
767
|
open: !!anchorEl,
|
|
@@ -774,9 +780,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
|
774
780
|
}
|
|
775
781
|
}, !isSubMenu && React__default.createElement(material.Button, {
|
|
776
782
|
disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
|
|
777
|
-
onClick:
|
|
778
|
-
return tableInstance.toggleHideAllColumns(true);
|
|
779
|
-
}
|
|
783
|
+
onClick: hideAllColumns
|
|
780
784
|
}, localization.hideAll), React__default.createElement(material.Button, {
|
|
781
785
|
disabled: tableInstance.getToggleHideAllColumnsProps().checked,
|
|
782
786
|
onClick: function onClick() {
|
|
@@ -961,6 +965,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
961
965
|
}, React__default.createElement(material.Box, {
|
|
962
966
|
sx: commonListItemStyles
|
|
963
967
|
}, 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, {
|
|
968
|
+
disabled: column.disableColumnHiding,
|
|
964
969
|
key: 0,
|
|
965
970
|
onClick: handleHideColumn,
|
|
966
971
|
sx: commonMenuItemStyles$1
|
|
@@ -992,8 +997,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
992
997
|
var column = _ref.column;
|
|
993
998
|
|
|
994
999
|
var _useMRT = useMRT(),
|
|
1000
|
+
MoreVertIcon = _useMRT.icons.MoreVertIcon,
|
|
995
1001
|
localization = _useMRT.localization,
|
|
996
|
-
|
|
1002
|
+
muiTableHeadCellColumnActionsButtonProps = _useMRT.muiTableHeadCellColumnActionsButtonProps;
|
|
997
1003
|
|
|
998
1004
|
var _useState = React.useState(null),
|
|
999
1005
|
anchorEl = _useState[0],
|
|
@@ -1005,17 +1011,23 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
1005
1011
|
setAnchorEl(event.currentTarget);
|
|
1006
1012
|
};
|
|
1007
1013
|
|
|
1014
|
+
var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps(column) : muiTableHeadCellColumnActionsButtonProps;
|
|
1015
|
+
var mcTableHeadCellColumnActionsButtonProps = column.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.muiTableHeadCellColumnActionsButtonProps(column) : column.muiTableHeadCellColumnActionsButtonProps;
|
|
1016
|
+
|
|
1017
|
+
var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
|
|
1018
|
+
|
|
1008
1019
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
|
|
1009
1020
|
arrow: true,
|
|
1010
1021
|
enterDelay: 1000,
|
|
1011
1022
|
enterNextDelay: 1000,
|
|
1012
1023
|
placement: "top",
|
|
1013
1024
|
title: localization.columnActions
|
|
1014
|
-
}, React__default.createElement(material.IconButton, {
|
|
1025
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
|
1015
1026
|
"aria-label": localization.columnActions,
|
|
1016
1027
|
onClick: handleClick,
|
|
1017
|
-
size: "small"
|
|
1018
|
-
|
|
1028
|
+
size: "small"
|
|
1029
|
+
}, iconButtonProps, {
|
|
1030
|
+
sx: _extends({
|
|
1019
1031
|
height: '2rem',
|
|
1020
1032
|
mr: '2px',
|
|
1021
1033
|
mt: '-0.2rem',
|
|
@@ -1025,8 +1037,8 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
1025
1037
|
'&:hover': {
|
|
1026
1038
|
opacity: 1
|
|
1027
1039
|
}
|
|
1028
|
-
}
|
|
1029
|
-
}, React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
|
1040
|
+
}, iconButtonProps.sx)
|
|
1041
|
+
}), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
|
1030
1042
|
anchorEl: anchorEl,
|
|
1031
1043
|
column: column,
|
|
1032
1044
|
setAnchorEl: setAnchorEl
|
|
@@ -1135,7 +1147,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
1135
1147
|
display: 'flex',
|
|
1136
1148
|
flexWrap: 'nowrap'
|
|
1137
1149
|
}
|
|
1138
|
-
}, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
|
|
1150
|
+
}, !disableColumnActions && !column.disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
|
|
1139
1151
|
column: column
|
|
1140
1152
|
}), enableColumnResizing && !isParentHeader && React__default.createElement(material.Divider, Object.assign({
|
|
1141
1153
|
flexItem: true,
|
|
@@ -1157,8 +1169,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
1157
1169
|
};
|
|
1158
1170
|
|
|
1159
1171
|
var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
1160
|
-
var _cell$column$muiTable;
|
|
1161
|
-
|
|
1162
1172
|
var cell = _ref.cell;
|
|
1163
1173
|
|
|
1164
1174
|
var _useMRT = useMRT(),
|
|
@@ -1178,9 +1188,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
|
1178
1188
|
var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
|
|
1179
1189
|
var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
|
|
1180
1190
|
|
|
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
|
-
});
|
|
1191
|
+
var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
|
|
1184
1192
|
|
|
1185
1193
|
if (!cell.column.disableEditing && cell.column.Edit) {
|
|
1186
1194
|
return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
|
|
@@ -1322,7 +1330,10 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
|
1322
1330
|
|
|
1323
1331
|
var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
|
|
1324
1332
|
return React__default.createElement(material.TableCell, {
|
|
1325
|
-
sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
|
|
1333
|
+
sx: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
|
|
1334
|
+
maxWidth: '2rem',
|
|
1335
|
+
width: '2rem'
|
|
1336
|
+
})
|
|
1326
1337
|
}, React__default.createElement(material.Tooltip, {
|
|
1327
1338
|
arrow: true,
|
|
1328
1339
|
enterDelay: 1000,
|
|
@@ -1366,12 +1377,7 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
|
|
|
1366
1377
|
var _useMRT = useMRT(),
|
|
1367
1378
|
muiTableBodyCellProps = _useMRT.muiTableBodyCellProps;
|
|
1368
1379
|
|
|
1369
|
-
var
|
|
1370
|
-
|
|
1371
|
-
var tableCellProps = _extends({}, mTableBodyCellrops, {
|
|
1372
|
-
style: _extends({}, mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style)
|
|
1373
|
-
});
|
|
1374
|
-
|
|
1380
|
+
var tableCellProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
|
|
1375
1381
|
return React__default.createElement(material.TableCell, Object.assign({}, tableCellProps, {
|
|
1376
1382
|
sx: _extends({
|
|
1377
1383
|
width: width
|
|
@@ -1402,6 +1408,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
|
1402
1408
|
var _useMRT = useMRT(),
|
|
1403
1409
|
anyRowsCanExpand = _useMRT.anyRowsCanExpand,
|
|
1404
1410
|
disableExpandAll = _useMRT.disableExpandAll,
|
|
1411
|
+
disableSelectAll = _useMRT.disableSelectAll,
|
|
1405
1412
|
enableRowActions = _useMRT.enableRowActions,
|
|
1406
1413
|
enableRowEditing = _useMRT.enableRowEditing,
|
|
1407
1414
|
enableRowNumbers = _useMRT.enableRowNumbers,
|
|
@@ -1428,7 +1435,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
|
1428
1435
|
sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding))
|
|
1429
1436
|
}, "#")), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
|
|
1430
1437
|
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
|
|
1431
|
-
}) : null, enableSelection ? !isParentHeader ? React__default.createElement(MRT_SelectCheckbox, {
|
|
1438
|
+
}) : null, enableSelection ? !isParentHeader && !disableSelectAll ? React__default.createElement(MRT_SelectCheckbox, {
|
|
1432
1439
|
selectAll: true
|
|
1433
1440
|
}) : React__default.createElement(MRT_TableSpacerCell, {
|
|
1434
1441
|
width: "1rem"
|