material-react-table-narender 2.13.5 → 2.13.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.5",
+  "version": "2.13.7",
   "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/menus/MRT_ShowHideColumnsMenu.tsx

@@ -40,6 +40,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableHiding,
       localization,
+      enableColumnResizing,
       mrtTheme: { menuBackgroundColor },
     },
   } = table;
@@ -140,6 +141,17 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
             {localization.showAll}
           </Button>
         )}
+        {
+          enableColumnResizing && (
+            <Button
+              onClick={() => {
+                  table.resetColumnSizing(true);
+              }}
+            >
+              {localization.resetColumnSize}
+            </Button>
+          )
+        }
       </Box>
       <Divider />
       {allColumns.map((column, index) => (

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -21,6 +21,7 @@ import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { Button } from '@mui/material';
 
 export interface MRT_ShowHideColumnsMenuItemsProps<TData extends MRT_RowData>
   extends MenuItemProps {
@@ -48,10 +49,14 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableHiding,
       localization,
+      enableColumnResizing,
       mrtTheme: { draggingBorderColor },
+      icons: { SettingsBackupRestoreIcon },
+
     },
     setColumnOrder,
   } = table;
+
   const { columnOrder } = getState();
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -175,6 +180,30 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
               {columnDef.header}
             </Typography>
           )}
+          {
+            enableColumnResizing && columnDefType !== 'group' && 
+              (
+                columnDef.enableResizing !== false ? (
+                  <Tooltip
+                    {...getCommonTooltipProps()}
+                    title={
+                      localization.resetColumnSize
+                    }
+                  >
+                    <Button
+                      onClick={() => {
+                          column.resetSize(); 
+                      }}
+                    >
+                      <SettingsBackupRestoreIcon />
+                    </Button>
+                  </Tooltip>
+                ) : (
+                  <Box sx={{ width: '28px' }} />
+                )
+              )
+          }
+
         </Box>
       </MenuItem>
       {column.columns?.map((c: MRT_Column<TData>, i) => (

package/src/icons.ts

@@ -32,6 +32,7 @@ import SortIcon from '@mui/icons-material/Sort';
 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';
 
 export const MRT_Default_Icons = {
   ArrowDownwardIcon,
@@ -68,6 +69,7 @@ export const MRT_Default_Icons = {
   SyncAltIcon,
   ViewColumnIcon,
   VisibilityOffIcon,
+  SettingsBackupRestoreIcon
 } as const;
 
 export type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;

package/src/utils/cell.utils.ts

@@ -149,6 +149,38 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
     ].includes(event.key)
   ) {
     event.preventDefault();
+// if (['ArrowDown'].includes(event.key)) {
+//     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
+//     if (autocomplete) {
+//         return; // Exit the function if it's an Autocomplete
+//     }
+
+//     // Additional logic for when it's not an Autocomplete can go here
+// }
+
+
+if (['ArrowDown','ArrowUp'].includes(event.key)) {
+    const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
+    
+    // Check if the autocomplete input exists and is focused
+    if (autocomplete && document.activeElement === autocomplete) {
+        // Do something with the autocomplete input
+        console.log('Autocomplete input found and is focused:', autocomplete);
+        return; // Exit if it's an Autocomplete and it is focused
+    }
+    
+    // Additional logic if not an Autocomplete or not focused
+}
+
+
+
+
 
     const currentRow = parentElement || currentCell.closest('tr');
     const tableElement = containerElement || currentCell.closest('table');