material-react-table-narender 2.13.27 → 2.13.29

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.27",
+  "version": "2.13.29",
   "license": "MIT",
   "name": "material-react-table-narender",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/components/head/MRT_TableHeadCell.tsx

@@ -18,6 +18,7 @@ import {
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { cellKeyboardShortcuts } from '../../utils/cell.utils';
+import { MRT_TableHeadCellToolBar } from './MRT_TableHeadCellToolBar';
 
 export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
   extends TableCellProps {
@@ -63,6 +64,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     grouping,
     hoveredColumn,
     showColumnFilters,
+    showToolBar,
   } = getState();
   const { column } = header;
   const { columnDef } = column;
@@ -307,6 +309,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                 {column.getCanSort() && (
                   <MRT_TableHeadCellSortLabel header={header} table={table} />
                 )}
+                  <MRT_TableHeadCellToolBar header={header} table={table} />
               </Box>
               {columnDefType !== 'group' && (
                 <Box

package/src/components/head/MRT_TableHeadCellToolBar.tsx

@@ -0,0 +1,68 @@
+import Badge from '@mui/material/Badge';
+import TableSortLabel, {
+  type TableSortLabelProps,
+} from '@mui/material/TableSortLabel';
+import Tooltip from '@mui/material/Tooltip';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { IconButton } from '@mui/material';
+
+export interface MRT_TableHeadCellToolBarLabelProps<TData extends MRT_RowData>
+  extends TableSortLabelProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellToolBar = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: MRT_TableHeadCellToolBarLabelProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { ArrowDownwardIcon, SyncAltIcon },
+      localization,
+    },
+  } = table;
+  const { isLoading, showSkeletons, showToolBar } = getState();
+
+
+          const showToolBarTooltip =    isLoading || showSkeletons
+      ? ''
+        : showToolBar
+            ?  "Hide ToolBar"
+            : "Show ToolBar";
+
+
+  return (
+    <Tooltip placement="top" title={showToolBarTooltip}>
+   
+      <IconButton
+        aria-label={showToolBarTooltip}
+        size="small"
+        sx={(theme) => ({
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 1,
+          },
+          cursor: 'pointer',
+          opacity: 1,
+          p: '2px',
+          transition: 'all 150ms ease-in-out',
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
+        onClick={(e) => {
+          e.stopPropagation();
+          table.setShowToolBar(!showToolBar);
+        }}
+        >
+        <SyncAltIcon />
+            </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -161,18 +161,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             return newFilterValues;
           });
         } 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 ?? undefined);
-          }
         }
       },
       isTextboxFilter ? (manualFiltering ? 400 : 200) : 1,
@@ -216,6 +205,8 @@ debugger;
       setFilterValue('');
       column.setFilterValue(undefined);
     }
+    // focus on the input after clearing the filter
+    // filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`]?.focus();
   };
 
   const handleClearEmptyFilterChip = () => {

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -7,6 +7,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { MRT_TableHeadCellToolBar } from '../head/MRT_TableHeadCellToolBar';
 
 export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData>
   extends Partial<MenuProps> {
@@ -60,7 +61,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { columnSizing, columnVisibility, density, showColumnFilters } =
+  const { columnSizing, columnVisibility, density, showColumnFilters,showToolBar } =
     getState();
   const columnFilterValue = column.getFilterValue();
 
@@ -315,6 +316,18 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
           />,
         ]
       : []),
+
+     // **Newly Added Menu Item for Toolbar Visibility**
+  <MRT_ActionMenuItem
+    icon={<ViewColumnIcon />}
+    key={13}
+    label={showToolBar ? "Hide ToolBar" : "Show ToolBar"}
+    onClick={(e) => {
+      e.stopPropagation();
+      table.setShowToolBar(!showToolBar);
+    }}
+    table={table}
+  />,
   ].filter(Boolean);
 
   return (

package/src/hooks/useMRT_TableInstance.ts

@@ -158,7 +158,12 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
   );
   const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
     initialState?.showColumnFilters ?? false,
+  ); 
+  const [showToolBar, setShowToolBar] = useState<boolean>(
+    initialState?.showToolBar ?? false,
   );
+
+
   const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(
     initialState?.showGlobalFilter ?? false,
   );
@@ -186,6 +191,7 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     pagination,
     showAlertBanner,
     showColumnFilters,
+    showToolBar,
     showGlobalFilter,
     showToolbarDropZone,
     ...definedTableOptions.state,
@@ -317,6 +323,8 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner;
   table.setShowColumnFilters =
     statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters;
+      table.setShowToolBar =
+    statefulTableOptions.onShowToolBarChange ?? setShowToolBar;
   table.setShowGlobalFilter =
     statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter;
   table.setShowToolbarDropZone =

package/src/types.ts

@@ -344,6 +344,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   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>>;
@@ -402,6 +403,7 @@ export interface MRT_TableState<TData extends MRT_RowData> extends TableState {
   isSaving: boolean;
   showAlertBanner: boolean;
   showColumnFilters: boolean;
+  showToolBar: boolean;
   showGlobalFilter: boolean;
   showLoadingOverlay: boolean;
   showProgressBars: boolean;
@@ -1190,6 +1192,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   onEnableKeyboardShortcutsChange?: OnChangeFn<boolean>;
   onShowAlertBannerChange?: OnChangeFn<boolean>;
   onShowColumnFiltersChange?: OnChangeFn<boolean>;
+  onShowToolBarChange?: OnChangeFn<boolean>;
   onShowGlobalFilterChange?: OnChangeFn<boolean>;
   onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
   paginationDisplayMode?: 'custom' | 'default' | 'pages';