material-react-table-narender 2.13.25 → 2.13.29

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.25",
+  "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/MaterialReactTable.tsx

@@ -25,7 +25,7 @@ export const MaterialReactTable = <TData extends MRT_RowData>(
   props: MaterialReactTableProps<TData>,
 ) => {
   let table: MRT_TableInstance<TData>;
-debugger;
+//debugger;
   if (isTableInstanceProp(props)) {
     table = props.table;
   } else {

package/src/components/body/MRT_TableBodyCell.tsx

@@ -231,7 +231,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
     tableCellProps?.onKeyDown?.(event);
-    debugger;
+    //debugger;
     cellKeyboardShortcuts({
       cell,
       cellValue: cell.getValue<string>(),

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

@@ -205,6 +205,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       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';

package/src/utils/cell.utils.ts

@@ -80,7 +80,7 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
   table: MRT_TableInstance<TData>;
 }) => {
  
-  debugger;
+  //debugger;
    const {
     getState,
     setEnableKeyboardShortcuts,
@@ -194,7 +194,7 @@ if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
     }
    else if ("Enter" === event.key) {
       
-  debugger;
+  //debugger;
        event.preventDefault();
 const input = currentCell.querySelector('input') as HTMLInputElement;
 const select = currentCell.querySelector('select') as HTMLSelectElement;
@@ -234,7 +234,7 @@ else if (input) {
   ) {
     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"]');