material-react-table-narender 2.13.29 → 2.13.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +3 -0
- package/dist/index.esm.js +10 -42
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +10 -41
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/head/MRT_TableHeadCell.tsx +2 -2
- package/src/components/head/MRT_TableHeadCellToolBar.tsx +61 -61
- package/src/components/menus/MRT_ColumnActionMenu.tsx +3 -2
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +2 -2
- package/src/components/table/MRT_TablePaper.tsx +5 -2
- package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx +2 -2
- package/src/icons.ts +3 -1
package/dist/index.d.ts
CHANGED
@@ -236,6 +236,9 @@ declare const MRT_Default_Icons: {
|
|
236
236
|
readonly SettingsBackupRestoreIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
|
237
237
|
muiName: string;
|
238
238
|
};
|
239
|
+
readonly SettingsOutlinedIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
|
240
|
+
muiName: string;
|
241
|
+
};
|
239
242
|
};
|
240
243
|
type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;
|
241
244
|
|
package/dist/index.esm.js
CHANGED
@@ -49,9 +49,10 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
|
|
49
49
|
import ViewColumnIcon from '@mui/icons-material/ViewColumn';
|
50
50
|
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
51
51
|
import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
|
52
|
+
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
52
53
|
import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
|
53
54
|
import Paper from '@mui/material/Paper';
|
54
|
-
import {
|
55
|
+
import { useTheme as useTheme$1 } from '@mui/material';
|
55
56
|
import TableContainer from '@mui/material/TableContainer';
|
56
57
|
import Table from '@mui/material/Table';
|
57
58
|
import TableBody from '@mui/material/TableBody';
|
@@ -1371,7 +1372,8 @@ const MRT_Default_Icons = {
|
|
1371
1372
|
SyncAltIcon,
|
1372
1373
|
ViewColumnIcon,
|
1373
1374
|
VisibilityOffIcon,
|
1374
|
-
SettingsBackupRestoreIcon
|
1375
|
+
SettingsBackupRestoreIcon,
|
1376
|
+
SettingsOutlinedIcon
|
1375
1377
|
};
|
1376
1378
|
|
1377
1379
|
const MRT_Localization_EN = {
|
@@ -2898,7 +2900,7 @@ const MRT_FilterOptionMenu = (_a) => {
|
|
2898
2900
|
const MRT_ColumnActionMenu = (_a) => {
|
2899
2901
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
2900
2902
|
var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
|
2901
|
-
const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
|
2903
|
+
const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, SettingsOutlinedIcon }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
|
2902
2904
|
const { column } = header;
|
2903
2905
|
const { columnDef } = column;
|
2904
2906
|
const { columnSizing, columnVisibility, density, showColumnFilters, showToolBar } = getState();
|
@@ -3010,7 +3012,7 @@ const MRT_ColumnActionMenu = (_a) => {
|
|
3010
3012
|
]
|
3011
3013
|
: []),
|
3012
3014
|
// **Newly Added Menu Item for Toolbar Visibility**
|
3013
|
-
jsx(MRT_ActionMenuItem, { icon: jsx(
|
3015
|
+
jsx(MRT_ActionMenuItem, { icon: jsx(SettingsOutlinedIcon, {}), label: showToolBar ? "Hide ToolBar" : "Show ToolBar", onClick: (e) => {
|
3014
3016
|
e.stopPropagation();
|
3015
3017
|
table.setShowToolBar(!showToolBar);
|
3016
3018
|
}, table: table }, 13),
|
@@ -3548,24 +3550,6 @@ const MRT_TableHeadCellSortLabel = (_a) => {
|
|
3548
3550
|
}, flex: '0 0', opacity: isSorted ? 1 : 0.3, transition: 'all 150ms ease-in-out', width: '3ch' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) })) }) }));
|
3549
3551
|
};
|
3550
3552
|
|
3551
|
-
const MRT_TableHeadCellToolBar = (_a) => {
|
3552
|
-
var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
|
3553
|
-
const { getState, options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization, }, } = table;
|
3554
|
-
const { isLoading, showSkeletons, showToolBar } = getState();
|
3555
|
-
const showToolBarTooltip = isLoading || showSkeletons
|
3556
|
-
? ''
|
3557
|
-
: showToolBar
|
3558
|
-
? "Hide ToolBar"
|
3559
|
-
: "Show ToolBar";
|
3560
|
-
return (jsx(Tooltip, { placement: "top", title: showToolBarTooltip, children: jsx(IconButton$1, { "aria-label": showToolBarTooltip, size: "small", sx: (theme) => (Object.assign({ '&:hover': {
|
3561
|
-
backgroundColor: 'transparent',
|
3562
|
-
opacity: 1,
|
3563
|
-
}, cursor: 'pointer', opacity: 1, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), onClick: (e) => {
|
3564
|
-
e.stopPropagation();
|
3565
|
-
table.setShowToolBar(!showToolBar);
|
3566
|
-
}, children: jsx(SyncAltIcon, {}) }) }));
|
3567
|
-
};
|
3568
|
-
|
3569
3553
|
const MRT_TableHeadCell = (_a) => {
|
3570
3554
|
var _b, _c, _d, _f, _g, _h;
|
3571
3555
|
var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
|
@@ -3733,7 +3717,7 @@ const MRT_TableHeadCell = (_a) => {
|
|
3733
3717
|
whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
|
3734
3718
|
? 'nowrap'
|
3735
3719
|
: 'normal',
|
3736
|
-
}, children: HeaderElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))
|
3720
|
+
}, children: HeaderElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: {
|
3737
3721
|
whiteSpace: 'nowrap',
|
3738
3722
|
}, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
|
3739
3723
|
current: tableHeadCellRefs.current[column.id],
|
@@ -4198,10 +4182,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
|
|
4198
4182
|
opacity: columnDefType !== 'display' ? 1 : 0.5,
|
4199
4183
|
},
|
4200
4184
|
},
|
4201
|
-
}, control: jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header })),
|
4202
|
-
(columnDef.enableResizing !== false ? (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.resetColumnSize, children: jsx(Button$1, { onClick: () => {
|
4203
|
-
column.resetSize();
|
4204
|
-
}, children: jsx(SettingsBackupRestoreIcon, {}) }) }))) : (jsx(Box, { sx: { width: '28px' } })))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
|
4185
|
+
}, control: jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
|
4205
4186
|
};
|
4206
4187
|
|
4207
4188
|
const MRT_ShowHideColumnsMenu = (_a) => {
|
@@ -4312,19 +4293,6 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
|
|
4312
4293
|
return (jsx(Tooltip, { 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, {}) })) }));
|
4313
4294
|
};
|
4314
4295
|
|
4315
|
-
const MRT_ToggleNavigationButton = (_a) => {
|
4316
|
-
var _b;
|
4317
|
-
var { table } = _a, rest = __rest(_a, ["table"]);
|
4318
|
-
const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setEnableKeyboardShortcuts, } = table;
|
4319
|
-
const { enableKeyboardShortcuts } = getState();
|
4320
|
-
const [tooltipOpened, setTooltipOpened] = useState(false);
|
4321
|
-
const handleToggleFullScreen = () => {
|
4322
|
-
setTooltipOpened(false);
|
4323
|
-
setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
|
4324
|
-
};
|
4325
|
-
return (jsx(Tooltip, { open: tooltipOpened, 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.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: enableKeyboardShortcuts ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
|
4326
|
-
};
|
4327
|
-
|
4328
4296
|
const MRT_ToolbarInternalButtons = (_a) => {
|
4329
4297
|
var _b;
|
4330
4298
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
@@ -4335,7 +4303,7 @@ const MRT_ToolbarInternalButtons = (_a) => {
|
|
4335
4303
|
enableGlobalFilter &&
|
4336
4304
|
!(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
|
4337
4305
|
enableColumnFilters &&
|
4338
|
-
columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))
|
4306
|
+
columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
|
4339
4307
|
};
|
4340
4308
|
|
4341
4309
|
const MRT_GlobalFilterTextField = (_a) => {
|
@@ -4436,7 +4404,7 @@ const MRT_TablePaper = (_a) => {
|
|
4436
4404
|
var _b, _c;
|
4437
4405
|
var { table } = _a, rest = __rest(_a, ["table"]);
|
4438
4406
|
const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
|
4439
|
-
const { isFullScreen } = getState();
|
4407
|
+
const { isFullScreen, showToolBar } = getState();
|
4440
4408
|
const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
|
4441
4409
|
const theme = useTheme$1();
|
4442
4410
|
return (jsxs(Paper, Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
|