material-react-table 0.6.7 → 0.6.8

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
-import { MRT_ColumnInterface } from '.';
-export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface<{}>[];
+import { MRT_ColumnInstance, MRT_ColumnInterface } from '.';
+export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[] | MRT_ColumnInstance[]) => MRT_ColumnInterface<{}>[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.7",
+  "version": "0.6.8",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -135,6 +135,8 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     accessor?: string;
     columns?: MRT_ColumnInterface<D>[];
     disableClickToCopy?: boolean;
+    disableColumnActions?: boolean;
+    disableColumnHiding?: boolean;
     disableEditing?: boolean;
     disableFilters?: boolean;
     filter?: MRT_FilterType | string | FilterType<D>;
@@ -152,6 +154,9 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellColumnActionsButtonProps?:
+      | IconButtonProps
+      | ((column: Column<D>) => IconButtonProps);
     muiTableHeadCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
@@ -277,6 +282,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableFooterCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
+    muiTableHeadCellColumnActionsButtonProps?:
+      | IconButtonProps
+      | ((column: Column<D>) => IconButtonProps);
     muiTableFooterProps?:
       | TableFooterProps
       | ((tableInstance: MRT_TableInstance<D>) => TableFooterProps);

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -10,8 +10,9 @@ interface Props {
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
   const {
-    localization,
     icons: { MoreVertIcon },
+    localization,
+    muiTableHeadCellColumnActionsButtonProps,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -22,6 +23,21 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
     setAnchorEl(event.currentTarget);
   };
 
+  const mTableHeadCellColumnActionsButtonProps =
+    muiTableHeadCellColumnActionsButtonProps instanceof Function
+      ? muiTableHeadCellColumnActionsButtonProps(column)
+      : muiTableHeadCellColumnActionsButtonProps;
+
+  const mcTableHeadCellColumnActionsButtonProps =
+    column.muiTableHeadCellColumnActionsButtonProps instanceof Function
+      ? column.muiTableHeadCellColumnActionsButtonProps(column)
+      : column.muiTableHeadCellColumnActionsButtonProps;
+
+  const iconButtonProps = {
+    ...mTableHeadCellColumnActionsButtonProps,
+    ...mcTableHeadCellColumnActionsButtonProps,
+  };
+
   return (
     <>
       <Tooltip
@@ -35,6 +51,7 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
           aria-label={localization.columnActions}
           onClick={handleClick}
           size="small"
+          {...iconButtonProps}
           sx={{
             height: '2rem',
             mr: '2px',
@@ -45,6 +62,7 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
             '&:hover': {
               opacity: 1,
             },
+            ...iconButtonProps.sx,
           }}
         >
           <MoreVertIcon />

package/src/head/MRT_TableHeadCell.tsx

@@ -178,9 +178,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
           )}
         </Box>
         <Box sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}>
-          {!disableColumnActions && !isParentHeader && (
-            <MRT_ToggleColumnActionMenuButton column={column} />
-          )}
+          {!disableColumnActions &&
+            !column.disableColumnActions &&
+            !isParentHeader && (
+              <MRT_ToggleColumnActionMenuButton column={column} />
+            )}
           {enableColumnResizing && !isParentHeader && (
             <Divider
               flexItem

package/src/head/MRT_TableHeadRow.tsx

@@ -19,6 +19,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
     disableExpandAll,
+    disableSelectAll,
     enableRowActions,
     enableRowEditing,
     enableRowNumbers,
@@ -81,7 +82,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         )
       ) : null}
       {enableSelection ? (
-        !isParentHeader ? (
+        !isParentHeader && !disableSelectAll ? (
           <MRT_SelectCheckbox selectAll />
         ) : (
           <MRT_TableSpacerCell width="1rem" />

package/src/inputs/MRT_EditCellTextField.tsx

@@ -39,12 +39,6 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
   const textFieldProps = {
     ...mTableBodyCellEditTextFieldProps,
     ...mcTableBodyCellEditTextFieldProps,
-    style: {
-      //@ts-ignore
-      ...muiTableBodyCellEditTextFieldProps?.style,
-      //@ts-ignore
-      ...cell.column.muiTableBodyCellEditTextFieldProps?.style,
-    },
   };
 
   if (!cell.column.disableEditing && cell.column.Edit) {

package/src/inputs/MRT_FilterTextField.tsx

@@ -43,10 +43,6 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   const textFieldProps = {
     ...mTableHeadCellFilterTextFieldProps,
     ...mcTableHeadCellFilterTextFieldProps,
-    style: {
-      ...mTableHeadCellFilterTextFieldProps?.style,
-      ...mcTableHeadCellFilterTextFieldProps?.style,
-    },
   } as TextFieldProps;
 
   const [filterValue, setFilterValue] = useState('');

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -29,7 +29,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
 
   return (
     <TableCell
-      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+      sx={{
+        ...commonTableBodyButtonCellStyles(tableInstance.state.densePadding),
+        maxWidth: '2rem',
+        width: '2rem',
+      }}
     >
       <Tooltip
         arrow

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -246,7 +246,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           </MenuItem>,
         ]}
       {!disableColumnHiding && [
-        <MenuItem key={0} onClick={handleHideColumn} sx={commonMenuItemStyles}>
+        <MenuItem
+          disabled={column.disableColumnHiding}
+          key={0}
+          onClick={handleHideColumn}
+          sx={commonMenuItemStyles}
+        >
           <Box sx={commonListItemStyles}>
             <ListItemIcon>
               <VisibilityOffIcon />

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -3,6 +3,7 @@ import { Button, Menu, Divider, Box } from '@mui/material';
 import type { MRT_ColumnInstance } from '..';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
+import { findLowestLevelCols } from '../utils';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -17,6 +18,16 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
 }) => {
   const { localization, tableInstance } = useMRT();
 
+  const hideAllColumns = () => {
+    (
+      findLowestLevelCols(
+        tableInstance.columns as MRT_ColumnInstance[],
+      ) as MRT_ColumnInstance[]
+    )
+      .filter((col: MRT_ColumnInstance) => !col.disableColumnHiding)
+      .forEach((col: MRT_ColumnInstance) => col.toggleHidden(true));
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -40,7 +51,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
               !tableInstance.getToggleHideAllColumnsProps().checked &&
               !tableInstance.getToggleHideAllColumnsProps().indeterminate
             }
-            onClick={() => tableInstance.toggleHideAllColumns(true)}
+            onClick={hideAllColumns}
           >
             {localization.hideAll}
           </Button>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -43,7 +43,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}
           control={<Switch />}
-          disabled={isSubMenu && switchChecked}
+          disabled={(isSubMenu && switchChecked) || column.disableColumnHiding}
           label={column.Header as string}
           onChange={() => handleToggleColumnHidden(column)}
         />

package/src/table/MRT_TableSpacerCell.tsx

@@ -9,18 +9,11 @@ interface Props {
 export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
   const { muiTableBodyCellProps } = useMRT();
 
-  const mTableBodyCellrops =
+  const tableCellProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps()
       : muiTableBodyCellProps;
 
-  const tableCellProps = {
-    ...mTableBodyCellrops,
-    style: {
-      ...mTableBodyCellrops?.style,
-    },
-  };
-
   return (
     <TableCell {...tableCellProps} sx={{ width, ...tableCellProps?.sx }} />
   );

package/src/utils.ts

@@ -1,8 +1,12 @@
-import { MRT_ColumnInterface } from '.';
+import { MRT_ColumnInstance, MRT_ColumnInterface } from '.';
 
-export const findLowestLevelCols = (columns: MRT_ColumnInterface[]) => {
-  let lowestLevelColumns: MRT_ColumnInterface[] = columns;
-  let currentCols: MRT_ColumnInterface[] | undefined = columns;
+export const findLowestLevelCols = (
+  columns: MRT_ColumnInterface[] | MRT_ColumnInstance[],
+) => {
+  let lowestLevelColumns: MRT_ColumnInterface[] | MRT_ColumnInstance[] =
+    columns;
+  let currentCols: MRT_ColumnInterface[] | MRT_ColumnInstance[] | undefined =
+    columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
     const nextCols: MRT_ColumnInterface[] = currentCols
       .filter((col) => !!col.columns)