material-react-table 0.7.0 → 0.7.1

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import type { MRT_ColumnInstance, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
-    column: MRT_ColumnInstance;
+    column: MRT_Column;
     isSubMenu?: boolean;
     tableInstance: MRT_TableInstance;
 }

package/dist/utils.d.ts

@@ -1,12 +1,12 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnInterface, MRT_FilterType } from '.';
-export declare const getAllLeafColumnDefs: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface[];
-export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnInterface<D>, currentFilterTypes: {
+import { MRT_ColumnDef, MRT_FilterType } from '.';
+export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
+export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
     [key: string]: MRT_FilterType;
 }) => ColumnDef<D>;
-export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnInterface<D>, currentFilterTypes: {
+export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterTypes: {
     [key: string]: MRT_FilterType;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnInterface<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "filterType" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortType" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationType" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledFilterTypes" | "filter" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0",
+  "version": "0.7.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.43",
+    "@tanstack/react-table": "^8.0.0-alpha.44",
     "match-sorter": "^6.3.1"
   }
 }

package/src/MaterialReactTable.tsx

@@ -53,7 +53,7 @@ export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
     'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
   >
 > & {
-  columns: MRT_ColumnInterface<D>[];
+  columns: MRT_ColumnDef<D>[];
   data: D[];
   initialState?: Partial<MRT_TableState<D>>;
   state?: Partial<MRT_TableState<D>>;
@@ -85,8 +85,8 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'getState'
   | 'options'
 > & {
-  getAllColumns: () => MRT_ColumnInstance<D>[];
-  getAllLeafColumns: () => MRT_ColumnInstance<D>[];
+  getAllColumns: () => MRT_Column<D>[];
+  getAllLeafColumns: () => MRT_Column<D>[];
   getExpandedRowModel: () => MRT_RowModel<D>;
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
@@ -126,7 +126,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   pagination: Partial<PaginationState>;
 };
 
-export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
+export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
   'header' | 'footer' | 'columns'
 > & {
@@ -170,11 +170,11 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
   id: keyof D | string;
-  columns?: MRT_ColumnInterface<D>[];
+  columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
   enableEditing?: boolean;
-  enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
+  enabledColumnFilterTypes?: (MRT_FILTER_TYPE | string)[];
   filter?: MRT_FilterType | string | FilterType<D>;
   filterSelectOptions?: (string | { text: string; value: string })[];
   footer?: string;
@@ -213,7 +213,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => TableCellProps);
   muiTableHeadCellColumnActionsButtonProps?:
     | IconButtonProps
@@ -222,7 +222,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => IconButtonProps);
   muiTableHeadCellFilterTextFieldProps?:
     | TextFieldProps
@@ -231,7 +231,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
     | TableCellProps
@@ -240,7 +240,7 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
         column,
       }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
       }) => TableCellProps);
   onCellEditBlur?: ({
     cell,
@@ -269,19 +269,19 @@ export type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<
   }) => void;
 };
 
-export type MRT_ColumnInstance<D extends Record<string, any> = {}> = Omit<
+export type MRT_Column<D extends Record<string, any> = {}> = Omit<
   Column<D>,
   'header' | 'footer' | 'columns'
 > &
-  MRT_ColumnInterface<D> & {
-    columns?: MRT_ColumnInstance<D>[];
+  MRT_ColumnDef<D> & {
+    columns?: MRT_Column<D>[];
   };
 
 export type MRT_Header<D extends Record<string, any> = {}> = Omit<
   Header<D>,
   'column'
 > & {
-  column: MRT_ColumnInstance<D>;
+  column: MRT_Column<D>;
 };
 
 export type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<
@@ -314,7 +314,7 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
   Cell<D>,
   'column' | 'row'
 > & {
-  column: MRT_ColumnInstance<D>;
+  column: MRT_Column<D>;
   row: MRT_Row<D>;
 };
 
@@ -333,13 +333,13 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
     enableStickyHeader?: boolean;
+    enableTableFooter?: boolean;
+    enableTableHead?: boolean;
+    enableToolbarBottom?: boolean;
+    enableToolbarInternalActions?: boolean;
+    enableToolbarTop?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: { [key in MRT_FILTER_TYPE]: any };
-    hideTableFooter?: boolean;
-    hideTableHead?: boolean;
-    hideToolbarBottom?: boolean;
-    hideToolbarInternalActions?: boolean;
-    hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
     isLoading?: boolean;
@@ -445,7 +445,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
@@ -470,7 +470,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
@@ -479,7 +479,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
@@ -488,7 +488,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           column,
         }: {
           tableInstance: MRT_TableInstance;
-          column: MRT_ColumnInstance<D>;
+          column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
@@ -622,7 +622,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       columnVisibility,
       tableInstance,
     }: {
-      column: MRT_ColumnInstance<D>;
+      column: MRT_Column<D>;
       columnVisibility: VisibilityState;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
@@ -736,6 +736,11 @@ export default <D extends Record<string, any> = {}>({
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = true,
+  enableTableFooter = true,
+  enableTableHead = true,
+  enableToolbarBottom = true,
+  enableToolbarInternalActions = true,
+  enableToolbarTop = true,
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -759,6 +764,11 @@ export default <D extends Record<string, any> = {}>({
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}
     enableStickyHeader={enableStickyHeader}
+    enableTableFooter={enableTableFooter}
+    enableTableHead={enableTableHead}
+    enableToolbarBottom={enableToolbarBottom}
+    enableToolbarInternalActions={enableToolbarInternalActions}
+    enableToolbarTop={enableToolbarTop}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}

package/src/head/MRT_TableHeadCell.tsx

@@ -144,7 +144,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
-              whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal',
+              whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal',
             }}
           >
             {headerElement}

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -123,8 +123,8 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         },
       ].filter((filterType) =>
         header
-          ? !header.column.enabledFilterTypes ||
-            header.column.enabledFilterTypes.includes(filterType.type)
+          ? !header.column.enabledColumnFilterTypes ||
+            header.column.enabledColumnFilterTypes.includes(filterType.type)
           : (!enabledGlobalFilterTypes ||
               enabledGlobalFilterTypes.includes(filterType.type)) &&
             [

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import type { MRT_ColumnInstance, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
 interface Props {
-  column: MRT_ColumnInstance;
+  column: MRT_Column;
   isSubMenu?: boolean;
   tableInstance: MRT_TableInstance;
 }
@@ -26,9 +26,9 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     (column.columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: MRT_ColumnInstance) => {
+  const handleToggleColumnHidden = (column: MRT_Column) => {
     if (column.columnDefType === 'group') {
-      column?.columns?.forEach?.((childColumn: MRT_ColumnInstance) => {
+      column?.columns?.forEach?.((childColumn: MRT_Column) => {
         childColumn.toggleVisibility(!switchChecked);
       });
     } else {
@@ -57,7 +57,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
-      {column.columns?.map((c: MRT_ColumnInstance, i) => (
+      {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
           key={`${i}-${c.id}`}
           column={c}

package/src/table/MRT_Table.tsx

@@ -14,10 +14,10 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
   const {
     getTableProps,
     options: {
-      enableStickyHeader,
-      hideTableFooter,
-      hideTableHead,
       muiTableProps,
+      enableTableHead,
+      enableTableFooter,
+      enableStickyHeader,
     },
   } = tableInstance;
 
@@ -33,11 +33,11 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
 
   return (
     <Table stickyHeader={enableStickyHeader} {...tableProps}>
-      {!hideTableHead && (
+      {enableTableHead && (
         <MRT_TableHead pinned={pinned} tableInstance={tableInstance} />
       )}
       <MRT_TableBody pinned={pinned} tableInstance={tableInstance} />
-      {!hideTableFooter && (
+      {enableTableFooter && (
         <MRT_TableFooter pinned={pinned} tableInstance={tableInstance} />
       )}
     </Table>

package/src/table/MRT_TablePaper.tsx

@@ -12,7 +12,7 @@ interface Props {
 export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
-    options: { hideToolbarBottom, hideToolbarTop, muiTablePaperProps },
+    options: { enableToolbarBottom, enableToolbarTop, muiTablePaperProps },
   } = tableInstance;
 
   const { isFullScreen } = getState();
@@ -21,8 +21,10 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
     if (typeof window !== 'undefined') {
       if (isFullScreen) {
         document.body.style.overflow = 'hidden';
+        document.body.style.height = '100vh';
       } else {
         document.body.style.overflow = 'auto';
+        document.body.style.height = 'auto';
       }
     }
   }, [isFullScreen]);
@@ -41,23 +43,17 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
         ...tablePaperProps?.sx,
       }}
       style={{
-        height: isFullScreen ? '100%' : undefined,
-        left: isFullScreen ? '0' : undefined,
+        height: isFullScreen ? '100vh' : undefined,
         margin: isFullScreen ? '0' : undefined,
-        maxHeight: isFullScreen ? '100%' : undefined,
-        maxWidth: isFullScreen ? '100%' : undefined,
-        overflowY: !isFullScreen ? 'hidden' : undefined,
-        position: isFullScreen ? 'fixed' : undefined,
-        right: isFullScreen ? '0' : undefined,
-        top: isFullScreen ? '0' : undefined,
+        maxHeight: isFullScreen ? '100vh' : undefined,
+        maxWidth: isFullScreen ? '100vw' : undefined,
+        padding: isFullScreen ? '0' : undefined,
         width: isFullScreen ? '100vw' : undefined,
-        zIndex: isFullScreen ? 1200 : 1,
-        bottom: isFullScreen ? '0' : undefined,
       }}
     >
-      {!hideToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
+      {enableToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
       <MRT_TableContainer tableInstance={tableInstance} />
-      {!hideToolbarBottom && (
+      {enableToolbarBottom && (
         <MRT_ToolbarBottom tableInstance={tableInstance} />
       )}
     </Paper>

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   PaginationState,
   Table,
@@ -14,12 +14,7 @@ import {
   getCoreRowModelSync,
   ColumnDef,
 } from '@tanstack/react-table';
-import {
-  MRT_ColumnInterface,
-  MRT_FilterType,
-  MRT_Row,
-  MRT_TableInstance,
-} from '..';
+import { MRT_ColumnDef, MRT_FilterType, MRT_Row, MRT_TableInstance } from '..';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
@@ -34,14 +29,18 @@ import {
 } from '../utils';
 import { defaultFilterFNs } from '../filtersFNs';
 import { MRT_FILTER_TYPE } from '../enums';
+import { Box, Dialog, Grow } from '@mui/material';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   props: MaterialReactTableProps<D>,
 ) => {
-  const idPrefix = useMemo(
-    () => props.idPrefix ?? Math.random().toString(36).substring(2, 9),
+  const [idPrefix, setIdPrefix] = useState(props.idPrefix);
+  useEffect(
+    () =>
+      setIdPrefix(props.idPrefix ?? Math.random().toString(36).substring(2, 9)),
     [props.idPrefix],
   );
+
   const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
     null,
   );
@@ -68,16 +67,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   }>(() =>
     Object.assign(
       {},
-      ...getAllLeafColumnDefs(props.columns as MRT_ColumnInterface[]).map(
-        (c) => ({
-          [c.id as string]:
-            c.filter ??
-            props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
-            (!!c.filterSelectOptions?.length
-              ? MRT_FILTER_TYPE.EQUALS
-              : MRT_FILTER_TYPE.BEST_MATCH),
-        }),
-      ),
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => ({
+        [c.id as string]:
+          c.filter ??
+          props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
+          (!!c.filterSelectOptions?.length
+            ? MRT_FILTER_TYPE.EQUALS
+            : MRT_FILTER_TYPE.BEST_MATCH),
+      })),
     ),
   );
 
@@ -184,11 +181,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ? [...Array(10).fill(null)].map(() =>
             Object.assign(
               {},
-              ...getAllLeafColumnDefs(
-                props.columns as MRT_ColumnInterface[],
-              ).map((c) => ({
-                [c.id]: null,
-              })),
+              ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
+                (c) => ({
+                  [c.id]: null,
+                }),
+              ),
             ),
           )
         : props.data,
@@ -198,9 +195,6 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   //@ts-ignore
   const tableInstance: MRT_TableInstance<{}> = {
     ...useTableInstance(table, {
-      ...props,
-      columns,
-      data,
       //@ts-ignore
       filterTypes: defaultFilterFNs,
       getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
@@ -210,13 +204,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       getGroupedRowModel: getGroupedRowModelSync(),
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModelSync(),
-      getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
+      getSubRows: (originalRow: D) => originalRow.subRows,
       globalFilterType: currentGlobalFilterType,
       idPrefix,
-      //@ts-ignore
-      initialState: props.initialState,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
+      ...props,
+      columns,
+      data,
       state: {
         currentEditingRow,
         currentFilterTypes,
@@ -239,5 +234,23 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     setShowGlobalFilter,
   };
 
-  return <MRT_TablePaper tableInstance={tableInstance} />;
+  return (
+    <>
+      <Dialog
+        TransitionComponent={Grow}
+        PaperComponent={Box}
+        disablePortal
+        fullScreen
+        keepMounted={false}
+        onClose={() => tableInstance.setIsFullScreen(false)}
+        open={tableInstance.getState().isFullScreen}
+        transitionDuration={400}
+      >
+        <MRT_TablePaper tableInstance={tableInstance} />
+      </Dialog>
+      {!tableInstance.getState().isFullScreen && (
+        <MRT_TablePaper tableInstance={tableInstance} />
+      )}
+    </>
+  );
 };

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -15,7 +15,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
     options: {
-      hideToolbarInternalActions,
+      enableToolbarInternalActions,
       idPrefix,
       enablePagination,
       muiTableToolbarBottomProps,
@@ -51,7 +51,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
       <Box
         sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
-        {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
+        {enableToolbarInternalActions && positionToolbarActions === 'bottom' ? (
           <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
         ) : (
           <span />

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -29,7 +29,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
     options: {
       enableGlobalFilter,
       enablePagination,
-      hideToolbarInternalActions,
+      enableToolbarInternalActions,
       idPrefix,
       muiTableToolbarTopProps,
       positionPagination,
@@ -82,7 +82,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
           {enableGlobalFilter && (
             <MRT_SearchTextField tableInstance={tableInstance} />
           )}
-          {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
+          {enableToolbarInternalActions && positionToolbarActions === 'top' && (
             <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
           )}
         </Box>

package/src/utils.ts

@@ -1,17 +1,17 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnInterface, MRT_FilterType } from '.';
+import { MRT_ColumnDef, MRT_FilterType } from '.';
 import { MRT_FILTER_TYPE } from './enums';
 
 export const getAllLeafColumnDefs = (
-  columns: MRT_ColumnInterface[],
-): MRT_ColumnInterface[] => {
-  let lowestLevelColumns: MRT_ColumnInterface[] = columns;
-  let currentCols: MRT_ColumnInterface[] | undefined = columns;
+  columns: MRT_ColumnDef[],
+): MRT_ColumnDef[] => {
+  let lowestLevelColumns: MRT_ColumnDef[] = columns;
+  let currentCols: MRT_ColumnDef[] | undefined = columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
-    const nextCols: MRT_ColumnInterface[] = currentCols
+    const nextCols: MRT_ColumnDef[] = currentCols
       .filter((col) => !!col.columns)
       .map((col) => col.columns)
-      .flat() as MRT_ColumnInterface[];
+      .flat() as MRT_ColumnDef[];
     if (nextCols.every((col) => !col?.columns)) {
       lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
     }
@@ -22,7 +22,7 @@ export const getAllLeafColumnDefs = (
 
 export const createGroup = <D extends Record<string, any> = {}>(
   table: Table<D>,
-  column: MRT_ColumnInterface<D>,
+  column: MRT_ColumnDef<D>,
   currentFilterTypes: { [key: string]: MRT_FilterType },
 ): ColumnDef<D> =>
   table.createGroup({
@@ -36,7 +36,7 @@ export const createGroup = <D extends Record<string, any> = {}>(
 
 export const createDataColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
-  column: MRT_ColumnInterface<D>,
+  column: MRT_ColumnDef<D>,
   currentFilterTypes: { [key: string]: MRT_FilterType },
 ): ColumnDef<D> => // @ts-ignore
   table.createDataColumn(column.id, {
@@ -46,5 +46,5 @@ export const createDataColumn = <D extends Record<string, any> = {}>(
 
 export const createDisplayColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
-  column: Omit<MRT_ColumnInterface<D>, 'header'> & { header?: string },
+  column: Omit<MRT_ColumnDef<D>, 'header'> & { header?: string },
 ): ColumnDef<D> => table.createDisplayColumn(column);