material-react-table 0.23.5 → 0.25.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +61 -28
- package/dist/body/MRT_TableBodyCell.d.ts +2 -1
- package/dist/body/MRT_TableBodyRowGrabHandle.d.ts +9 -0
- package/dist/buttons/MRT_GrabHandleButton.d.ts +4 -2
- package/dist/head/MRT_TableHeadCellGrabHandle.d.ts +9 -0
- package/dist/localization.d.ts +1 -0
- package/dist/material-react-table.cjs.development.js +334 -221
- 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 +335 -222
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/utils.d.ts +3 -3
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +95 -35
- package/src/body/MRT_TableBodyCell.tsx +20 -4
- package/src/body/MRT_TableBodyRow.tsx +37 -3
- package/src/body/MRT_TableBodyRowGrabHandle.tsx +48 -0
- package/src/buttons/MRT_GrabHandleButton.tsx +12 -8
- package/src/head/MRT_TableHeadCell.tsx +40 -57
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +77 -0
- package/src/inputs/MRT_FilterTextField.tsx +4 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +13 -18
- package/src/localization.ts +2 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +17 -16
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +3 -3
- package/src/table/MRT_TableRoot.tsx +61 -25
- package/src/utils.ts +11 -9
@@ -80,6 +80,7 @@ var MRT_DefaultLocalization_EN = {
|
|
80
80
|
hideColumn: 'Hide {column} column',
|
81
81
|
max: 'Max',
|
82
82
|
min: 'Min',
|
83
|
+
move: 'Move',
|
83
84
|
pinToLeft: 'Pin to left',
|
84
85
|
pinToRight: 'Pin to right',
|
85
86
|
resetColumnSize: 'Reset column size',
|
@@ -421,8 +422,9 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
|
|
421
422
|
};
|
422
423
|
|
423
424
|
var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
|
424
|
-
var
|
425
|
-
|
425
|
+
var iconButtonProps = _ref.iconButtonProps,
|
426
|
+
onDragEnd = _ref.onDragEnd,
|
427
|
+
onDragStart = _ref.onDragStart,
|
426
428
|
table = _ref.table;
|
427
429
|
var _table$options = table.options,
|
428
430
|
DragHandleIcon = _table$options.icons.DragHandleIcon,
|
@@ -432,14 +434,15 @@ var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
|
|
432
434
|
enterDelay: 1000,
|
433
435
|
enterNextDelay: 1000,
|
434
436
|
placement: "top",
|
435
|
-
title: localization.
|
436
|
-
}, React__default.createElement(material.IconButton, {
|
437
|
+
title: localization.move
|
438
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
437
439
|
disableRipple: true,
|
438
440
|
draggable: "true",
|
439
|
-
onDragStart:
|
440
|
-
onDragEnd:
|
441
|
-
size: "small"
|
442
|
-
|
441
|
+
onDragStart: onDragStart,
|
442
|
+
onDragEnd: onDragEnd,
|
443
|
+
size: "small"
|
444
|
+
}, iconButtonProps, {
|
445
|
+
sx: _extends({
|
443
446
|
cursor: 'grab',
|
444
447
|
m: 0,
|
445
448
|
opacity: 0.5,
|
@@ -452,8 +455,8 @@ var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
|
|
452
455
|
'&:active': {
|
453
456
|
cursor: 'grabbing'
|
454
457
|
}
|
455
|
-
}
|
456
|
-
}, React__default.createElement(DragHandleIcon, null)));
|
458
|
+
}, iconButtonProps == null ? void 0 : iconButtonProps.sx)
|
459
|
+
}), React__default.createElement(DragHandleIcon, null)));
|
457
460
|
};
|
458
461
|
|
459
462
|
var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
|
@@ -649,16 +652,16 @@ var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
|
|
649
652
|
return columnDef;
|
650
653
|
});
|
651
654
|
};
|
652
|
-
var reorderColumn = function reorderColumn(
|
653
|
-
if (
|
654
|
-
|
655
|
+
var reorderColumn = function reorderColumn(draggedColumn, targetColumn, columnOrder) {
|
656
|
+
if (draggedColumn.getCanPin()) {
|
657
|
+
draggedColumn.pin(targetColumn.getIsPinned());
|
655
658
|
}
|
656
659
|
|
657
|
-
columnOrder.splice(columnOrder.indexOf(
|
660
|
+
columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
|
658
661
|
return [].concat(columnOrder);
|
659
662
|
};
|
660
663
|
var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
|
661
|
-
return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
|
664
|
+
return [(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag', (props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-row-expand', props.enableRowSelection && 'mrt-row-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
|
662
665
|
};
|
663
666
|
var getTrailingDisplayColumnIds = function getTrailingDisplayColumnIds(props) {
|
664
667
|
return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions'];
|
@@ -734,7 +737,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
734
737
|
};
|
735
738
|
|
736
739
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
|
737
|
-
disableRipple:
|
740
|
+
disableRipple: true,
|
738
741
|
ref: menuItemRef,
|
739
742
|
onDragEnter: handleDragEnter,
|
740
743
|
sx: function sx(theme) {
|
@@ -757,8 +760,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
|
|
757
760
|
}, !isSubMenu && columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
|
758
761
|
return col.columnDef.columnDefType === 'group';
|
759
762
|
}) && (columnDef.enableColumnOrdering !== false ? React__default.createElement(MRT_GrabHandleButton, {
|
760
|
-
|
761
|
-
|
763
|
+
onDragEnd: handleDragEnd,
|
764
|
+
onDragStart: handleDragStart,
|
762
765
|
table: table
|
763
766
|
}) : React__default.createElement(material.Box, {
|
764
767
|
sx: {
|
@@ -1000,7 +1003,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1000
1003
|
var handleGroupByColumn = function handleGroupByColumn() {
|
1001
1004
|
column.toggleGrouping();
|
1002
1005
|
setColumnOrder(function (old) {
|
1003
|
-
return ['mrt-expand'].concat(old);
|
1006
|
+
return ['mrt-row-expand'].concat(old);
|
1004
1007
|
});
|
1005
1008
|
setAnchorEl(null);
|
1006
1009
|
};
|
@@ -1145,8 +1148,8 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1145
1148
|
sx: commonMenuItemStyles$1
|
1146
1149
|
}, React__default.createElement(material.Box, {
|
1147
1150
|
sx: commonListItemStyles
|
1148
|
-
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React__default.createElement(material.MenuItem, {
|
1149
|
-
disabled: !
|
1151
|
+
}, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && column.getCanResize() && [React__default.createElement(material.MenuItem, {
|
1152
|
+
disabled: !columnSizing[column.id],
|
1150
1153
|
key: 0,
|
1151
1154
|
onClick: handleResetColumnSize,
|
1152
1155
|
sx: commonMenuItemStyles$1
|
@@ -1362,19 +1365,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1362
1365
|
var _getState = getState(),
|
1363
1366
|
density = _getState.density;
|
1364
1367
|
|
1365
|
-
var
|
1366
|
-
if (selectAll) {
|
1367
|
-
if (selectAllMode === 'all') {
|
1368
|
-
table.getToggleAllRowsSelectedHandler()(event);
|
1369
|
-
} else if (selectAllMode === 'page') {
|
1370
|
-
table.getToggleAllPageRowsSelectedHandler()(event);
|
1371
|
-
}
|
1372
|
-
} else if (row) {
|
1373
|
-
row == null ? void 0 : row.getToggleSelectedHandler()(event);
|
1374
|
-
}
|
1375
|
-
};
|
1376
|
-
|
1377
|
-
var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
1368
|
+
var checkboxProps = !row ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
|
1378
1369
|
table: table
|
1379
1370
|
}) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
|
1380
1371
|
row: row,
|
@@ -1391,12 +1382,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1391
1382
|
inputProps: {
|
1392
1383
|
'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
|
1393
1384
|
},
|
1394
|
-
onChange:
|
1385
|
+
onChange: !row ? selectAllMode === 'all' ? table.getToggleAllRowsSelectedHandler() : table.getToggleAllPageRowsSelectedHandler() : row.getToggleSelectedHandler(),
|
1395
1386
|
size: density === 'compact' ? 'small' : 'medium'
|
1396
1387
|
}, checkboxProps, {
|
1397
1388
|
sx: _extends({
|
1398
|
-
height: density === 'compact' ? '1.
|
1399
|
-
width: density === 'compact' ? '1.
|
1389
|
+
height: density === 'compact' ? '1.5rem' : '2rem',
|
1390
|
+
width: density === 'compact' ? '1.5rem' : '2rem',
|
1391
|
+
m: '-1re.m'
|
1400
1392
|
}, checkboxProps == null ? void 0 : checkboxProps.sx)
|
1401
1393
|
})));
|
1402
1394
|
};
|
@@ -1993,6 +1985,66 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
|
|
1993
1985
|
}))));
|
1994
1986
|
};
|
1995
1987
|
|
1988
|
+
var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
|
1989
|
+
var header = _ref.header,
|
1990
|
+
table = _ref.table;
|
1991
|
+
var _table$options = table.options,
|
1992
|
+
MoreVertIcon = _table$options.icons.MoreVertIcon,
|
1993
|
+
localization = _table$options.localization,
|
1994
|
+
muiTableHeadCellColumnActionsButtonProps = _table$options.muiTableHeadCellColumnActionsButtonProps;
|
1995
|
+
var column = header.column;
|
1996
|
+
var columnDef = column.columnDef;
|
1997
|
+
|
1998
|
+
var _useState = React.useState(null),
|
1999
|
+
anchorEl = _useState[0],
|
2000
|
+
setAnchorEl = _useState[1];
|
2001
|
+
|
2002
|
+
var handleClick = function handleClick(event) {
|
2003
|
+
event.stopPropagation();
|
2004
|
+
event.preventDefault();
|
2005
|
+
setAnchorEl(event.currentTarget);
|
2006
|
+
};
|
2007
|
+
|
2008
|
+
var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps({
|
2009
|
+
column: column,
|
2010
|
+
table: table
|
2011
|
+
}) : muiTableHeadCellColumnActionsButtonProps;
|
2012
|
+
var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
|
2013
|
+
column: column,
|
2014
|
+
table: table
|
2015
|
+
}) : columnDef.muiTableHeadCellColumnActionsButtonProps;
|
2016
|
+
|
2017
|
+
var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
|
2018
|
+
|
2019
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
|
2020
|
+
arrow: true,
|
2021
|
+
enterDelay: 1000,
|
2022
|
+
enterNextDelay: 1000,
|
2023
|
+
placement: "top",
|
2024
|
+
title: localization.columnActions
|
2025
|
+
}, React__default.createElement(material.IconButton, Object.assign({
|
2026
|
+
"aria-label": localization.columnActions,
|
2027
|
+
onClick: handleClick,
|
2028
|
+
size: "small"
|
2029
|
+
}, iconButtonProps, {
|
2030
|
+
sx: _extends({
|
2031
|
+
height: '2rem',
|
2032
|
+
mt: '-0.2rem',
|
2033
|
+
opacity: 0.5,
|
2034
|
+
transition: 'opacity 0.2s',
|
2035
|
+
width: '2rem',
|
2036
|
+
'&:hover': {
|
2037
|
+
opacity: 1
|
2038
|
+
}
|
2039
|
+
}, iconButtonProps.sx)
|
2040
|
+
}), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
2041
|
+
anchorEl: anchorEl,
|
2042
|
+
header: header,
|
2043
|
+
setAnchorEl: setAnchorEl,
|
2044
|
+
table: table
|
2045
|
+
}));
|
2046
|
+
};
|
2047
|
+
|
1996
2048
|
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
1997
2049
|
var _localization$filterB, _columnDef$enabledCol, _localization$clearFi, _columnDef$filterSele;
|
1998
2050
|
|
@@ -2040,16 +2092,16 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2040
2092
|
setFilterValue = _useState2[1];
|
2041
2093
|
|
2042
2094
|
var handleChangeDebounced = React.useCallback(material.debounce(function (event) {
|
2095
|
+
var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
|
2096
|
+
|
2043
2097
|
if (inputIndex !== undefined) {
|
2044
2098
|
column.setFilterValue(function (old) {
|
2045
2099
|
var newFilterValues = old != null ? old : ['', ''];
|
2046
|
-
newFilterValues[inputIndex] =
|
2100
|
+
newFilterValues[inputIndex] = value;
|
2047
2101
|
return newFilterValues;
|
2048
2102
|
});
|
2049
2103
|
} else {
|
2050
|
-
|
2051
|
-
|
2052
|
-
column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
|
2104
|
+
column.setFilterValue(value != null ? value : undefined);
|
2053
2105
|
}
|
2054
2106
|
}, 200), []);
|
2055
2107
|
|
@@ -2291,6 +2343,64 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
|
|
2291
2343
|
}, React__default.createElement(FilterAltIcon, null)))));
|
2292
2344
|
};
|
2293
2345
|
|
2346
|
+
var MRT_TableHeadCellGrabHandle = function MRT_TableHeadCellGrabHandle(_ref) {
|
2347
|
+
var column = _ref.column,
|
2348
|
+
table = _ref.table,
|
2349
|
+
tableHeadCellRef = _ref.tableHeadCellRef;
|
2350
|
+
var getState = table.getState,
|
2351
|
+
_table$options = table.options,
|
2352
|
+
enableColumnOrdering = _table$options.enableColumnOrdering,
|
2353
|
+
muiTableHeadCellDragHandleProps = _table$options.muiTableHeadCellDragHandleProps,
|
2354
|
+
onColumnDrop = _table$options.onColumnDrop,
|
2355
|
+
setColumnOrder = table.setColumnOrder,
|
2356
|
+
setCurrentDraggingColumn = table.setCurrentDraggingColumn,
|
2357
|
+
setCurrentHoveredColumn = table.setCurrentHoveredColumn;
|
2358
|
+
var columnDef = column.columnDef;
|
2359
|
+
|
2360
|
+
var _getState = getState(),
|
2361
|
+
currentHoveredColumn = _getState.currentHoveredColumn,
|
2362
|
+
currentDraggingColumn = _getState.currentDraggingColumn,
|
2363
|
+
columnOrder = _getState.columnOrder;
|
2364
|
+
|
2365
|
+
var mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function ? muiTableHeadCellDragHandleProps({
|
2366
|
+
column: column,
|
2367
|
+
table: table
|
2368
|
+
}) : muiTableHeadCellDragHandleProps;
|
2369
|
+
var mcIconButtonProps = columnDef.muiTableHeadCellDragHandleProps instanceof Function ? columnDef.muiTableHeadCellDragHandleProps({
|
2370
|
+
column: column,
|
2371
|
+
table: table
|
2372
|
+
}) : columnDef.muiTableHeadCellDragHandleProps;
|
2373
|
+
|
2374
|
+
var iconButtonProps = _extends({}, mIconButtonProps, mcIconButtonProps);
|
2375
|
+
|
2376
|
+
var handleDragStart = function handleDragStart(e) {
|
2377
|
+
setCurrentDraggingColumn(column);
|
2378
|
+
e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
|
2379
|
+
};
|
2380
|
+
|
2381
|
+
var handleDragEnd = function handleDragEnd(event) {
|
2382
|
+
onColumnDrop == null ? void 0 : onColumnDrop({
|
2383
|
+
event: event,
|
2384
|
+
draggedColumn: column,
|
2385
|
+
targetColumn: currentHoveredColumn
|
2386
|
+
});
|
2387
|
+
|
2388
|
+
if (enableColumnOrdering && currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
|
2389
|
+
setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
|
2390
|
+
}
|
2391
|
+
|
2392
|
+
setCurrentDraggingColumn(null);
|
2393
|
+
setCurrentHoveredColumn(null);
|
2394
|
+
};
|
2395
|
+
|
2396
|
+
return React__default.createElement(MRT_GrabHandleButton, {
|
2397
|
+
iconButtonProps: iconButtonProps,
|
2398
|
+
onDragStart: handleDragStart,
|
2399
|
+
onDragEnd: handleDragEnd,
|
2400
|
+
table: table
|
2401
|
+
});
|
2402
|
+
};
|
2403
|
+
|
2294
2404
|
var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
|
2295
2405
|
var _getState$columnSizin;
|
2296
2406
|
|
@@ -2362,66 +2472,6 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
|
|
2362
2472
|
}));
|
2363
2473
|
};
|
2364
2474
|
|
2365
|
-
var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
|
2366
|
-
var header = _ref.header,
|
2367
|
-
table = _ref.table;
|
2368
|
-
var _table$options = table.options,
|
2369
|
-
MoreVertIcon = _table$options.icons.MoreVertIcon,
|
2370
|
-
localization = _table$options.localization,
|
2371
|
-
muiTableHeadCellColumnActionsButtonProps = _table$options.muiTableHeadCellColumnActionsButtonProps;
|
2372
|
-
var column = header.column;
|
2373
|
-
var columnDef = column.columnDef;
|
2374
|
-
|
2375
|
-
var _useState = React.useState(null),
|
2376
|
-
anchorEl = _useState[0],
|
2377
|
-
setAnchorEl = _useState[1];
|
2378
|
-
|
2379
|
-
var handleClick = function handleClick(event) {
|
2380
|
-
event.stopPropagation();
|
2381
|
-
event.preventDefault();
|
2382
|
-
setAnchorEl(event.currentTarget);
|
2383
|
-
};
|
2384
|
-
|
2385
|
-
var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps({
|
2386
|
-
column: column,
|
2387
|
-
table: table
|
2388
|
-
}) : muiTableHeadCellColumnActionsButtonProps;
|
2389
|
-
var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
|
2390
|
-
column: column,
|
2391
|
-
table: table
|
2392
|
-
}) : columnDef.muiTableHeadCellColumnActionsButtonProps;
|
2393
|
-
|
2394
|
-
var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
|
2395
|
-
|
2396
|
-
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
|
2397
|
-
arrow: true,
|
2398
|
-
enterDelay: 1000,
|
2399
|
-
enterNextDelay: 1000,
|
2400
|
-
placement: "top",
|
2401
|
-
title: localization.columnActions
|
2402
|
-
}, React__default.createElement(material.IconButton, Object.assign({
|
2403
|
-
"aria-label": localization.columnActions,
|
2404
|
-
onClick: handleClick,
|
2405
|
-
size: "small"
|
2406
|
-
}, iconButtonProps, {
|
2407
|
-
sx: _extends({
|
2408
|
-
height: '2rem',
|
2409
|
-
mt: '-0.2rem',
|
2410
|
-
opacity: 0.5,
|
2411
|
-
transition: 'opacity 0.2s',
|
2412
|
-
width: '2rem',
|
2413
|
-
'&:hover': {
|
2414
|
-
opacity: 1
|
2415
|
-
}
|
2416
|
-
}, iconButtonProps.sx)
|
2417
|
-
}), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
|
2418
|
-
anchorEl: anchorEl,
|
2419
|
-
header: header,
|
2420
|
-
setAnchorEl: setAnchorEl,
|
2421
|
-
table: table
|
2422
|
-
}));
|
2423
|
-
};
|
2424
|
-
|
2425
2475
|
var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
2426
2476
|
var _ref2, _columnDef$header$len, _columnDef$header;
|
2427
2477
|
|
@@ -2431,17 +2481,15 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2431
2481
|
var getState = table.getState,
|
2432
2482
|
_table$options = table.options,
|
2433
2483
|
enableColumnActions = _table$options.enableColumnActions,
|
2484
|
+
enableColumnDragging = _table$options.enableColumnDragging,
|
2434
2485
|
enableColumnOrdering = _table$options.enableColumnOrdering,
|
2435
2486
|
enableColumnResizing = _table$options.enableColumnResizing,
|
2436
2487
|
enableGrouping = _table$options.enableGrouping,
|
2437
2488
|
enableMultiSort = _table$options.enableMultiSort,
|
2438
2489
|
muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
|
2439
|
-
setColumnOrder = table.setColumnOrder,
|
2440
|
-
setCurrentDraggingColumn = table.setCurrentDraggingColumn,
|
2441
2490
|
setCurrentHoveredColumn = table.setCurrentHoveredColumn;
|
2442
2491
|
|
2443
2492
|
var _getState = getState(),
|
2444
|
-
columnOrder = _getState.columnOrder,
|
2445
2493
|
density = _getState.density,
|
2446
2494
|
currentDraggingColumn = _getState.currentDraggingColumn,
|
2447
2495
|
currentHoveredColumn = _getState.currentHoveredColumn;
|
@@ -2460,11 +2508,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2460
2508
|
|
2461
2509
|
var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
|
2462
2510
|
|
2463
|
-
var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
|
2464
|
-
header: header,
|
2465
|
-
table: table
|
2466
|
-
}) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
|
2467
|
-
|
2468
2511
|
var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
|
2469
2512
|
return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
|
2470
2513
|
};
|
@@ -2477,25 +2520,9 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2477
2520
|
return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
|
2478
2521
|
};
|
2479
2522
|
|
2480
|
-
var tableHeadCellRef = React__default.useRef(null);
|
2481
|
-
|
2482
|
-
var handleDragStart = function handleDragStart(e) {
|
2483
|
-
setCurrentDraggingColumn(column);
|
2484
|
-
e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
|
2485
|
-
};
|
2486
|
-
|
2487
|
-
var handleDragEnd = function handleDragEnd(_e) {
|
2488
|
-
setCurrentDraggingColumn(null);
|
2489
|
-
setCurrentHoveredColumn(null);
|
2490
|
-
|
2491
|
-
if (currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
|
2492
|
-
setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
|
2493
|
-
}
|
2494
|
-
};
|
2495
|
-
|
2496
2523
|
var handleDragEnter = function handleDragEnter(_e) {
|
2497
|
-
if (currentDraggingColumn) {
|
2498
|
-
setCurrentHoveredColumn(
|
2524
|
+
if (enableColumnOrdering && currentDraggingColumn) {
|
2525
|
+
setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2499
2526
|
}
|
2500
2527
|
};
|
2501
2528
|
|
@@ -2505,6 +2532,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2505
2532
|
borderRight: draggingBorder,
|
2506
2533
|
borderTop: draggingBorder
|
2507
2534
|
} : undefined;
|
2535
|
+
var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
|
2536
|
+
header: header,
|
2537
|
+
table: table
|
2538
|
+
}) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
|
2539
|
+
var tableHeadCellRef = React__default.useRef(null);
|
2508
2540
|
return React__default.createElement(material.TableCell, Object.assign({
|
2509
2541
|
align: columnDefType === 'group' ? 'center' : 'left',
|
2510
2542
|
colSpan: header.colSpan,
|
@@ -2529,7 +2561,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2529
2561
|
right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
|
2530
2562
|
transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
|
2531
2563
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
2532
|
-
verticalAlign: '
|
2564
|
+
verticalAlign: 'top',
|
2533
2565
|
zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
|
2534
2566
|
}, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
|
2535
2567
|
maxWidth: "min(" + column.getSize() + "px, fit-content)",
|
@@ -2537,7 +2569,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2537
2569
|
width: header.getSize()
|
2538
2570
|
});
|
2539
2571
|
}
|
2540
|
-
}), header.isPlaceholder ? null :
|
2572
|
+
}), header.isPlaceholder ? null : React__default.createElement(material.Box, {
|
2541
2573
|
sx: {
|
2542
2574
|
alignItems: 'flex-start',
|
2543
2575
|
display: 'flex',
|
@@ -2554,27 +2586,27 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2554
2586
|
flexWrap: 'nowrap',
|
2555
2587
|
whiteSpace: ((_columnDef$header$len = (_columnDef$header = columnDef.header) == null ? void 0 : _columnDef$header.length) != null ? _columnDef$header$len : 0) < 24 ? 'nowrap' : 'normal'
|
2556
2588
|
}
|
2557
|
-
}, headerElement,
|
2589
|
+
}, headerElement, column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
|
2558
2590
|
header: header,
|
2559
2591
|
table: table
|
2560
|
-
}),
|
2592
|
+
}), column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
|
2561
2593
|
header: header,
|
2562
2594
|
table: table
|
2563
|
-
})), React__default.createElement(material.Box, {
|
2595
|
+
})), columnDefType !== 'group' && React__default.createElement(material.Box, {
|
2564
2596
|
sx: {
|
2565
2597
|
whiteSpace: 'nowrap'
|
2566
2598
|
}
|
2567
|
-
},
|
2568
|
-
|
2569
|
-
|
2570
|
-
|
2571
|
-
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false &&
|
2599
|
+
}, (enableColumnDragging && columnDef.enableColumnDragging !== false || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_TableHeadCellGrabHandle, {
|
2600
|
+
column: column,
|
2601
|
+
table: table,
|
2602
|
+
tableHeadCellRef: tableHeadCellRef
|
2603
|
+
}), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
|
2572
2604
|
header: header,
|
2573
2605
|
table: table
|
2574
2606
|
})), column.getCanResize() && React__default.createElement(MRT_TableHeadCellResizeHandle, {
|
2575
2607
|
header: header,
|
2576
2608
|
table: table
|
2577
|
-
})),
|
2609
|
+
})), column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterContainer, {
|
2578
2610
|
header: header,
|
2579
2611
|
table: table
|
2580
2612
|
}));
|
@@ -2769,18 +2801,55 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
|
|
2769
2801
|
}), children));
|
2770
2802
|
};
|
2771
2803
|
|
2804
|
+
var MRT_TableBodyRowGrabHandle = function MRT_TableBodyRowGrabHandle(_ref) {
|
2805
|
+
var cell = _ref.cell,
|
2806
|
+
rowRef = _ref.rowRef,
|
2807
|
+
table = _ref.table;
|
2808
|
+
var _table$options = table.options,
|
2809
|
+
muiTableBodyRowDragHandleProps = _table$options.muiTableBodyRowDragHandleProps,
|
2810
|
+
onRowDrop = _table$options.onRowDrop;
|
2811
|
+
var iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function ? muiTableBodyRowDragHandleProps({
|
2812
|
+
row: cell.row,
|
2813
|
+
table: table
|
2814
|
+
}) : muiTableBodyRowDragHandleProps;
|
2815
|
+
|
2816
|
+
var handleDragStart = function handleDragStart(e) {
|
2817
|
+
e.dataTransfer.setDragImage(rowRef.current, 0, 0);
|
2818
|
+
table.setCurrentDraggingRow(cell.row);
|
2819
|
+
};
|
2820
|
+
|
2821
|
+
var handleDragEnd = function handleDragEnd(event) {
|
2822
|
+
onRowDrop == null ? void 0 : onRowDrop({
|
2823
|
+
event: event,
|
2824
|
+
draggedRow: table.getState().currentDraggingRow,
|
2825
|
+
targetRow: table.getState().currentHoveredRow
|
2826
|
+
});
|
2827
|
+
table.setCurrentDraggingRow(null);
|
2828
|
+
table.setCurrentHoveredRow(null);
|
2829
|
+
};
|
2830
|
+
|
2831
|
+
return React__default.createElement(MRT_GrabHandleButton, {
|
2832
|
+
iconButtonProps: iconButtonProps,
|
2833
|
+
onDragStart: handleDragStart,
|
2834
|
+
onDragEnd: handleDragEnd,
|
2835
|
+
table: table
|
2836
|
+
});
|
2837
|
+
};
|
2838
|
+
|
2772
2839
|
var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
2773
2840
|
var _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
|
2774
2841
|
|
2775
2842
|
var cell = _ref.cell,
|
2776
2843
|
enableHover = _ref.enableHover,
|
2777
2844
|
rowIndex = _ref.rowIndex,
|
2845
|
+
rowRef = _ref.rowRef,
|
2778
2846
|
table = _ref.table;
|
2779
2847
|
var theme = material.useTheme();
|
2780
2848
|
var getState = table.getState,
|
2781
2849
|
_table$options = table.options,
|
2782
2850
|
editingMode = _table$options.editingMode,
|
2783
2851
|
enableClickToCopy = _table$options.enableClickToCopy,
|
2852
|
+
enableColumnOrdering = _table$options.enableColumnOrdering,
|
2784
2853
|
enableEditing = _table$options.enableEditing,
|
2785
2854
|
enableRowNumbers = _table$options.enableRowNumbers,
|
2786
2855
|
muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
|
@@ -2847,15 +2916,16 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2847
2916
|
};
|
2848
2917
|
|
2849
2918
|
var handleDragEnter = function handleDragEnter(_e) {
|
2850
|
-
if (currentDraggingColumn) {
|
2851
|
-
setCurrentHoveredColumn(
|
2919
|
+
if (enableColumnOrdering && currentDraggingColumn) {
|
2920
|
+
setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
|
2852
2921
|
}
|
2853
2922
|
};
|
2854
2923
|
|
2855
2924
|
var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
|
2856
2925
|
var draggingBorders = draggingBorder ? {
|
2857
2926
|
borderLeft: draggingBorder,
|
2858
|
-
borderRight: draggingBorder
|
2927
|
+
borderRight: draggingBorder,
|
2928
|
+
borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
|
2859
2929
|
} : undefined;
|
2860
2930
|
return React__default.createElement(material.TableCell, Object.assign({
|
2861
2931
|
onDoubleClick: handleDoubleClick,
|
@@ -2872,7 +2942,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2872
2942
|
opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
|
2873
2943
|
overflow: 'hidden',
|
2874
2944
|
p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
|
2875
|
-
pl: column.id === 'mrt-expand' ? row.depth + (density === 'compact' ? 0.5 : density === 'comfortable' ? 0.75 : 1.25) + "rem" : undefined,
|
2945
|
+
pl: column.id === 'mrt-row-expand' ? row.depth + (density === 'compact' ? 0.5 : density === 'comfortable' ? 0.75 : 1.25) + "rem" : undefined,
|
2876
2946
|
position: column.getIsPinned() ? 'sticky' : 'relative',
|
2877
2947
|
right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
|
2878
2948
|
textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
|
@@ -2892,7 +2962,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2892
2962
|
animation: "wave",
|
2893
2963
|
height: 20,
|
2894
2964
|
width: skeletonWidth
|
2895
|
-
}, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 :
|
2965
|
+
}, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : column.id === 'mrt-row-drag' ? React__default.createElement(MRT_TableBodyRowGrabHandle, {
|
2966
|
+
cell: cell,
|
2967
|
+
rowRef: rowRef,
|
2968
|
+
table: table
|
2969
|
+
}) : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
|
2896
2970
|
cell: cell,
|
2897
2971
|
table: table
|
2898
2972
|
}) : isEditing ? React__default.createElement(MRT_EditCellTextField, {
|
@@ -2950,26 +3024,50 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
2950
3024
|
var row = _ref.row,
|
2951
3025
|
rowIndex = _ref.rowIndex,
|
2952
3026
|
table = _ref.table;
|
3027
|
+
var theme = material.useTheme();
|
2953
3028
|
var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
|
3029
|
+
getState = table.getState,
|
2954
3030
|
_table$options = table.options,
|
3031
|
+
enableRowOrdering = _table$options.enableRowOrdering,
|
2955
3032
|
muiTableBodyRowProps = _table$options.muiTableBodyRowProps,
|
2956
|
-
renderDetailPanel = _table$options.renderDetailPanel
|
3033
|
+
renderDetailPanel = _table$options.renderDetailPanel,
|
3034
|
+
setCurrentHoveredRow = table.setCurrentHoveredRow;
|
3035
|
+
|
3036
|
+
var _getState = getState(),
|
3037
|
+
currentDraggingRow = _getState.currentDraggingRow,
|
3038
|
+
currentHoveredRow = _getState.currentHoveredRow;
|
3039
|
+
|
2957
3040
|
var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
|
2958
3041
|
row: row,
|
2959
3042
|
table: table
|
2960
3043
|
}) : muiTableBodyRowProps;
|
3044
|
+
|
3045
|
+
var handleDragEnter = function handleDragEnter(_e) {
|
3046
|
+
if (enableRowOrdering && currentDraggingRow) {
|
3047
|
+
setCurrentHoveredRow(row);
|
3048
|
+
}
|
3049
|
+
};
|
3050
|
+
|
3051
|
+
var rowRef = React.useRef(null);
|
3052
|
+
var draggingBorder = (currentDraggingRow == null ? void 0 : currentDraggingRow.id) === row.id ? "1px dashed " + theme.palette.divider : (currentHoveredRow == null ? void 0 : currentHoveredRow.id) === row.id ? "2px dashed " + theme.palette.primary.main : undefined;
|
3053
|
+
var draggingBorders = draggingBorder ? {
|
3054
|
+
border: draggingBorder
|
3055
|
+
} : undefined;
|
2961
3056
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
|
3057
|
+
onDragEnter: handleDragEnter,
|
2962
3058
|
hover: true,
|
2963
|
-
selected: row.getIsSelected()
|
3059
|
+
selected: row.getIsSelected(),
|
3060
|
+
ref: rowRef
|
2964
3061
|
}, tableRowProps, {
|
2965
3062
|
sx: function sx(theme) {
|
2966
3063
|
return _extends({
|
2967
3064
|
backgroundColor: material.lighten(theme.palette.background["default"], 0.06),
|
3065
|
+
opacity: (currentDraggingRow == null ? void 0 : currentDraggingRow.id) === row.id || (currentHoveredRow == null ? void 0 : currentHoveredRow.id) === row.id ? 0.5 : 1,
|
2968
3066
|
transition: 'all 0.2s ease-in-out',
|
2969
3067
|
'&:hover td': {
|
2970
3068
|
backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
|
2971
3069
|
}
|
2972
|
-
}, tableRowProps == null ? void 0 : tableRowProps.sx);
|
3070
|
+
}, tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
|
2973
3071
|
}
|
2974
3072
|
}), row == null ? void 0 : (_row$getVisibleCells = row.getVisibleCells()) == null ? void 0 : _row$getVisibleCells.map == null ? void 0 : _row$getVisibleCells.map(function (cell) {
|
2975
3073
|
return React__default.createElement(MRT_TableBodyCell, {
|
@@ -2977,6 +3075,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
2977
3075
|
key: cell.id,
|
2978
3076
|
enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
|
2979
3077
|
rowIndex: rowIndex,
|
3078
|
+
rowRef: rowRef,
|
2980
3079
|
table: table
|
2981
3080
|
});
|
2982
3081
|
})), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
|
@@ -3276,8 +3375,23 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
|
|
3276
3375
|
}));
|
3277
3376
|
};
|
3278
3377
|
|
3378
|
+
var defaultDisplayColumnDefOptions = {
|
3379
|
+
columnDefType: 'display',
|
3380
|
+
enableClickToCopy: false,
|
3381
|
+
enableColumnActions: false,
|
3382
|
+
enableColumnDragging: false,
|
3383
|
+
enableColumnFilter: false,
|
3384
|
+
enableColumnOrdering: false,
|
3385
|
+
enableEditing: false,
|
3386
|
+
enableGlobalFilter: false,
|
3387
|
+
enableGrouping: false,
|
3388
|
+
enableHiding: false,
|
3389
|
+
enablePinning: false,
|
3390
|
+
enableResizing: false,
|
3391
|
+
enableSorting: false
|
3392
|
+
};
|
3279
3393
|
var MRT_TableRoot = function MRT_TableRoot(props) {
|
3280
|
-
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
|
3394
|
+
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$current3, _initialState$current4, _initialState$current5, _initialState$current6, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentDragg2, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onCurrentHover2, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
|
3281
3395
|
|
3282
3396
|
var _useState = React.useState(props.tableId),
|
3283
3397
|
tableId = _useState[0],
|
@@ -3300,60 +3414,73 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3300
3414
|
columnOrder = _useState2[0],
|
3301
3415
|
setColumnOrder = _useState2[1];
|
3302
3416
|
|
3303
|
-
var _useState3 = React.useState((_initialState$current = initialState
|
3304
|
-
|
3305
|
-
|
3417
|
+
var _useState3 = React.useState((_initialState$current = initialState.currentDraggingColumn) != null ? _initialState$current : null),
|
3418
|
+
currentDraggingColumn = _useState3[0],
|
3419
|
+
setCurrentDraggingColumn = _useState3[1];
|
3306
3420
|
|
3307
|
-
var _useState4 = React.useState((_initialState$current2 = initialState
|
3308
|
-
|
3309
|
-
|
3421
|
+
var _useState4 = React.useState((_initialState$current2 = initialState.currentDraggingRow) != null ? _initialState$current2 : null),
|
3422
|
+
currentDraggingRow = _useState4[0],
|
3423
|
+
setCurrentDraggingRow = _useState4[1];
|
3310
3424
|
|
3311
|
-
var _useState5 = React.useState(null),
|
3312
|
-
|
3313
|
-
|
3425
|
+
var _useState5 = React.useState((_initialState$current3 = initialState.currentEditingCell) != null ? _initialState$current3 : null),
|
3426
|
+
currentEditingCell = _useState5[0],
|
3427
|
+
setCurrentEditingCell = _useState5[1];
|
3314
3428
|
|
3315
|
-
var _useState6 = React.useState(null),
|
3316
|
-
|
3317
|
-
|
3429
|
+
var _useState6 = React.useState((_initialState$current4 = initialState.currentEditingRow) != null ? _initialState$current4 : null),
|
3430
|
+
currentEditingRow = _useState6[0],
|
3431
|
+
setCurrentEditingRow = _useState6[1];
|
3318
3432
|
|
3319
|
-
var _useState7 = React.useState((_initialState$
|
3320
|
-
|
3321
|
-
|
3433
|
+
var _useState7 = React.useState((_initialState$current5 = initialState.currentHoveredColumn) != null ? _initialState$current5 : null),
|
3434
|
+
currentHoveredColumn = _useState7[0],
|
3435
|
+
setCurrentHoveredColumn = _useState7[1];
|
3322
3436
|
|
3323
|
-
var _useState8 = React.useState((_initialState$
|
3324
|
-
|
3325
|
-
|
3437
|
+
var _useState8 = React.useState((_initialState$current6 = initialState.currentHoveredRow) != null ? _initialState$current6 : null),
|
3438
|
+
currentHoveredRow = _useState8[0],
|
3439
|
+
setCurrentHoveredRow = _useState8[1];
|
3326
3440
|
|
3327
|
-
var _useState9 = React.useState((
|
3328
|
-
|
3329
|
-
|
3441
|
+
var _useState9 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
|
3442
|
+
density = _useState9[0],
|
3443
|
+
setDensity = _useState9[1];
|
3330
3444
|
|
3331
|
-
var _useState10 = React.useState((_initialState$
|
3332
|
-
|
3333
|
-
|
3445
|
+
var _useState10 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
|
3446
|
+
isFullScreen = _useState10[0],
|
3447
|
+
setIsFullScreen = _useState10[1];
|
3334
3448
|
|
3335
|
-
var _useState11 = React.useState((
|
3336
|
-
|
3337
|
-
|
3449
|
+
var _useState11 = React.useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
|
3450
|
+
showAlertBanner = _useState11[0],
|
3451
|
+
setShowAlertBanner = _useState11[1];
|
3338
3452
|
|
3339
|
-
var _useState12 = React.useState(
|
3453
|
+
var _useState12 = React.useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
|
3454
|
+
showColumnFilters = _useState12[0],
|
3455
|
+
setShowFilters = _useState12[1];
|
3456
|
+
|
3457
|
+
var _useState13 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
|
3458
|
+
showGlobalFilter = _useState13[0],
|
3459
|
+
setShowGlobalFilter = _useState13[1];
|
3460
|
+
|
3461
|
+
var _useState14 = React.useState(function () {
|
3340
3462
|
return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
|
3341
|
-
var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$
|
3463
|
+
var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
|
3342
3464
|
|
3343
|
-
return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$
|
3465
|
+
return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
|
3344
3466
|
})));
|
3345
3467
|
}),
|
3346
|
-
currentFilterFns =
|
3347
|
-
setCurrentFilterFns =
|
3468
|
+
currentFilterFns = _useState14[0],
|
3469
|
+
setCurrentFilterFns = _useState14[1];
|
3348
3470
|
|
3349
|
-
var
|
3350
|
-
currentGlobalFilterFn =
|
3351
|
-
setCurrentGlobalFilterFn =
|
3471
|
+
var _useState15 = React.useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
|
3472
|
+
currentGlobalFilterFn = _useState15[0],
|
3473
|
+
setCurrentGlobalFilterFn = _useState15[1];
|
3352
3474
|
|
3353
3475
|
var displayColumns = React.useMemo(function () {
|
3354
|
-
var _props$localization, _props$localization2, _props$localization3, _props$
|
3476
|
+
var _props$localization, _props$displayColumnD, _props$localization2, _props$displayColumnD2, _props$localization3, _props$displayColumnD3, _props$localization4, _props$displayColumnD4, _props$localization6, _props$displayColumnD5;
|
3355
3477
|
|
3356
|
-
return [columnOrder.includes('mrt-row-
|
3478
|
+
return [columnOrder.includes('mrt-row-drag') && _extends({
|
3479
|
+
header: (_props$localization = props.localization) == null ? void 0 : _props$localization.move,
|
3480
|
+
size: 60
|
3481
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD['mrt-row-drag'], {
|
3482
|
+
id: 'mrt-row-drag'
|
3483
|
+
}), columnOrder.includes('mrt-row-actions') && _extends({
|
3357
3484
|
Cell: function Cell(_ref5) {
|
3358
3485
|
var cell = _ref5.cell;
|
3359
3486
|
return React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
@@ -3361,13 +3488,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3361
3488
|
table: table
|
3362
3489
|
});
|
3363
3490
|
},
|
3364
|
-
|
3365
|
-
header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
|
3366
|
-
id: 'mrt-row-actions',
|
3367
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3368
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3491
|
+
header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.actions,
|
3369
3492
|
size: 70
|
3370
|
-
},
|
3493
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD2 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD2['mrt-row-actions'], {
|
3494
|
+
id: 'mrt-row-actions'
|
3495
|
+
}), columnOrder.includes('mrt-row-expand') && _extends({
|
3371
3496
|
Cell: function Cell(_ref6) {
|
3372
3497
|
var cell = _ref6.cell;
|
3373
3498
|
return React__default.createElement(MRT_ExpandButton, {
|
@@ -3380,13 +3505,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3380
3505
|
table: table
|
3381
3506
|
}) : null;
|
3382
3507
|
},
|
3383
|
-
|
3384
|
-
header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
|
3385
|
-
id: 'mrt-expand',
|
3386
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3387
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3508
|
+
header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.expand,
|
3388
3509
|
size: 60
|
3389
|
-
},
|
3510
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD3 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD3['mrt-row-expand'], {
|
3511
|
+
id: 'mrt-row-expand'
|
3512
|
+
}), columnOrder.includes('mrt-row-select') && _extends({
|
3390
3513
|
Cell: function Cell(_ref7) {
|
3391
3514
|
var cell = _ref7.cell;
|
3392
3515
|
return React__default.createElement(MRT_SelectCheckbox, {
|
@@ -3400,30 +3523,26 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3400
3523
|
table: table
|
3401
3524
|
}) : null;
|
3402
3525
|
},
|
3403
|
-
|
3404
|
-
header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
|
3405
|
-
id: 'mrt-select',
|
3406
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3407
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3526
|
+
header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.select,
|
3408
3527
|
size: 60
|
3409
|
-
},
|
3528
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD4 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD4['mrt-row-select'], {
|
3529
|
+
id: 'mrt-row-select'
|
3530
|
+
}), columnOrder.includes('mrt-row-numbers') && _extends({
|
3410
3531
|
Cell: function Cell(_ref8) {
|
3411
3532
|
var cell = _ref8.cell;
|
3412
3533
|
return cell.row.index + 1;
|
3413
3534
|
},
|
3414
3535
|
Header: function Header() {
|
3415
|
-
var _props$
|
3536
|
+
var _props$localization5;
|
3416
3537
|
|
3417
|
-
return (_props$
|
3538
|
+
return (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumber;
|
3418
3539
|
},
|
3419
|
-
|
3420
|
-
header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
|
3421
|
-
id: 'mrt-row-numbers',
|
3422
|
-
muiTableBodyCellProps: props.muiTableBodyCellProps,
|
3423
|
-
muiTableHeadCellProps: props.muiTableHeadCellProps,
|
3540
|
+
header: (_props$localization6 = props.localization) == null ? void 0 : _props$localization6.rowNumbers,
|
3424
3541
|
size: 60
|
3425
|
-
}
|
3426
|
-
|
3542
|
+
}, defaultDisplayColumnDefOptions, (_props$displayColumnD5 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD5['mrt-row-numbers'], {
|
3543
|
+
id: 'mrt-row-numbers'
|
3544
|
+
})].filter(Boolean);
|
3545
|
+
}, [columnOrder, props.displayColumnDefOptions, props.editingMode, props.enableColumnDragging, props.enableColumnOrdering, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowDragging, props.enableRowNumbers, props.enableRowOrdering, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
|
3427
3546
|
var columnDefs = React.useMemo(function () {
|
3428
3547
|
return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
|
3429
3548
|
}, [currentFilterFns, displayColumns, props.columns]);
|
@@ -3461,11 +3580,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3461
3580
|
state: _extends({
|
3462
3581
|
columnOrder: columnOrder,
|
3463
3582
|
currentDraggingColumn: currentDraggingColumn,
|
3583
|
+
currentDraggingRow: currentDraggingRow,
|
3464
3584
|
currentEditingCell: currentEditingCell,
|
3465
3585
|
currentEditingRow: currentEditingRow,
|
3466
3586
|
currentFilterFns: currentFilterFns,
|
3467
3587
|
currentGlobalFilterFn: currentGlobalFilterFn,
|
3468
3588
|
currentHoveredColumn: currentHoveredColumn,
|
3589
|
+
currentHoveredRow: currentHoveredRow,
|
3469
3590
|
density: density,
|
3470
3591
|
isFullScreen: isFullScreen,
|
3471
3592
|
showAlertBanner: showAlertBanner,
|
@@ -3475,11 +3596,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3475
3596
|
tableId: tableId
|
3476
3597
|
})), {
|
3477
3598
|
setCurrentDraggingColumn: (_props$onCurrentDragg = props.onCurrentDraggingColumnChange) != null ? _props$onCurrentDragg : setCurrentDraggingColumn,
|
3599
|
+
setCurrentDraggingRow: (_props$onCurrentDragg2 = props.onCurrentDraggingRowChange) != null ? _props$onCurrentDragg2 : setCurrentDraggingRow,
|
3478
3600
|
setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
|
3479
3601
|
setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
|
3480
3602
|
setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
|
3481
3603
|
setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
|
3482
3604
|
setCurrentHoveredColumn: (_props$onCurrentHover = props.onCurrentHoveredColumnChange) != null ? _props$onCurrentHover : setCurrentHoveredColumn,
|
3605
|
+
setCurrentHoveredRow: (_props$onCurrentHover2 = props.onCurrentHoveredRowChange) != null ? _props$onCurrentHover2 : setCurrentHoveredRow,
|
3483
3606
|
setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
|
3484
3607
|
setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
|
3485
3608
|
setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
|
@@ -3506,16 +3629,6 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
3506
3629
|
};
|
3507
3630
|
|
3508
3631
|
var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
|
3509
|
-
/**
|
3510
|
-
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
3511
|
-
*
|
3512
|
-
* See more info on creating columns and data on the official docs site:
|
3513
|
-
* @link https://www.material-react-table.com/docs/usage
|
3514
|
-
*
|
3515
|
-
* See the full props list on the official docs site:
|
3516
|
-
* @link https://www.material-react-table.com/docs/api/props
|
3517
|
-
*/
|
3518
|
-
|
3519
3632
|
var MaterialReactTable = (function (_ref) {
|
3520
3633
|
var _ref$autoResetExpande = _ref.autoResetExpanded,
|
3521
3634
|
autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
|