material-react-table-narender 2.13.25 → 2.13.29

package/dist/index.d.ts

@@ -448,6 +448,7 @@ type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllCo
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
+    setShowToolBar: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
     setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
     setEnableKeyboardShortcuts: Dispatch<SetStateAction<boolean>>;
@@ -478,6 +479,7 @@ interface MRT_TableState<TData extends MRT_RowData> extends TableState {
     isSaving: boolean;
     showAlertBanner: boolean;
     showColumnFilters: boolean;
+    showToolBar: boolean;
     showGlobalFilter: boolean;
     showLoadingOverlay: boolean;
     showProgressBars: boolean;
@@ -1067,6 +1069,7 @@ interface MRT_TableOptions<TData extends MRT_RowData> extends Omit<Partial<Table
     onEnableKeyboardShortcutsChange?: OnChangeFn<boolean>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowColumnFiltersChange?: OnChangeFn<boolean>;
+    onShowToolBarChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
     onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     paginationDisplayMode?: 'custom' | 'default' | 'pages';

package/dist/index.esm.js

@@ -51,7 +51,7 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Paper from '@mui/material/Paper';
-import { Button as Button$1, useTheme as useTheme$1 } from '@mui/material';
+import { IconButton as IconButton$1, Button as Button$1, useTheme as useTheme$1 } from '@mui/material';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -436,7 +436,7 @@ const openEditingCell = ({ cell, table, }) => {
 };
 const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    debugger;
+    //debugger;
     const { getState, setEnableKeyboardShortcuts, } = table;
     const { enableKeyboardShortcuts } = getState();
     if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
@@ -532,7 +532,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
             header.column.toggleSorting();
         }
         else if ("Enter" === event.key) {
-            debugger;
+            //debugger;
             event.preventDefault();
             const input = currentCell.querySelector('input');
             const select = currentCell.querySelector('select');
@@ -573,7 +573,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
     ].includes(event.key)) {
         event.preventDefault();
         // if (['ArrowDown'].includes(event.key)) {
-        //     debugger; // This will pause execution for debugging purposes
+        //     //debugger; // This will pause execution for debugging purposes
         //     // Select the input element within the MUI Autocomplete component
         //     const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
         //     // Check if the current cell is an MUI Autocomplete
@@ -1693,7 +1693,7 @@ const useMRT_Effects = (table) => {
  * @returns the MRT table instance
  */
 const useMRT_TableInstance = (definedTableOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
     const lastSelectedRowId = useRef(null);
     const actionCellRef = useRef(null);
     const bottomToolbarRef = useRef(null);
@@ -1745,8 +1745,9 @@ const useMRT_TableInstance = (definedTableOptions) => {
     const [pagination, onPaginationChange] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _r !== void 0 ? _r : { pageIndex: 0, pageSize: 10 });
     const [showAlertBanner, setShowAlertBanner] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _s !== void 0 ? _s : false);
     const [showColumnFilters, setShowColumnFilters] = useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _t !== void 0 ? _t : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _u !== void 0 ? _u : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_v = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _v !== void 0 ? _v : false);
+    const [showToolBar, setShowToolBar] = useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showToolBar) !== null && _u !== void 0 ? _u : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_v = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _v !== void 0 ? _v : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_w = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _w !== void 0 ? _w : false);
     definedTableOptions.state = Object.assign({ actionCell,
         columnFilterFns,
         columnOrder,
@@ -1766,6 +1767,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
         pagination,
         showAlertBanner,
         showColumnFilters,
+        showToolBar,
         showGlobalFilter,
         showToolbarDropZone }, definedTableOptions.state);
     //The table options now include all state needed to help determine column visibility and order logic
@@ -1820,7 +1822,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
     const table = useReactTable(Object.assign(Object.assign({ onColumnOrderChange,
         onColumnSizingInfoChange,
         onGroupingChange,
-        onPaginationChange }, statefulTableOptions), { globalFilterFn: (_w = statefulTableOptions.filterFns) === null || _w === void 0 ? void 0 : _w[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
+        onPaginationChange }, statefulTableOptions), { globalFilterFn: (_x = statefulTableOptions.filterFns) === null || _x === void 0 ? void 0 : _x[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
     table.refs = {
         actionCellRef,
         bottomToolbarRef,
@@ -1836,7 +1838,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
         topToolbarRef,
     };
     table.setActionCell =
-        (_x = statefulTableOptions.onActionCellChange) !== null && _x !== void 0 ? _x : setActionCell;
+        (_y = statefulTableOptions.onActionCellChange) !== null && _y !== void 0 ? _y : setActionCell;
     table.setCreatingRow = (row) => {
         var _a, _b;
         let _row = row;
@@ -1846,34 +1848,36 @@ const useMRT_TableInstance = (definedTableOptions) => {
         (_b = (_a = statefulTableOptions === null || statefulTableOptions === void 0 ? void 0 : statefulTableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(statefulTableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
     };
     table.setColumnFilterFns =
-        (_y = statefulTableOptions.onColumnFilterFnsChange) !== null && _y !== void 0 ? _y : setColumnFilterFns;
-    table.setDensity = (_z = statefulTableOptions.onDensityChange) !== null && _z !== void 0 ? _z : setDensity;
+        (_z = statefulTableOptions.onColumnFilterFnsChange) !== null && _z !== void 0 ? _z : setColumnFilterFns;
+    table.setDensity = (_0 = statefulTableOptions.onDensityChange) !== null && _0 !== void 0 ? _0 : setDensity;
     table.setDraggingColumn =
-        (_0 = statefulTableOptions.onDraggingColumnChange) !== null && _0 !== void 0 ? _0 : setDraggingColumn;
+        (_1 = statefulTableOptions.onDraggingColumnChange) !== null && _1 !== void 0 ? _1 : setDraggingColumn;
     table.setDraggingRow =
-        (_1 = statefulTableOptions.onDraggingRowChange) !== null && _1 !== void 0 ? _1 : setDraggingRow;
+        (_2 = statefulTableOptions.onDraggingRowChange) !== null && _2 !== void 0 ? _2 : setDraggingRow;
     table.setEditingCell =
-        (_2 = statefulTableOptions.onEditingCellChange) !== null && _2 !== void 0 ? _2 : setEditingCell;
+        (_3 = statefulTableOptions.onEditingCellChange) !== null && _3 !== void 0 ? _3 : setEditingCell;
     table.setEditingRow =
-        (_3 = statefulTableOptions.onEditingRowChange) !== null && _3 !== void 0 ? _3 : setEditingRow;
+        (_4 = statefulTableOptions.onEditingRowChange) !== null && _4 !== void 0 ? _4 : setEditingRow;
     table.setGlobalFilterFn =
-        (_4 = statefulTableOptions.onGlobalFilterFnChange) !== null && _4 !== void 0 ? _4 : setGlobalFilterFn;
+        (_5 = statefulTableOptions.onGlobalFilterFnChange) !== null && _5 !== void 0 ? _5 : setGlobalFilterFn;
     table.setHoveredColumn =
-        (_5 = statefulTableOptions.onHoveredColumnChange) !== null && _5 !== void 0 ? _5 : setHoveredColumn;
+        (_6 = statefulTableOptions.onHoveredColumnChange) !== null && _6 !== void 0 ? _6 : setHoveredColumn;
     table.setHoveredRow =
-        (_6 = statefulTableOptions.onHoveredRowChange) !== null && _6 !== void 0 ? _6 : setHoveredRow;
+        (_7 = statefulTableOptions.onHoveredRowChange) !== null && _7 !== void 0 ? _7 : setHoveredRow;
     table.setIsFullScreen =
-        (_7 = statefulTableOptions.onIsFullScreenChange) !== null && _7 !== void 0 ? _7 : setIsFullScreen;
+        (_8 = statefulTableOptions.onIsFullScreenChange) !== null && _8 !== void 0 ? _8 : setIsFullScreen;
     table.setEnableKeyboardShortcuts =
-        (_8 = statefulTableOptions.onEnableKeyboardShortcutsChange) !== null && _8 !== void 0 ? _8 : setEnableKeyboardShortcuts;
+        (_9 = statefulTableOptions.onEnableKeyboardShortcutsChange) !== null && _9 !== void 0 ? _9 : setEnableKeyboardShortcuts;
     table.setShowAlertBanner =
-        (_9 = statefulTableOptions.onShowAlertBannerChange) !== null && _9 !== void 0 ? _9 : setShowAlertBanner;
+        (_10 = statefulTableOptions.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner;
     table.setShowColumnFilters =
-        (_10 = statefulTableOptions.onShowColumnFiltersChange) !== null && _10 !== void 0 ? _10 : setShowColumnFilters;
+        (_11 = statefulTableOptions.onShowColumnFiltersChange) !== null && _11 !== void 0 ? _11 : setShowColumnFilters;
+    table.setShowToolBar =
+        (_12 = statefulTableOptions.onShowToolBarChange) !== null && _12 !== void 0 ? _12 : setShowToolBar;
     table.setShowGlobalFilter =
-        (_11 = statefulTableOptions.onShowGlobalFilterChange) !== null && _11 !== void 0 ? _11 : setShowGlobalFilter;
+        (_13 = statefulTableOptions.onShowGlobalFilterChange) !== null && _13 !== void 0 ? _13 : setShowGlobalFilter;
     table.setShowToolbarDropZone =
-        (_12 = statefulTableOptions.onShowToolbarDropZoneChange) !== null && _12 !== void 0 ? _12 : setShowToolbarDropZone;
+        (_14 = statefulTableOptions.onShowToolbarDropZoneChange) !== null && _14 !== void 0 ? _14 : setShowToolbarDropZone;
     useMRT_Effects(table);
     return table;
 };
@@ -2332,7 +2336,7 @@ const MRT_TableBodyCell = (_a) => {
     const handleKeyDown = (event) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
-        debugger;
+        //debugger;
         cellKeyboardShortcuts({
             cell,
             cellValue: cell.getValue(),
@@ -2897,7 +2901,7 @@ const MRT_ColumnActionMenu = (_a) => {
     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;
     const { column } = header;
     const { columnDef } = column;
-    const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
+    const { columnSizing, columnVisibility, density, showColumnFilters, showToolBar } = getState();
     const columnFilterValue = column.getFilterValue();
     const [filterMenuAnchorEl, setFilterMenuAnchorEl] = useState(null);
     const handleClearSort = () => {
@@ -3005,6 +3009,11 @@ const MRT_ColumnActionMenu = (_a) => {
                         .length, icon: jsx(ViewColumnIcon, {}), label: (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header)), onClick: handleShowAllColumns, table: table }, 12),
             ]
             : []),
+        // **Newly Added Menu Item for Toolbar Visibility**
+        jsx(MRT_ActionMenuItem, { icon: jsx(ViewColumnIcon, {}), label: showToolBar ? "Hide ToolBar" : "Show ToolBar", onClick: (e) => {
+                e.stopPropagation();
+                table.setShowToolBar(!showToolBar);
+            }, table: table }, 13),
     ].filter(Boolean);
     return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
@@ -3166,6 +3175,8 @@ const MRT_FilterTextField = (_a) => {
             setFilterValue('');
             column.setFilterValue(undefined);
         }
+        // focus on the input after clearing the filter
+        // filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`]?.focus();
     };
     const handleClearEmptyFilterChip = () => {
         setFilterValue('');
@@ -3537,6 +3548,24 @@ const MRT_TableHeadCellSortLabel = (_a) => {
                     }, 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))) })) }) }));
 };
 
+const MRT_TableHeadCellToolBar = (_a) => {
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
+    const { getState, options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization, }, } = table;
+    const { isLoading, showSkeletons, showToolBar } = getState();
+    const showToolBarTooltip = isLoading || showSkeletons
+        ? ''
+        : showToolBar
+            ? "Hide ToolBar"
+            : "Show ToolBar";
+    return (jsx(Tooltip, { placement: "top", title: showToolBarTooltip, children: jsx(IconButton$1, { "aria-label": showToolBarTooltip, size: "small", sx: (theme) => (Object.assign({ '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, 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) => {
+                e.stopPropagation();
+                table.setShowToolBar(!showToolBar);
+            }, children: jsx(SyncAltIcon, {}) }) }));
+};
+
 const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
     var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
@@ -3544,7 +3573,7 @@ const MRT_TableHeadCell = (_a) => {
     const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, 
     //  enableKeyboardShortcuts,
     enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
-    const { enableKeyboardShortcuts, columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
+    const { enableKeyboardShortcuts, columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, showToolBar, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -3704,7 +3733,7 @@ const MRT_TableHeadCell = (_a) => {
                                         whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
                                             ? 'nowrap'
                                             : 'normal',
-                                    }, 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: {
+                                    }, children: HeaderElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table })), jsx(MRT_TableHeadCellToolBar, { 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: {
                                         current: tableHeadCellRefs.current[column.id],
@@ -4439,7 +4468,7 @@ const MRT_TablePaper = (_a) => {
 const isTableInstanceProp = (props) => props.table !== undefined;
 const MaterialReactTable = (props) => {
     let table;
-    debugger;
+    //debugger;
     if (isTableInstanceProp(props)) {
         table = props.table;
     }