material-react-table 0.6.6 → 0.6.9

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.6",
+  "version": "0.6.9",
   "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.",
@@ -59,7 +59,7 @@
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-beta.0",
+    "@faker-js/faker": "^6.0.0",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.1",
     "@size-limit/preset-small-lib": "^7.0.8",
@@ -75,10 +75,10 @@
     "@types/faker": "^6.6.8",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
-    "@types/react-table": "^7.7.9",
+    "@types/react-table": "^7.7.10",
     "babel-loader": "^8.2.3",
     "husky": "^7.0.4",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",

package/src/MaterialReactTable.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
+  CheckboxProps,
   IconButtonProps,
   LinearProgressProps,
   SkeletonProps,
@@ -134,9 +135,11 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     Header?: string;
     accessor?: string;
     columns?: MRT_ColumnInterface<D>[];
+    disableClickToCopy?: boolean;
+    disableColumnActions?: boolean;
+    disableColumnHiding?: boolean;
     disableEditing?: boolean;
     disableFilters?: boolean;
-    disableCellCopyButton?: boolean;
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | { text: string; value: string })[];
     filterTypes?: (MRT_FILTER_TYPE | string)[];
@@ -152,6 +155,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);
@@ -233,7 +239,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     disableFullScreenToggle?: boolean;
     disableSelectAll?: boolean;
     disableSubRowTree?: boolean;
-    enableCellCopyButtons?: boolean;
+    enableClickToCopy?: boolean;
     enableColumnGrouping?: boolean;
     enableColumnResizing?: boolean;
     enableRowActions?: boolean;
@@ -255,6 +261,13 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       | LinearProgressProps
       | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
+    muiSelectCheckboxProps?:
+      | CheckboxProps
+      | ((
+          isSelectAll?: boolean,
+          row?: MRT_Row<D>,
+          tableInstance?: MRT_TableInstance<D>,
+        ) => CheckboxProps);
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | ((cell?: MRT_Cell<D>) => TextFieldProps);
@@ -283,6 +296,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableFooterRowProps?:
       | TableRowProps
       | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
+    muiTableHeadCellColumnActionsButtonProps?:
+      | IconButtonProps
+      | ((column: Column<D>) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | ((column: Column<D>) => TextFieldProps);
@@ -328,7 +344,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       event: MouseEvent<HTMLButtonElement>,
       row: Row<D>,
     ) => void;
-    onRowSelectChange?: (
+    onSelectChange?: (
       event: ChangeEvent,
       row: Row<D>,
       selectedRows: Row<D>[],

package/src/body/MRT_TableBodyCell.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { Box, Skeleton, TableCell, TableCellProps } from '@mui/material';
+import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import type { MRT_Cell } from '..';
@@ -23,7 +23,7 @@ interface Props {
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
-    enableCellCopyButtons,
+    enableClickToCopy,
     isLoading,
     muiTableBodyCellProps,
     muiTableBodyCellSkeletonProps,
@@ -83,11 +83,8 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
         <span>
           {cell.render('Cell')} ({cell.row.subRows.length})
         </span>
-      ) : enableCellCopyButtons && !cell.column.disableCellCopyButton ? (
-        <Box sx={{ whiteSpace: 'nowrap' }}>
-          {cell.render('Cell')}
-          {<MRT_CopyButton cell={cell} />}
-        </Box>
+      ) : enableClickToCopy && !cell.column.disableClickToCopy ? (
+        <MRT_CopyButton cell={cell} />
       ) : (
         cell.render('Cell')
       )}

package/src/body/MRT_TableBodyRow.tsx

@@ -1,6 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
 import { TableCell, TableRow } from '@mui/material';
 import {
+  commonTableBodyButtonCellStyles,
   commonTableBodyCellStyles,
   MRT_TableBodyCell,
 } from './MRT_TableBodyCell';
@@ -26,6 +27,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
+    tableInstance,
     tableInstance: {
       state: { densePadding },
     },
@@ -67,7 +69,19 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         {(anyRowsCanExpand || renderDetailPanel) && (
           <MRT_ExpandButton row={row} />
         )}
-        {enableSelection && <MRT_SelectCheckbox row={row} />}
+        {enableSelection && (
+          <TableCell
+            sx={{
+              ...commonTableBodyButtonCellStyles(
+                tableInstance.state.densePadding,
+              ),
+              maxWidth: '3rem',
+              width: '3rem',
+            }}
+          >
+            <MRT_SelectCheckbox row={row} />
+          </TableCell>
+        )}
         {row.cells.map((cell: MRT_Cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}

package/src/buttons/MRT_CopyButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { Button, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Cell } from '..';
 
@@ -8,43 +8,43 @@ interface Props {
 }
 
 export const MRT_CopyButton: FC<Props> = ({ cell }) => {
-  const {
-    icons: { CheckBoxIcon, ContentCopyIcon },
-    localization,
-  } = useMRT();
+  const { localization } = useMRT();
 
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (text: string) => {
     navigator.clipboard.writeText(text);
     setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    setTimeout(() => setCopied(false), 4000);
   };
 
   return (
     <Tooltip
       arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      placement="top"
       title={copied ? localization.copiedToClipboard : localization.clickToCopy}
     >
-      <IconButton
+      <Button
         aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.value)}
         size="small"
         sx={{
-          opacity: 0.05,
-          m: '0 0.5rem',
-          transition: 'all 0.2s ease-in-out',
-          '&:hover': {
-            opacity: 1,
-          },
+          backgroundColor: 'transparent',
+          color: 'inherit',
+          letterSpacing: 'inherit',
+          fontFamily: 'inherit',
+          fontSize: 'inherit',
+          m: '-0.25rem',
+          textTransform: 'inherit',
+          textAlign: 'inherit',
+          minWidth: 'unset',
         }}
+        variant="text"
       >
-        {copied ? (
-          <CheckBoxIcon color="success" fontSize="small" />
-        ) : (
-          <ContentCopyIcon fontSize="small" />
-        )}
-      </IconButton>
+        {cell.render('Cell')}
+      </Button>
     </Tooltip>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { CSSProperties, FC } from 'react';
 import {
   TableCell,
   TableSortLabel,
@@ -16,6 +16,11 @@ import type { MRT_HeaderGroup } from '..';
 export const commonTableHeadCellStyles = (
   densePadding: boolean,
   enableColumnResizing?: boolean,
+  widths?: {
+    maxWidth?: CSSProperties['maxWidth'];
+    minWidth?: CSSProperties['minWidth'];
+    width?: CSSProperties['width'];
+  },
 ) => ({
   fontWeight: 'bold',
   height: '100%',
@@ -23,6 +28,7 @@ export const commonTableHeadCellStyles = (
   pt: densePadding ? '0.75rem' : '1.25rem',
   transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
   verticalAlign: 'text-top',
+  ...widths,
 });
 
 interface Props {
@@ -105,6 +111,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
         ...commonTableHeadCellStyles(
           tableInstance.state.densePadding,
           enableColumnResizing,
+          {
+            maxWidth: column.maxWidth,
+            minWidth: column.minWidth,
+            width: column.width,
+          },
         ),
         ...tableCellProps?.sx,
       }}
@@ -167,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_TableHeadCellActions.tsx

@@ -16,7 +16,12 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
   return (
     <TableCell
       style={{ textAlign: 'center' }}
-      sx={{ ...commonTableHeadCellStyles(densePadding), textAlign: 'center' }}
+      sx={{
+        ...commonTableHeadCellStyles(densePadding),
+        textAlign: 'center',
+        maxWidth: '4rem',
+        width: '4rem',
+      }}
     >
       {localization.actions}
     </TableCell>

package/src/head/MRT_TableHeadRow.tsx

@@ -4,6 +4,7 @@ import {
   commonTableHeadCellStyles,
   MRT_TableHeadCell,
 } from './MRT_TableHeadCell';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 import { useMRT } from '../useMRT';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -19,6 +20,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
     disableExpandAll,
+    disableSelectAll,
     enableRowActions,
     enableRowEditing,
     enableRowNumbers,
@@ -81,8 +83,18 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         )
       ) : null}
       {enableSelection ? (
-        !isParentHeader ? (
-          <MRT_SelectCheckbox selectAll />
+        !isParentHeader && !disableSelectAll ? (
+          <TableCell
+            sx={{
+              ...commonTableBodyButtonCellStyles(
+                tableInstance.state.densePadding,
+              ),
+              maxWidth: '3rem',
+              width: '3rem',
+            }}
+          >
+            <MRT_SelectCheckbox selectAll />
+          </TableCell>
         ) : (
           <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

@@ -1,8 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell, Tooltip } from '@mui/material';
+import { Checkbox, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
   row?: MRT_Row;
@@ -10,48 +9,76 @@ interface Props {
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
-  const { localization, onRowSelectChange, onSelectAllChange, tableInstance } =
-    useMRT();
+  const {
+    localization,
+    muiSelectCheckboxProps,
+    onSelectChange,
+    onSelectAllChange,
+    tableInstance,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
-  const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
-      onSelectAllChange?.(event, tableInstance.selectedFlatRows);
+      onSelectAllChange?.(
+        event,
+        event.target.checked ? tableInstance.rows : [],
+      );
     } else if (row) {
       row?.getToggleRowSelectedProps()?.onChange?.(event);
-      onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
+      onSelectChange?.(
+        event,
+        row,
+        event.target.checked
+          ? [...tableInstance.selectedFlatRows, row]
+          : tableInstance.selectedFlatRows.filter(
+              (selectedRow) => selectedRow.id !== row.id,
+            ),
+      );
     }
   };
 
-  const checkboxProps = selectAll
+  const mTableBodyRowSelectCheckboxProps =
+    muiSelectCheckboxProps instanceof Function
+      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      : muiSelectCheckboxProps;
+
+  const rtSelectCheckboxProps = selectAll
     ? tableInstance.getToggleAllRowsSelectedProps()
     : row?.getToggleRowSelectedProps();
 
+  const checkboxProps = {
+    ...mTableBodyRowSelectCheckboxProps,
+    ...rtSelectCheckboxProps,
+    style: {
+      ...rtSelectCheckboxProps?.style,
+      ...mTableBodyRowSelectCheckboxProps?.style,
+    },
+  };
+
   return (
-    <TableCell
-      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={
+        selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+      }
     >
-      <Tooltip
-        arrow
-        enterDelay={1000}
-        enterNextDelay={1000}
-        title={
-          selectAll
+      <Checkbox
+        inputProps={{
+          'aria-label': selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow
-        }
-      >
-        <Checkbox
-          inputProps={{
-            'aria-label': selectAll
-              ? localization.toggleSelectAll
-              : localization.toggleSelectRow,
-          }}
-          onChange={onSelectChange}
-          {...checkboxProps}
-          title={undefined}
-        />
-      </Tooltip>
-    </TableCell>
+            : localization.toggleSelectRow,
+        }}
+        size={densePadding ? 'small' : 'medium'}
+        {...checkboxProps}
+        onChange={handleSelectChange}
+        title={undefined}
+      />
+    </Tooltip>
   );
 };

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)