material-react-table-narender 2.13.27 → 2.13.30

package/dist/index.d.ts

@@ -236,6 +236,9 @@ declare const MRT_Default_Icons: {
     readonly SettingsBackupRestoreIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
         muiName: string;
     };
+    readonly SettingsOutlinedIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
+        muiName: string;
+    };
 };
 type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;
 
@@ -448,6 +451,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 +482,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 +1072,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

@@ -49,6 +49,7 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 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';
@@ -1371,7 +1372,8 @@ const MRT_Default_Icons = {
     SyncAltIcon,
     ViewColumnIcon,
     VisibilityOffIcon,
-    SettingsBackupRestoreIcon
+    SettingsBackupRestoreIcon,
+    SettingsOutlinedIcon
 };
 
 const MRT_Localization_EN = {
@@ -1693,7 +1695,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 +1747,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 +1769,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 +1824,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 +1840,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 +1850,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;
 };
@@ -2894,10 +2900,10 @@ const MRT_FilterOptionMenu = (_a) => {
 const MRT_ColumnActionMenu = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
-    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 { 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;
     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 +3011,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(SettingsOutlinedIcon, {}), 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',
@@ -3128,19 +3139,7 @@ const MRT_FilterTextField = (_a) => {
             });
         }
         else {
-            if (textFieldProps.type === "number") {
-                // column.setFilterValue(newValue === '' ? undefined : newValue);
-                debugger;
-                if (newValue === 0) {
-                    column.setFilterValue("0");
-                }
-                else {
-                    column.setFilterValue(newValue);
-                }
-            }
-            else {
-                column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
-            }
+            column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
         }
     }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
     const handleChange = (newValue) => {
@@ -3178,6 +3177,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('');
@@ -3556,7 +3557,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;