material-react-table 1.12.0-beta.1 → 1.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/cjs/index.js +147 -153
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/material-react-table.esm.js +148 -156
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/index.d.ts +1 -7
- package/package.json +23 -23
- package/src/body/MRT_TableBody.tsx +2 -3
- package/src/body/MRT_TableBodyRow.tsx +2 -3
|
@@ -76,19 +76,19 @@ import DialogContent from '@mui/material/DialogContent';
|
|
|
76
76
|
import DialogTitle from '@mui/material/DialogTitle';
|
|
77
77
|
import Stack from '@mui/material/Stack';
|
|
78
78
|
|
|
79
|
-
/******************************************************************************
|
|
80
|
-
Copyright (c) Microsoft Corporation.
|
|
81
|
-
|
|
82
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
83
|
-
purpose with or without fee is hereby granted.
|
|
84
|
-
|
|
85
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
86
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
87
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
88
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
89
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
90
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
91
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
79
|
+
/******************************************************************************
|
|
80
|
+
Copyright (c) Microsoft Corporation.
|
|
81
|
+
|
|
82
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
83
|
+
purpose with or without fee is hereby granted.
|
|
84
|
+
|
|
85
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
86
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
87
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
88
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
89
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
90
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
91
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
92
92
|
***************************************************************************** */
|
|
93
93
|
function __rest(s, e) {
|
|
94
94
|
var t = {};
|
|
@@ -534,14 +534,14 @@ const MRT_ExpandAllButton = ({ table }) => {
|
|
|
534
534
|
? muiExpandAllButtonProps({ table })
|
|
535
535
|
: muiExpandAllButtonProps;
|
|
536
536
|
const isAllRowsExpanded = getIsAllRowsExpanded();
|
|
537
|
-
return (jsx(Tooltip,
|
|
537
|
+
return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
|
|
538
538
|
? localization.collapseAll
|
|
539
|
-
: localization.expandAll
|
|
539
|
+
: localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
540
540
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
|
541
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined
|
|
541
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
|
|
542
542
|
transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
|
|
543
543
|
transition: 'transform 150ms',
|
|
544
|
-
} })) })) }) }))
|
|
544
|
+
} })) })) }) }));
|
|
545
545
|
};
|
|
546
546
|
|
|
547
547
|
const MRT_ExpandButton = ({ row, table, }) => {
|
|
@@ -559,14 +559,14 @@ const MRT_ExpandButton = ({ row, table, }) => {
|
|
|
559
559
|
row.toggleExpanded();
|
|
560
560
|
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
|
|
561
561
|
};
|
|
562
|
-
return (jsx(Tooltip,
|
|
562
|
+
return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
|
|
563
563
|
? localization.collapse
|
|
564
|
-
: localization.expand
|
|
564
|
+
: localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
565
565
|
? iconButtonProps.sx(theme)
|
|
566
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined
|
|
566
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
|
|
567
567
|
transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
|
|
568
568
|
transition: 'transform 150ms',
|
|
569
|
-
} })) })) }) }))
|
|
569
|
+
} })) })) }) }));
|
|
570
570
|
};
|
|
571
571
|
|
|
572
572
|
const mrtFilterOptions = (localization) => [
|
|
@@ -733,9 +733,9 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
733
733
|
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
|
|
734
734
|
};
|
|
735
735
|
const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
|
|
736
|
-
return (jsx(Menu,
|
|
736
|
+
return (jsx(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
|
|
737
737
|
dense: density === 'compact',
|
|
738
|
-
}
|
|
738
|
+
}, children: (_d = (header && column && columnDef
|
|
739
739
|
? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
|
|
740
740
|
column: column,
|
|
741
741
|
internalFilterOptions,
|
|
@@ -751,13 +751,13 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
|
|
|
751
751
|
internalFilterOptions,
|
|
752
752
|
onSelectFilterMode: handleSelectFilterMode,
|
|
753
753
|
table,
|
|
754
|
-
}))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (jsxs(MenuItem,
|
|
754
|
+
}))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (jsxs(MenuItem, { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
|
|
755
755
|
alignItems: 'center',
|
|
756
756
|
display: 'flex',
|
|
757
757
|
gap: '2ch',
|
|
758
758
|
my: 0,
|
|
759
759
|
py: '6px',
|
|
760
|
-
}, value: option
|
|
760
|
+
}, value: option, children: [jsx(Box, { sx: { fontSize: '1.25rem', width: '2ch' }, children: symbol }), label] }, index))) }));
|
|
761
761
|
};
|
|
762
762
|
|
|
763
763
|
const commonMenuItemStyles = {
|
|
@@ -831,9 +831,9 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
|
|
|
831
831
|
!isSelectFilter &&
|
|
832
832
|
(allowedColumnFilterOptions === undefined ||
|
|
833
833
|
!!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
|
|
834
|
-
return (jsxs(Menu,
|
|
834
|
+
return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
|
|
835
835
|
dense: density === 'compact',
|
|
836
|
-
}
|
|
836
|
+
}, children: [(_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
|
|
837
837
|
closeMenu: () => setAnchorEl(null),
|
|
838
838
|
column,
|
|
839
839
|
table,
|
|
@@ -844,47 +844,47 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
|
|
|
844
844
|
})) !== null && _d !== void 0 ? _d : (enableSorting &&
|
|
845
845
|
column.getCanSort() &&
|
|
846
846
|
[
|
|
847
|
-
enableSortingRemoval !== false && (jsx(MenuItem,
|
|
848
|
-
jsx(MenuItem,
|
|
849
|
-
jsx(MenuItem,
|
|
847
|
+
enableSortingRemoval !== false && (jsx(MenuItem, { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
|
|
848
|
+
jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 1),
|
|
849
|
+
jsx(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 2),
|
|
850
850
|
].filter(Boolean)), enableColumnFilters &&
|
|
851
851
|
column.getCanFilter() &&
|
|
852
852
|
[
|
|
853
|
-
jsx(MenuItem,
|
|
854
|
-
jsxs(MenuItem,
|
|
853
|
+
jsx(MenuItem, { disabled: !column.getFilterValue(), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 0),
|
|
854
|
+
jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
|
|
855
855
|
? handleOpenFilterModeMenu
|
|
856
|
-
: handleFilterByColumn, sx: commonMenuItemStyles
|
|
856
|
+
: handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 1),
|
|
857
857
|
showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 2)),
|
|
858
858
|
].filter(Boolean), enableGrouping &&
|
|
859
859
|
column.getCanGroup() && [
|
|
860
|
-
jsx(MenuItem,
|
|
860
|
+
jsx(MenuItem, { divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 0),
|
|
861
861
|
], enablePinning &&
|
|
862
862
|
column.getCanPin() && [
|
|
863
|
-
jsx(MenuItem,
|
|
864
|
-
jsx(MenuItem,
|
|
865
|
-
jsx(MenuItem,
|
|
863
|
+
jsx(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 0),
|
|
864
|
+
jsx(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 1),
|
|
865
|
+
jsx(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, {}) }), localization.unpin] }) }, 2),
|
|
866
866
|
], enableColumnResizing &&
|
|
867
867
|
column.getCanResize() && [
|
|
868
|
-
jsx(MenuItem,
|
|
868
|
+
jsx(MenuItem, { disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(RestartAltIcon, {}) }), localization.resetColumnSize] }) }, 0),
|
|
869
869
|
], enableHiding && [
|
|
870
|
-
jsx(MenuItem,
|
|
871
|
-
jsx(MenuItem,
|
|
872
|
-
.length, onClick: handleShowAllColumns, sx: commonMenuItemStyles
|
|
873
|
-
]] }))
|
|
870
|
+
jsx(MenuItem, { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(VisibilityOffIcon, {}) }), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 : _j.replace('{column}', String(columnDef.header))] }) }, 0),
|
|
871
|
+
jsx(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
|
|
872
|
+
.length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ViewColumnIcon, {}) }), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 : _k.replace('{column}', String(columnDef.header))] }) }, 1),
|
|
873
|
+
]] }));
|
|
874
874
|
};
|
|
875
875
|
|
|
876
876
|
const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
|
|
877
877
|
const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
|
|
878
878
|
const { density } = getState();
|
|
879
|
-
return (jsxs(Menu,
|
|
879
|
+
return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
|
|
880
880
|
dense: density === 'compact',
|
|
881
|
-
}
|
|
881
|
+
}, children: [enableEditing instanceof Function
|
|
882
882
|
? enableEditing(row)
|
|
883
|
-
: enableEditing && (jsx(MenuItem,
|
|
883
|
+
: enableEditing && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
|
|
884
884
|
row,
|
|
885
885
|
table,
|
|
886
886
|
closeMenu: () => setAnchorEl(null),
|
|
887
|
-
})] }))
|
|
887
|
+
})] }));
|
|
888
888
|
};
|
|
889
889
|
|
|
890
890
|
const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
|
|
@@ -911,7 +911,7 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
|
|
|
911
911
|
values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
|
|
912
912
|
});
|
|
913
913
|
};
|
|
914
|
-
return (jsx(Box,
|
|
914
|
+
return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave, children: jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, children: localization.cancel }), jsx(Button, { onClick: handleSave, variant: "contained", children: localization.save })] })) }));
|
|
915
915
|
};
|
|
916
916
|
|
|
917
917
|
const commonIconButtonStyles = {
|
|
@@ -941,7 +941,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
|
|
|
941
941
|
return (jsx(Fragment, { children: renderRowActions ? (renderRowActions({ cell, row, table })) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
|
|
942
942
|
(enableEditing instanceof Function
|
|
943
943
|
? enableEditing(row)
|
|
944
|
-
: enableEditing) ? (jsx(Tooltip,
|
|
944
|
+
: enableEditing) ? (jsx(Tooltip, { placement: "right", arrow: true, title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
|
|
945
945
|
};
|
|
946
946
|
|
|
947
947
|
const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
@@ -975,11 +975,11 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
|
|
|
975
975
|
}, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
|
|
976
976
|
? checkboxProps.sx(theme)
|
|
977
977
|
: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined });
|
|
978
|
-
return (jsx(Tooltip,
|
|
978
|
+
return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
|
|
979
979
|
? localization.toggleSelectAll
|
|
980
|
-
: localization.toggleSelectRow)
|
|
980
|
+
: localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
|
|
981
981
|
? table.getIsSomeRowsSelected() && !allRowsSelected
|
|
982
|
-
: row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }))
|
|
982
|
+
: row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
|
|
983
983
|
};
|
|
984
984
|
|
|
985
985
|
const MRT_GlobalFilterTextField = ({ table, }) => {
|
|
@@ -1018,15 +1018,15 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
|
|
|
1018
1018
|
}
|
|
1019
1019
|
isMounted.current = true;
|
|
1020
1020
|
}, [globalFilter]);
|
|
1021
|
-
return (jsxs(Collapse,
|
|
1022
|
-
startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment,
|
|
1023
|
-
endAdornment: (jsx(InputAdornment,
|
|
1021
|
+
return (jsxs(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true, children: [jsx(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
|
|
1022
|
+
startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { arrow: true, title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })),
|
|
1023
|
+
endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })),
|
|
1024
1024
|
} }, textFieldProps, { inputRef: (inputRef) => {
|
|
1025
1025
|
searchInputRef.current = inputRef;
|
|
1026
1026
|
if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
|
|
1027
1027
|
textFieldProps.inputRef = inputRef;
|
|
1028
1028
|
}
|
|
1029
|
-
} })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })] }))
|
|
1029
|
+
} })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })] }));
|
|
1030
1030
|
};
|
|
1031
1031
|
|
|
1032
1032
|
const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
|
|
@@ -1035,12 +1035,12 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
|
|
|
1035
1035
|
const linearProgressProps = muiLinearProgressProps instanceof Function
|
|
1036
1036
|
? muiLinearProgressProps({ isTopToolbar, table })
|
|
1037
1037
|
: muiLinearProgressProps;
|
|
1038
|
-
return (jsx(Collapse,
|
|
1038
|
+
return (jsx(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
|
|
1039
1039
|
bottom: isTopToolbar ? 0 : undefined,
|
|
1040
1040
|
position: 'absolute',
|
|
1041
1041
|
top: !isTopToolbar ? 0 : undefined,
|
|
1042
1042
|
width: '100%',
|
|
1043
|
-
}
|
|
1043
|
+
}, children: jsx(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps)) }));
|
|
1044
1044
|
};
|
|
1045
1045
|
|
|
1046
1046
|
const MRT_TablePagination = ({ table, position = 'bottom', }) => {
|
|
@@ -1096,13 +1096,13 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
|
|
|
1096
1096
|
? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
|
|
1097
1097
|
: null;
|
|
1098
1098
|
const groupedByMessage = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
|
|
1099
|
-
return (jsx(Collapse,
|
|
1099
|
+
return (jsx(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0, children: jsxs(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
|
|
1100
1100
|
? 0
|
|
1101
1101
|
: positionToolbarAlertBanner === 'bottom'
|
|
1102
1102
|
? '-1rem'
|
|
1103
1103
|
: undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
|
|
1104
1104
|
? alertProps.sx(theme)
|
|
1105
|
-
: alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx)))
|
|
1105
|
+
: alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
|
|
1106
1106
|
};
|
|
1107
1107
|
|
|
1108
1108
|
const MRT_FullScreenToggleButton = (_a) => {
|
|
@@ -1113,7 +1113,7 @@ const MRT_FullScreenToggleButton = (_a) => {
|
|
|
1113
1113
|
const handleToggleFullScreen = () => {
|
|
1114
1114
|
setIsFullScreen(!isFullScreen);
|
|
1115
1115
|
};
|
|
1116
|
-
return (jsx(Tooltip,
|
|
1116
|
+
return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
|
|
1117
1117
|
};
|
|
1118
1118
|
|
|
1119
1119
|
const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
|
@@ -1121,17 +1121,17 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
|
|
|
1121
1121
|
const handlePinColumn = (pinDirection) => {
|
|
1122
1122
|
column.pin(pinDirection);
|
|
1123
1123
|
};
|
|
1124
|
-
return (jsx(Box,
|
|
1124
|
+
return (jsx(Box, { sx: { minWidth: '70px', textAlign: 'center' }, children: column.getIsPinned() ? (jsx(Tooltip, { arrow: true, title: localization.unpin, children: jsx(IconButton, { onClick: () => handlePinColumn(false), size: "small", children: jsx(PushPinIcon, {}) }) })) : (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.pinToLeft, children: jsx(IconButton, { onClick: () => handlePinColumn('left'), size: "small", children: jsx(PushPinIcon, { style: {
|
|
1125
1125
|
transform: 'rotate(90deg)',
|
|
1126
|
-
} }) })
|
|
1126
|
+
} }) }) }), jsx(Tooltip, { arrow: true, title: localization.pinToRight, children: jsx(IconButton, { onClick: () => handlePinColumn('right'), size: "small", children: jsx(PushPinIcon, { style: {
|
|
1127
1127
|
transform: 'rotate(-90deg)',
|
|
1128
|
-
} }) })
|
|
1128
|
+
} }) }) })] })) }));
|
|
1129
1129
|
};
|
|
1130
1130
|
|
|
1131
1131
|
const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
|
|
1132
1132
|
var _a;
|
|
1133
1133
|
const { options: { icons: { DragHandleIcon }, localization, }, } = table;
|
|
1134
|
-
return (jsx(Tooltip,
|
|
1134
|
+
return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
|
|
1135
1135
|
var _a;
|
|
1136
1136
|
e.stopPropagation();
|
|
1137
1137
|
(_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
|
|
@@ -1142,7 +1142,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
|
|
|
1142
1142
|
cursor: 'grabbing',
|
|
1143
1143
|
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
1144
1144
|
? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
|
|
1145
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined
|
|
1145
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
|
|
1146
1146
|
};
|
|
1147
1147
|
|
|
1148
1148
|
const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, table, }) => {
|
|
@@ -1183,7 +1183,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
|
|
|
1183
1183
|
setHoveredColumn(column);
|
|
1184
1184
|
}
|
|
1185
1185
|
};
|
|
1186
|
-
return (jsxs(Fragment, { children: [jsx(MenuItem,
|
|
1186
|
+
return (jsxs(Fragment, { children: [jsx(MenuItem, { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
|
|
1187
1187
|
alignItems: 'center',
|
|
1188
1188
|
justifyContent: 'flex-start',
|
|
1189
1189
|
my: 0,
|
|
@@ -1196,11 +1196,11 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
|
|
|
1196
1196
|
: 'none',
|
|
1197
1197
|
pl: `${(column.depth + 0.5) * 2}rem`,
|
|
1198
1198
|
py: '6px',
|
|
1199
|
-
})
|
|
1199
|
+
}), children: jsxs(Box, { sx: {
|
|
1200
1200
|
display: 'flex',
|
|
1201
1201
|
flexWrap: 'nowrap',
|
|
1202
1202
|
gap: '8px',
|
|
1203
|
-
}
|
|
1203
|
+
}, children: [columnDefType !== 'group' &&
|
|
1204
1204
|
enableColumnOrdering &&
|
|
1205
1205
|
!allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
|
|
1206
1206
|
(columnDef.enableColumnOrdering !== false ? (jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsx(Box, { sx: { width: '28px' } }))), enablePinning &&
|
|
@@ -1211,7 +1211,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
|
|
|
1211
1211
|
opacity: columnDefType !== 'display' ? 1 : 0.5,
|
|
1212
1212
|
},
|
|
1213
1213
|
},
|
|
1214
|
-
}, checked: switchChecked, control: jsx(Tooltip,
|
|
1214
|
+
}, checked: switchChecked, control: jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsx(Switch, {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) }), (_a = column.columns) === null || _a === void 0 ? void 0 : _a.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
|
|
1215
1215
|
};
|
|
1216
1216
|
|
|
1217
1217
|
const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
|
|
@@ -1242,14 +1242,14 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
|
|
|
1242
1242
|
getRightLeafColumns(),
|
|
1243
1243
|
]);
|
|
1244
1244
|
const [hoveredColumn, setHoveredColumn] = useState(null);
|
|
1245
|
-
return (jsxs(Menu,
|
|
1245
|
+
return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
|
|
1246
1246
|
dense: density === 'compact',
|
|
1247
|
-
}
|
|
1247
|
+
}, children: [jsxs(Box, { sx: {
|
|
1248
1248
|
display: 'flex',
|
|
1249
1249
|
justifyContent: 'space-between',
|
|
1250
1250
|
p: '0.5rem',
|
|
1251
1251
|
pt: 0,
|
|
1252
|
-
}
|
|
1252
|
+
}, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns, children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enablePinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] }));
|
|
1253
1253
|
};
|
|
1254
1254
|
|
|
1255
1255
|
const MRT_ShowHideColumnsButton = (_a) => {
|
|
@@ -1260,7 +1260,7 @@ const MRT_ShowHideColumnsButton = (_a) => {
|
|
|
1260
1260
|
const handleClick = (event) => {
|
|
1261
1261
|
setAnchorEl(event.currentTarget);
|
|
1262
1262
|
};
|
|
1263
|
-
return (jsxs(Fragment, { children: [jsx(Tooltip,
|
|
1263
|
+
return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined, children: jsx(ViewColumnIcon, {}) })) }), anchorEl && (jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
|
|
1264
1264
|
};
|
|
1265
1265
|
|
|
1266
1266
|
const MRT_ToggleDensePaddingButton = (_a) => {
|
|
@@ -1276,7 +1276,7 @@ const MRT_ToggleDensePaddingButton = (_a) => {
|
|
|
1276
1276
|
: 'comfortable';
|
|
1277
1277
|
setDensity(nextDensity);
|
|
1278
1278
|
};
|
|
1279
|
-
return (jsx(Tooltip,
|
|
1279
|
+
return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined, children: density === 'compact' ? (jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsx(DensityMediumIcon, {})) : (jsx(DensityLargeIcon, {})) })) }));
|
|
1280
1280
|
};
|
|
1281
1281
|
|
|
1282
1282
|
const MRT_ToggleFiltersButton = (_a) => {
|
|
@@ -1287,7 +1287,7 @@ const MRT_ToggleFiltersButton = (_a) => {
|
|
|
1287
1287
|
const handleToggleShowFilters = () => {
|
|
1288
1288
|
setShowColumnFilters(!showColumnFilters);
|
|
1289
1289
|
};
|
|
1290
|
-
return (jsx(Tooltip,
|
|
1290
|
+
return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsx(FilterListOffIcon, {}) : jsx(FilterListIcon, {}) })) }));
|
|
1291
1291
|
};
|
|
1292
1292
|
|
|
1293
1293
|
const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
@@ -1299,21 +1299,21 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
|
1299
1299
|
setShowGlobalFilter(!showGlobalFilter);
|
|
1300
1300
|
queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
|
|
1301
1301
|
};
|
|
1302
|
-
return (jsx(Tooltip,
|
|
1302
|
+
return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
|
|
1303
1303
|
};
|
|
1304
1304
|
|
|
1305
1305
|
const MRT_ToolbarInternalButtons = ({ table, }) => {
|
|
1306
1306
|
var _a;
|
|
1307
1307
|
const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
|
|
1308
|
-
return (jsx(Box,
|
|
1308
|
+
return (jsx(Box, { sx: {
|
|
1309
1309
|
alignItems: 'center',
|
|
1310
1310
|
display: 'flex',
|
|
1311
1311
|
zIndex: 3,
|
|
1312
|
-
}
|
|
1312
|
+
}, children: (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
|
|
1313
1313
|
table,
|
|
1314
1314
|
})) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [enableFilters &&
|
|
1315
1315
|
enableGlobalFilter &&
|
|
1316
|
-
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters && enableColumnFilters && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enablePinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_FullScreenToggleButton, { table: table }))] })) }))
|
|
1316
|
+
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters && enableColumnFilters && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enablePinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_FullScreenToggleButton, { table: table }))] })) }));
|
|
1317
1317
|
};
|
|
1318
1318
|
|
|
1319
1319
|
const MRT_ToolbarDropZone = ({ table, }) => {
|
|
@@ -1332,7 +1332,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
|
|
|
1332
1332
|
!grouping.includes(draggingColumn.id));
|
|
1333
1333
|
}
|
|
1334
1334
|
}, [enableGrouping, draggingColumn, grouping]);
|
|
1335
|
-
return (jsx(Fade,
|
|
1335
|
+
return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, { className: "Mui-ToolbarDropZone", sx: (theme) => ({
|
|
1336
1336
|
alignItems: 'center',
|
|
1337
1337
|
backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
|
|
1338
1338
|
backdropFilter: 'blur(4px)',
|
|
@@ -1344,7 +1344,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
|
|
|
1344
1344
|
position: 'absolute',
|
|
1345
1345
|
width: '100%',
|
|
1346
1346
|
zIndex: 4,
|
|
1347
|
-
}), onDragEnter: handleDragEnter
|
|
1347
|
+
}), onDragEnter: handleDragEnter, children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '') }) }) }));
|
|
1348
1348
|
};
|
|
1349
1349
|
|
|
1350
1350
|
const commonToolbarStyles = ({ theme }) => ({
|
|
@@ -1376,7 +1376,7 @@ const MRT_TopToolbar = ({ table, }) => {
|
|
|
1376
1376
|
}
|
|
1377
1377
|
}, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
|
|
1378
1378
|
? toolbarProps.sx(theme)
|
|
1379
|
-
: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx)))
|
|
1379
|
+
: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))), children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
|
|
1380
1380
|
alignItems: 'flex-start',
|
|
1381
1381
|
boxSizing: 'border-box',
|
|
1382
1382
|
display: 'flex',
|
|
@@ -1386,12 +1386,12 @@ const MRT_TopToolbar = ({ table, }) => {
|
|
|
1386
1386
|
right: 0,
|
|
1387
1387
|
top: 0,
|
|
1388
1388
|
width: '100%',
|
|
1389
|
-
}
|
|
1389
|
+
}, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsx("span", {}), enableToolbarInternalActions ? (jsxs(Box, { sx: {
|
|
1390
1390
|
display: 'flex',
|
|
1391
1391
|
flexWrap: 'wrap-reverse',
|
|
1392
1392
|
justifyContent: 'flex-end',
|
|
1393
|
-
}
|
|
1394
|
-
positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })))] })
|
|
1393
|
+
}, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })), jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
|
|
1394
|
+
positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })))] }), enablePagination &&
|
|
1395
1395
|
['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { table: table, position: "top" })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
|
|
1396
1396
|
};
|
|
1397
1397
|
|
|
@@ -1413,21 +1413,21 @@ const MRT_BottomToolbar = ({ table, }) => {
|
|
|
1413
1413
|
}
|
|
1414
1414
|
}, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
|
|
1415
1415
|
? toolbarProps.sx(theme)
|
|
1416
|
-
: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx)))
|
|
1416
|
+
: toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))), children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
|
|
1417
1417
|
alignItems: 'center',
|
|
1418
1418
|
boxSizing: 'border-box',
|
|
1419
1419
|
display: 'flex',
|
|
1420
1420
|
justifyContent: 'space-between',
|
|
1421
1421
|
p: '0.5rem',
|
|
1422
1422
|
width: '100%',
|
|
1423
|
-
}
|
|
1423
|
+
}, children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsx("span", {})), jsx(Box, { sx: {
|
|
1424
1424
|
display: 'flex',
|
|
1425
1425
|
justifyContent: 'flex-end',
|
|
1426
1426
|
position: stackAlertBanner ? 'relative' : 'absolute',
|
|
1427
1427
|
right: 0,
|
|
1428
1428
|
top: 0,
|
|
1429
|
-
}
|
|
1430
|
-
['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { table: table, position: "bottom" })) })
|
|
1429
|
+
}, children: enablePagination &&
|
|
1430
|
+
['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { table: table, position: "bottom" })) })] })] })));
|
|
1431
1431
|
};
|
|
1432
1432
|
|
|
1433
1433
|
const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
|
|
@@ -1451,11 +1451,11 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
|
|
|
1451
1451
|
})
|
|
1452
1452
|
: columnDef.muiTableHeadCellColumnActionsButtonProps;
|
|
1453
1453
|
const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
|
|
1454
|
-
return (jsxs(Fragment, { children: [jsx(Tooltip,
|
|
1454
|
+
return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
|
|
1455
1455
|
opacity: 1,
|
|
1456
1456
|
} }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
|
|
1457
1457
|
? iconButtonProps.sx(theme)
|
|
1458
|
-
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined
|
|
1458
|
+
: iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
|
|
1459
1459
|
};
|
|
1460
1460
|
|
|
1461
1461
|
const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
@@ -1599,16 +1599,16 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1599
1599
|
}, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
|
|
1600
1600
|
? undefined
|
|
1601
1601
|
: filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue !== null && filterValue !== void 0 ? filterValue : '', variant: "standard", InputProps: {
|
|
1602
|
-
startAdornment: showChangeModeButton ? (jsxs(InputAdornment,
|
|
1603
|
-
endAdornment: !filterChipLabel && (jsx(InputAdornment,
|
|
1602
|
+
startAdornment: showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel }))] })) : null,
|
|
1603
|
+
endAdornment: !filterChipLabel && (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
|
|
1604
1604
|
height: '1.75rem',
|
|
1605
1605
|
width: '1.75rem',
|
|
1606
|
-
}
|
|
1606
|
+
}, children: jsx(CloseIcon, {}) }) }) }) })),
|
|
1607
1607
|
}, SelectProps: {
|
|
1608
1608
|
displayEmpty: true,
|
|
1609
1609
|
multiple: isMultiSelectFilter,
|
|
1610
1610
|
renderValue: isMultiSelectFilter
|
|
1611
|
-
? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box,
|
|
1611
|
+
? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
|
|
1612
1612
|
var _a;
|
|
1613
1613
|
const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
|
|
1614
1614
|
? option.value === value
|
|
@@ -1616,7 +1616,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1616
1616
|
return (jsx(Chip, { label: selectedValue instanceof Object
|
|
1617
1617
|
? selectedValue.text
|
|
1618
1618
|
: selectedValue }, value));
|
|
1619
|
-
}) }))
|
|
1619
|
+
}) }))
|
|
1620
1620
|
: undefined,
|
|
1621
1621
|
} }, textFieldProps, { inputRef: (inputRef) => {
|
|
1622
1622
|
filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
|
|
@@ -1632,7 +1632,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1632
1632
|
mr: '1.5rem',
|
|
1633
1633
|
} }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
|
|
1634
1634
|
? textFieldProps.sx(theme)
|
|
1635
|
-
: textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx)))
|
|
1635
|
+
: textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : (_l = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _l === void 0 ? void 0 : _l.map((option) => {
|
|
1636
1636
|
var _a;
|
|
1637
1637
|
let value;
|
|
1638
1638
|
let text;
|
|
@@ -1644,17 +1644,17 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1644
1644
|
value = option.value;
|
|
1645
1645
|
text = option.text;
|
|
1646
1646
|
}
|
|
1647
|
-
return (jsxs(MenuItem,
|
|
1647
|
+
return (jsxs(MenuItem, { sx: {
|
|
1648
1648
|
display: 'flex',
|
|
1649
1649
|
m: 0,
|
|
1650
1650
|
alignItems: 'center',
|
|
1651
1651
|
gap: '0.5rem',
|
|
1652
|
-
}, value: value
|
|
1652
|
+
}, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text] }, value));
|
|
1653
1653
|
})] })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })] }));
|
|
1654
1654
|
};
|
|
1655
1655
|
|
|
1656
1656
|
const MRT_FilterRangeFields = ({ header, table }) => {
|
|
1657
|
-
return (jsxs(Box,
|
|
1657
|
+
return (jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }, children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] }));
|
|
1658
1658
|
};
|
|
1659
1659
|
|
|
1660
1660
|
const MRT_FilterCheckbox = ({ column, table }) => {
|
|
@@ -1676,7 +1676,7 @@ const MRT_FilterCheckbox = ({ column, table }) => {
|
|
|
1676
1676
|
: columnDef.muiTableHeadCellFilterCheckboxProps;
|
|
1677
1677
|
const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
|
|
1678
1678
|
const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
|
|
1679
|
-
return (jsx(Tooltip,
|
|
1679
|
+
return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
|
|
1680
1680
|
var _a;
|
|
1681
1681
|
e.stopPropagation();
|
|
1682
1682
|
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
|
|
@@ -1690,7 +1690,7 @@ const MRT_FilterCheckbox = ({ column, table }) => {
|
|
|
1690
1690
|
(_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
|
|
1691
1691
|
}, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
|
|
1692
1692
|
? checkboxProps.sx(theme)
|
|
1693
|
-
: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined }) }))
|
|
1693
|
+
: checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined }) }));
|
|
1694
1694
|
};
|
|
1695
1695
|
|
|
1696
1696
|
const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
|
|
@@ -1698,8 +1698,8 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
|
|
|
1698
1698
|
const { showColumnFilters } = getState();
|
|
1699
1699
|
const { column } = header;
|
|
1700
1700
|
const { columnDef } = column;
|
|
1701
|
-
return (jsx(Collapse,
|
|
1702
|
-
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) }))
|
|
1701
|
+
return (jsx(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
|
|
1702
|
+
['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) }));
|
|
1703
1703
|
};
|
|
1704
1704
|
|
|
1705
1705
|
const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
@@ -1720,9 +1720,9 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
|
1720
1720
|
? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
|
|
1721
1721
|
: column.getFilterValue()}"`)
|
|
1722
1722
|
.replace('" "', '');
|
|
1723
|
-
return (jsx(Grow,
|
|
1723
|
+
return (jsx(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
|
|
1724
1724
|
(isRangeFilter && // @ts-ignore
|
|
1725
|
-
(!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1])))
|
|
1725
|
+
(!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))), children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
|
|
1726
1726
|
setShowColumnFilters(true);
|
|
1727
1727
|
queueMicrotask(() => {
|
|
1728
1728
|
var _a, _b;
|
|
@@ -1737,7 +1737,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
|
1737
1737
|
p: '2px',
|
|
1738
1738
|
transform: 'scale(0.66)',
|
|
1739
1739
|
width: '12px',
|
|
1740
|
-
}
|
|
1740
|
+
}, children: jsx(FilterAltIcon, {}) }) }) }) }));
|
|
1741
1741
|
};
|
|
1742
1742
|
|
|
1743
1743
|
const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
|
|
@@ -1779,7 +1779,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
|
|
|
1779
1779
|
const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
|
|
1780
1780
|
const { density } = getState();
|
|
1781
1781
|
const { column } = header;
|
|
1782
|
-
return (jsx(Box,
|
|
1782
|
+
return (jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
|
|
1783
1783
|
setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
|
|
1784
1784
|
column.resetSize();
|
|
1785
1785
|
}, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
|
|
@@ -1796,7 +1796,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
|
|
|
1796
1796
|
transform: column.getIsResizing() && columnResizeMode === 'onEnd'
|
|
1797
1797
|
? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
|
|
1798
1798
|
: undefined,
|
|
1799
|
-
}
|
|
1799
|
+
}, children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
|
|
1800
1800
|
borderRadius: '2px',
|
|
1801
1801
|
borderWidth: '2px',
|
|
1802
1802
|
height: '24px',
|
|
@@ -1806,7 +1806,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
|
|
|
1806
1806
|
: 'all 150ms ease-in-out',
|
|
1807
1807
|
userSelect: 'none',
|
|
1808
1808
|
zIndex: 4,
|
|
1809
|
-
} }) }))
|
|
1809
|
+
} }) }));
|
|
1810
1810
|
};
|
|
1811
1811
|
|
|
1812
1812
|
const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
|
|
@@ -1819,7 +1819,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
|
|
|
1819
1819
|
? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
|
|
1820
1820
|
: localization.sortedByColumnAsc.replace('{column}', columnDef.header)
|
|
1821
1821
|
: localization.unsorted;
|
|
1822
|
-
return (jsx(Tooltip,
|
|
1822
|
+
return (jsx(Tooltip, { arrow: true, placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
|
|
1823
1823
|
? column.getIsSorted()
|
|
1824
1824
|
: undefined, sx: {
|
|
1825
1825
|
flex: '0 0',
|
|
@@ -1831,7 +1831,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
|
|
|
1831
1831
|
var _a;
|
|
1832
1832
|
e.stopPropagation();
|
|
1833
1833
|
(_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
|
|
1834
|
-
} }) })
|
|
1834
|
+
} }) }) }));
|
|
1835
1835
|
};
|
|
1836
1836
|
|
|
1837
1837
|
const MRT_TableHeadCell = ({ header, table }) => {
|
|
@@ -1925,7 +1925,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1925
1925
|
table,
|
|
1926
1926
|
tableCellProps,
|
|
1927
1927
|
theme,
|
|
1928
|
-
})), draggingBorders))
|
|
1928
|
+
})), draggingBorders)), children: [header.isPlaceholder ? null : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
|
|
1929
1929
|
alignItems: 'center',
|
|
1930
1930
|
display: 'flex',
|
|
1931
1931
|
flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
|
|
@@ -1936,7 +1936,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1936
1936
|
: 'flex-start',
|
|
1937
1937
|
position: 'relative',
|
|
1938
1938
|
width: '100%',
|
|
1939
|
-
}
|
|
1939
|
+
}, children: [jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
|
|
1940
1940
|
alignItems: 'center',
|
|
1941
1941
|
cursor: column.getCanSort() && columnDefType !== 'group'
|
|
1942
1942
|
? 'pointer'
|
|
@@ -1947,7 +1947,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1947
1947
|
pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
|
|
1948
1948
|
? `${headerPL}rem`
|
|
1949
1949
|
: undefined,
|
|
1950
|
-
}
|
|
1950
|
+
}, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
|
|
1951
1951
|
minWidth: `${Math.min((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0, 5)}ch`,
|
|
1952
1952
|
overflow: columnDefType === 'data' ? 'hidden' : undefined,
|
|
1953
1953
|
textOverflow: 'ellipsis',
|
|
@@ -1955,9 +1955,9 @@ const MRT_TableHeadCell = ({ header, table }) => {
|
|
|
1955
1955
|
'&:hover': {
|
|
1956
1956
|
textOverflow: 'clip',
|
|
1957
1957
|
},
|
|
1958
|
-
}, title: columnDefType === 'data' ? columnDef.header : undefined
|
|
1958
|
+
}, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
|
|
1959
1959
|
current: tableHeadCellRefs.current[column.id],
|
|
1960
|
-
} })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] }))
|
|
1960
|
+
} })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
|
|
1961
1961
|
};
|
|
1962
1962
|
|
|
1963
1963
|
const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
|
|
@@ -1967,7 +1967,7 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
|
|
|
1967
1967
|
: muiTableHeadRowProps;
|
|
1968
1968
|
return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
|
|
1969
1969
|
? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
|
|
1970
|
-
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)))
|
|
1970
|
+
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
|
|
1971
1971
|
const header = virtualColumns
|
|
1972
1972
|
? headerGroup.headers[headerOrVirtualHeader.index]
|
|
1973
1973
|
: headerOrVirtualHeader;
|
|
@@ -1984,7 +1984,7 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
|
|
|
1984
1984
|
const stickyHeader = enableStickyHeader || isFullScreen;
|
|
1985
1985
|
return (jsx(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
|
|
1986
1986
|
? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
|
|
1987
|
-
: tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx)))
|
|
1987
|
+
: tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))), children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
|
|
1988
1988
|
};
|
|
1989
1989
|
|
|
1990
1990
|
const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
@@ -2049,7 +2049,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
|
2049
2049
|
var _a;
|
|
2050
2050
|
e.stopPropagation();
|
|
2051
2051
|
(_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
|
|
2052
|
-
}, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown
|
|
2052
|
+
}, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown, children: (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
|
|
2053
2053
|
let value;
|
|
2054
2054
|
let text;
|
|
2055
2055
|
if (typeof option !== 'object') {
|
|
@@ -2060,12 +2060,12 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
|
|
|
2060
2060
|
value = option.value;
|
|
2061
2061
|
text = option.text;
|
|
2062
2062
|
}
|
|
2063
|
-
return (jsx(MenuItem,
|
|
2063
|
+
return (jsx(MenuItem, { sx: {
|
|
2064
2064
|
display: 'flex',
|
|
2065
2065
|
m: 0,
|
|
2066
2066
|
alignItems: 'center',
|
|
2067
2067
|
gap: '0.5rem',
|
|
2068
|
-
}, value: value
|
|
2068
|
+
}, value: value, children: text }, value));
|
|
2069
2069
|
}) })));
|
|
2070
2070
|
};
|
|
2071
2071
|
|
|
@@ -2093,9 +2093,9 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
|
|
|
2093
2093
|
})
|
|
2094
2094
|
: columnDef.muiTableBodyCellCopyButtonProps;
|
|
2095
2095
|
const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
|
|
2096
|
-
return (jsx(Tooltip,
|
|
2096
|
+
return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
|
|
2097
2097
|
? buttonProps.sx(theme)
|
|
2098
|
-
: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined
|
|
2098
|
+
: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined, children: children })) }));
|
|
2099
2099
|
};
|
|
2100
2100
|
|
|
2101
2101
|
const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
|
|
@@ -2164,7 +2164,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
|
|
|
2164
2164
|
matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
|
|
2165
2165
|
});
|
|
2166
2166
|
if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
|
|
2167
|
-
renderedCellValue = (jsx("span",
|
|
2167
|
+
renderedCellValue = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
|
|
2168
2168
|
? {
|
|
2169
2169
|
backgroundColor: (theme) => theme.palette.mode === 'dark'
|
|
2170
2170
|
? darken(theme.palette.warning.dark, 0.25)
|
|
@@ -2173,7 +2173,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
|
|
|
2173
2173
|
color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
|
|
2174
2174
|
padding: '2px 1px',
|
|
2175
2175
|
}
|
|
2176
|
-
: undefined
|
|
2176
|
+
: undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
|
|
2177
2177
|
}
|
|
2178
2178
|
}
|
|
2179
2179
|
if (columnDef.Cell && !isGroupedValue) {
|
|
@@ -2312,7 +2312,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
|
|
|
2312
2312
|
table,
|
|
2313
2313
|
theme,
|
|
2314
2314
|
tableCellProps,
|
|
2315
|
-
})), draggingBorders))
|
|
2315
|
+
})), draggingBorders)), children: jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
|
|
2316
2316
|
rowNumberMode === 'static' &&
|
|
2317
2317
|
column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsx(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
|
|
2318
2318
|
(column.id === 'mrt-row-select' ||
|
|
@@ -2324,7 +2324,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
|
|
|
2324
2324
|
row,
|
|
2325
2325
|
table,
|
|
2326
2326
|
})) : isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
|
|
2327
|
-
columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton,
|
|
2327
|
+
columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_d = row.subRows) === null || _d === void 0 ? void 0 : _d.length, ")"] }))] }) })));
|
|
2328
2328
|
};
|
|
2329
2329
|
const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
|
|
2330
2330
|
|
|
@@ -2351,11 +2351,11 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
|
|
|
2351
2351
|
: undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
|
|
2352
2352
|
? tableRowProps.sx(theme)
|
|
2353
2353
|
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)));
|
|
2354
|
-
}
|
|
2354
|
+
}, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
|
|
2355
2355
|
? lighten(theme.palette.background.default, 0.06)
|
|
2356
2356
|
: undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
|
|
2357
2357
|
? tableCellProps.sx(theme)
|
|
2358
|
-
: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)))
|
|
2358
|
+
: tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
|
|
2359
2359
|
};
|
|
2360
2360
|
|
|
2361
2361
|
const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
|
|
@@ -2387,13 +2387,12 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
|
|
|
2387
2387
|
? tableRowProps.sx(theme)
|
|
2388
2388
|
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), style: Object.assign({ transform: virtualRow
|
|
2389
2389
|
? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
|
|
2390
|
-
: undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style)
|
|
2390
|
+
: undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
|
|
2391
2391
|
const cell = columnVirtualizer
|
|
2392
2392
|
? row.getVisibleCells()[cellOrVirtualCell.index]
|
|
2393
2393
|
: cellOrVirtualCell;
|
|
2394
2394
|
const props = {
|
|
2395
2395
|
cell,
|
|
2396
|
-
key: cell.id,
|
|
2397
2396
|
measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
|
|
2398
2397
|
numRows,
|
|
2399
2398
|
rowIndex,
|
|
@@ -2408,7 +2407,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
|
|
|
2408
2407
|
!draggingColumn &&
|
|
2409
2408
|
!draggingRow &&
|
|
2410
2409
|
(editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
|
|
2411
|
-
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (jsx(MRT_TableBodyCell, Object.assign({}, props)));
|
|
2410
|
+
(editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id));
|
|
2412
2411
|
}), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))] }));
|
|
2413
2412
|
};
|
|
2414
2413
|
const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
|
|
@@ -2480,24 +2479,23 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
|
|
|
2480
2479
|
? `${rowVirtualizer.getTotalSize()}px`
|
|
2481
2480
|
: 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
|
|
2482
2481
|
? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
|
|
2483
|
-
: tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx)))
|
|
2482
|
+
: tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))), children: (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
|
|
2484
2483
|
display: layoutMode === 'grid' ? 'grid' : 'table-cell',
|
|
2485
|
-
}
|
|
2484
|
+
}, children: (_b = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _b !== void 0 ? _b : (jsx(Typography, { sx: {
|
|
2486
2485
|
color: 'text.secondary',
|
|
2487
2486
|
fontStyle: 'italic',
|
|
2488
2487
|
maxWidth: `min(100vw, ${(_d = (_c = tablePaperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 360}px)`,
|
|
2489
2488
|
py: '2rem',
|
|
2490
2489
|
textAlign: 'center',
|
|
2491
2490
|
width: '100%',
|
|
2492
|
-
}
|
|
2491
|
+
}, children: globalFilter || columnFilters.length
|
|
2493
2492
|
? localization.noResultsFound
|
|
2494
|
-
: localization.noRecordsToDisplay }))
|
|
2493
|
+
: localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
|
|
2495
2494
|
const row = rowVirtualizer
|
|
2496
2495
|
? rows[rowOrVirtualRow.index]
|
|
2497
2496
|
: rowOrVirtualRow;
|
|
2498
2497
|
const props = {
|
|
2499
2498
|
columnVirtualizer,
|
|
2500
|
-
key: row.id,
|
|
2501
2499
|
measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
|
|
2502
2500
|
numRows: rows.length,
|
|
2503
2501
|
row,
|
|
@@ -2510,7 +2508,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
|
|
|
2510
2508
|
? rowOrVirtualRow
|
|
2511
2509
|
: undefined,
|
|
2512
2510
|
};
|
|
2513
|
-
return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (jsx(MRT_TableBodyRow, Object.assign({}, props)));
|
|
2511
|
+
return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
|
|
2514
2512
|
}) }))) })));
|
|
2515
2513
|
};
|
|
2516
2514
|
const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
|
|
@@ -2538,7 +2536,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
|
|
|
2538
2536
|
table,
|
|
2539
2537
|
theme,
|
|
2540
2538
|
tableCellProps,
|
|
2541
|
-
})))
|
|
2539
|
+
}))), children: jsx(Fragment, { children: footer.isPlaceholder
|
|
2542
2540
|
? null
|
|
2543
2541
|
: (_c = (_b = (columnDef.Footer instanceof Function
|
|
2544
2542
|
? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
|
|
@@ -2562,7 +2560,7 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
|
|
|
2562
2560
|
: muiTableFooterRowProps;
|
|
2563
2561
|
return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
|
|
2564
2562
|
? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
|
|
2565
|
-
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)))
|
|
2563
|
+
: tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
|
|
2566
2564
|
const footer = virtualColumns
|
|
2567
2565
|
? footerGroup.headers[footerOrVirtualFooter.index]
|
|
2568
2566
|
: footerOrVirtualFooter;
|
|
@@ -2583,7 +2581,7 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
|
|
|
2583
2581
|
: `1px solid ${theme.palette.grey[700]}`
|
|
2584
2582
|
: undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
|
|
2585
2583
|
? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
|
|
2586
|
-
: tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx)))
|
|
2584
|
+
: tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
|
|
2587
2585
|
};
|
|
2588
2586
|
|
|
2589
2587
|
const MRT_Table = ({ table }) => {
|
|
@@ -2656,7 +2654,7 @@ const MRT_Table = ({ table }) => {
|
|
|
2656
2654
|
};
|
|
2657
2655
|
return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
|
|
2658
2656
|
? tableProps.sx(theme)
|
|
2659
|
-
: tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style)
|
|
2657
|
+
: tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })));
|
|
2660
2658
|
};
|
|
2661
2659
|
|
|
2662
2660
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
@@ -2691,7 +2689,7 @@ const MRT_TableContainer = ({ table }) => {
|
|
|
2691
2689
|
? tableContainerProps.sx(theme)
|
|
2692
2690
|
: tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
|
|
2693
2691
|
? `calc(100vh - ${totalToolbarHeight}px)`
|
|
2694
|
-
: undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style)
|
|
2692
|
+
: undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), children: jsx(MRT_Table, { table: table }) })));
|
|
2695
2693
|
};
|
|
2696
2694
|
|
|
2697
2695
|
const MRT_TablePaper = ({ table }) => {
|
|
@@ -2717,7 +2715,7 @@ const MRT_TablePaper = ({ table }) => {
|
|
|
2717
2715
|
padding: 0,
|
|
2718
2716
|
width: '100vw',
|
|
2719
2717
|
}
|
|
2720
|
-
: {}))
|
|
2718
|
+
: {})), children: [enableTopToolbar &&
|
|
2721
2719
|
(renderTopToolbar instanceof Function
|
|
2722
2720
|
? renderTopToolbar({ table })
|
|
2723
2721
|
: renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : jsx(MRT_TopToolbar, { table: table })), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
|
|
@@ -2728,15 +2726,15 @@ const MRT_TablePaper = ({ table }) => {
|
|
|
2728
2726
|
|
|
2729
2727
|
const MRT_EditRowModal = ({ open, row, table, }) => {
|
|
2730
2728
|
const { options: { localization }, } = table;
|
|
2731
|
-
return (jsxs(Dialog,
|
|
2729
|
+
return (jsxs(Dialog, { open: open, children: [jsx(DialogTitle, { textAlign: "center", children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
|
|
2732
2730
|
gap: '1.5rem',
|
|
2733
2731
|
minWidth: { xs: '300px', sm: '360px', md: '400px' },
|
|
2734
2732
|
pt: '1rem',
|
|
2735
2733
|
width: '100%',
|
|
2736
|
-
}
|
|
2734
|
+
}, children: row
|
|
2737
2735
|
.getAllCells()
|
|
2738
2736
|
.filter((cell) => cell.column.columnDef.columnDefType === 'data')
|
|
2739
|
-
.map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, showLabel: true, table: table }, cell.id))) })
|
|
2737
|
+
.map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, showLabel: true, table: table }, cell.id))) }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] }));
|
|
2740
2738
|
};
|
|
2741
2739
|
|
|
2742
2740
|
const MRT_TableRoot = (props) => {
|
|
@@ -2911,7 +2909,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2911
2909
|
table.setPageIndex(Math.floor(totalRowCount / pageSize));
|
|
2912
2910
|
}
|
|
2913
2911
|
}, [props.rowCount, table.getPrePaginationRowModel().rows.length]);
|
|
2914
|
-
return (jsxs(Fragment, { children: [jsx(Dialog,
|
|
2912
|
+
return (jsxs(Fragment, { children: [jsx(Dialog, { PaperComponent: Box, TransitionComponent: !props.enableRowVirtualization ? Grow : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400, children: jsx(MRT_TablePaper, { table: table }) }), !table.getState().isFullScreen && (jsx(MRT_TablePaper, { table: table })), editingRow && props.editingMode === 'modal' && (jsx(MRT_EditRowModal, { row: editingRow, table: table, open: true }))] }));
|
|
2915
2913
|
};
|
|
2916
2914
|
|
|
2917
2915
|
const MaterialReactTable = (_a) => {
|
|
@@ -2942,11 +2940,5 @@ const MaterialReactTable = (_a) => {
|
|
|
2942
2940
|
return (jsx(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
|
|
2943
2941
|
};
|
|
2944
2942
|
|
|
2945
|
-
export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable };
|
|
2943
|
+
export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, MaterialReactTable as default };
|
|
2946
2944
|
//# sourceMappingURL=material-react-table.esm.js.map
|
|
2947
|
-
|
|
2948
|
-
/**
|
|
2949
|
-
* @deprecated Use `import { MaterialReactTable } from 'material-react-table';` instead
|
|
2950
|
-
*/
|
|
2951
|
-
const _defaultExport = MaterialReactTable;
|
|
2952
|
-
export { _defaultExport as default };
|