material-react-table 0.7.0-alpha.8 → 0.7.1

package/src/head/MRT_TableHeadCell.tsx

@@ -30,8 +30,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
       icons: { FilterAltIcon, FilterAltOff },
       localization,
       muiTableHeadCellProps,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { isDensePadding, showFilters } = getState();
@@ -56,9 +56,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
 
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.clearSort
-      : localization.sortByColumnDesc.replace('{column}', column.header)
-    : localization.sortByColumnAsc.replace('{column}', column.header);
+      ? localization.sortedByColumnDesc.replace('{column}', column.header)
+      : localization.sortedByColumnAsc.replace('{column}', column.header)
+    : localization.unsorted;
 
   const filterType = getState()?.currentFilterTypes?.[header.id];
 
@@ -135,7 +135,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           }}
         >
           <Box
-            {...column.getToggleSortingProps()}
+            onClick={() => column.toggleSorting()}
             sx={{
               alignItems: 'center',
               cursor:
@@ -144,9 +144,8 @@ 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',
             }}
-            title={undefined}
           >
             {headerElement}
             {column.columnDefType !== 'group' && column.getCanSort() && (
@@ -185,9 +184,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                     }}
                   >
                     {showFilters && !column.getColumnFilterValue() ? (
-                      <FilterAltOff fontSize="small" />
+                      <FilterAltOff />
                     ) : (
-                      <FilterAltIcon fontSize="small" />
+                      <FilterAltIcon />
                     )}
                   </IconButton>
                 </Tooltip>

package/src/inputs/MRT_EditCellTextField.tsx

@@ -16,11 +16,8 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: {
-      enableEditing,
-      muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow,
-    },
+    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    setCurrentEditingRow,
   } = tableInstance;
 
   const [value, setValue] = useState(cell.value);

package/src/inputs/MRT_FilterTextField.tsx

@@ -32,8 +32,8 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
       idPrefix,
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes,
     },
+    setCurrentFilterTypes,
   } = tableInstance;
 
   const { column } = header;
@@ -206,7 +206,7 @@ export const MRT_FilterTextField: FC<Props> = ({ header, tableInstance }) => {
                       width: '1.75rem',
                     }}
                   >
-                    <CloseIcon fontSize="small" />
+                    <CloseIcon />
                   </IconButton>
                 </span>
               </Tooltip>

package/src/inputs/MRT_SearchTextField.tsx

@@ -29,11 +29,11 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       idPrefix,
       localization,
       muiSearchTextFieldProps,
-      onGlobalFilterChange,
+      onGlobalSearchFilterChange,
     },
   } = tableInstance;
 
-  const { globalFilter, showSearch } = getState();
+  const { globalFilter, showGlobalFilter } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterChange?.({ event, tableInstance });
+      onGlobalSearchFilterChange?.({ event, tableInstance });
     }, 200),
     [],
   );
@@ -61,7 +61,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       : muiSearchTextFieldProps;
 
   return (
-    <Collapse in={showSearch} orientation="horizontal">
+    <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.search}
@@ -82,7 +82,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}
                   >
-                    <SearchIcon fontSize="small" />
+                    <SearchIcon />
                   </IconButton>
                 </span>
               </Tooltip>
@@ -97,7 +97,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
                 size="small"
                 title={localization.clearSearch}
               >
-                <CloseIcon fontSize="small" />
+                <CloseIcon />
               </IconButton>
             </InputAdornment>
           ),

package/src/localization.ts

@@ -46,6 +46,8 @@ export interface MRT_Localization {
   showHideSearch: string;
   sortByColumnAsc: string;
   sortByColumnDesc: string;
+  sortedByColumnAsc: string;
+  sortedByColumnDesc: string;
   thenBy: string;
   toggleDensePadding: string;
   toggleFullScreen: string;
@@ -53,6 +55,7 @@ export interface MRT_Localization {
   toggleSelectRow: string;
   ungroupByColumn: string;
   unpin: string;
+  unsorted: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
@@ -104,6 +107,8 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   showHideSearch: 'Show/Hide search',
   sortByColumnAsc: 'Sort by {column} ascending',
   sortByColumnDesc: 'Sort by {column} descending',
+  sortedByColumnAsc: 'Sorted by {column} ascending',
+  sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
   toggleDensePadding: 'Toggle dense padding',
   toggleFullScreen: 'Toggle full screen',
@@ -111,4 +116,5 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unsorted: 'Unsorted',
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -35,7 +35,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setColumnOrder,
     options: {
       enableColumnFilters,
-      enableColumnPinning,
+      enablePinning,
       enableGrouping,
       enableHiding,
       enableSorting,
@@ -52,8 +52,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       },
       idPrefix,
       localization,
-      setShowFilters,
     },
+    setShowFilters,
   } = tableInstance;
 
   const { column } = header;
@@ -245,7 +245,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enableGrouping &&
         column.getCanGroup() && [
           <MenuItem
-            divider={enableColumnPinning}
+            divider={enablePinning}
             key={0}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
@@ -260,7 +260,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
-      {enableColumnPinning &&
+      {enablePinning &&
         column.getCanPin() && [
           <MenuItem
             disabled={column.getIsPinned() === 'left'}

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -39,12 +39,9 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: {
-      enabledGlobalFilterTypes,
-      localization,
-      setCurrentFilterTypes,
-      setCurrentGlobalFilterType,
-    },
+    options: { enabledGlobalFilterTypes, localization },
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
   } = tableInstance;
 
   const { isDensePadding, currentFilterTypes, currentGlobalFilterType } =
@@ -126,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;
 }
@@ -16,7 +16,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { onColumnHide },
+    options: { onToggleColumnVisibility },
   } = tableInstance;
 
   const { columnVisibility } = getState();
@@ -26,15 +26,15 @@ 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 {
       column.toggleVisibility();
     }
-    onColumnHide?.({
+    onToggleColumnVisibility?.({
       column,
       columnVisibility,
       tableInstance,
@@ -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_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { alpha, Box, TableContainer, Theme } from '@mui/material';
 import { SystemStyleObject } from '@mui/material/node_modules/@mui/system';
 import { MRT_TableInstance } from '..';
@@ -36,7 +36,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     getRightTableWidth,
     getState,
     options: {
-      enableColumnPinning,
+      enablePinning,
       enableStickyHeader,
       idPrefix,
       muiTableContainerProps,
@@ -52,7 +52,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       ? muiTableContainerProps({ tableInstance })
       : muiTableContainerProps;
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
         ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
@@ -85,7 +85,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enableColumnPinning && getIsSomeColumnsPinned() ? (
+      {enablePinning && getIsSomeColumnsPinned() ? (
         <Box
           sx={{
             display: 'grid',

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,23 +1,20 @@
+import React, { useEffect, useMemo, useState } from 'react';
 import {
-  columnFilterRowsFn,
-  createTable,
-  expandRowsFn,
-  functionalUpdate,
-  globalFilterRowsFn,
-  groupRowsFn,
-  paginateRowsFn,
   PaginationState,
-  sortRowsFn,
   Table,
-  useTable,
+  createTable,
+  functionalUpdate,
+  getColumnFilteredRowModelSync,
+  getExpandedRowModel,
+  getGlobalFilteredRowModelSync,
+  getGroupedRowModelSync,
+  getPaginationRowModel,
+  getSortedRowModelSync,
+  useTableInstance,
+  getCoreRowModelSync,
+  ColumnDef,
 } from '@tanstack/react-table';
-import React, { useMemo, useState } from 'react';
-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';
@@ -32,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,
   );
@@ -52,10 +53,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [showFilters, setShowFilters] = useState(
     props.initialState?.showFilters ?? false,
   );
-  const [showSearch, setShowSearch] = useState(
-    props.initialState?.showSearch ?? false,
+  const [showGlobalFilter, setShowGlobalFilter] = useState(
+    props.initialState?.showGlobalFilter ?? false,
   );
-
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: props.initialState?.pagination?.pageIndex ?? 0,
     pageSize: props.initialState?.pagination?.pageSize ?? 10,
@@ -67,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?.[c.id as any] ??
-            (!!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),
+      })),
     ),
   );
 
@@ -96,7 +94,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -109,7 +107,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ExpandButton
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -126,7 +124,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_SelectCheckbox
-                row={cell.row as any}
+                row={cell.row as MRT_Row}
                 tableInstance={tableInstance}
               />
             ),
@@ -151,16 +149,16 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
-      table,
+      props.enableEditing,
       props.enableExpandAll,
       props.enableExpanded,
-      props.enableRowActions,
       props.enableGrouping,
-      props.enableEditing,
+      props.enableRowActions,
       props.enableRowNumbers,
       props.enableRowSelection,
       props.enableSelectAll,
       props.localization,
+      table,
     ],
   );
 
@@ -173,21 +171,21 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             ? createGroup(table, column, currentFilterTypes)
             : createDataColumn(table, column, currentFilterTypes),
         ),
-      ] as any),
+      ] as ColumnDef<D>[]),
     [table, props.columns, currentFilterTypes],
   );
 
-  const data = useMemo(
+  const data: D['Row'][] = useMemo(
     () =>
       props.isLoading && !props.data.length
-        ? [...Array(10).fill(null)].map((_) =>
+        ? [...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,
@@ -195,45 +193,64 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   //@ts-ignore
-  const tableInstance: MRT_TableInstance<{}> = useTable(table, {
-    ...props,
-    columnFilterRowsFn: columnFilterRowsFn,
-    columns,
-    data,
-    debugAll: false,
-    expandRowsFn: expandRowsFn,
-    //@ts-ignore
-    filterTypes: defaultFilterFNs,
-    getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
-    globalFilterRowsFn: globalFilterRowsFn,
-    globalFilterType: currentGlobalFilterType,
-    groupRowsFn: groupRowsFn,
-    idPrefix,
-    onPaginationChange: (updater: any) =>
-      setPagination((old) => functionalUpdate(updater, old)),
-    paginateRowsFn: paginateRowsFn,
+  const tableInstance: MRT_TableInstance<{}> = {
+    ...useTableInstance(table, {
+      //@ts-ignore
+      filterTypes: defaultFilterFNs,
+      getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
+      getCoreRowModel: getCoreRowModelSync(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getGlobalFilteredRowModel: getGlobalFilteredRowModelSync(),
+      getGroupedRowModel: getGroupedRowModelSync(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModelSync(),
+      getSubRows: (originalRow: D) => originalRow.subRows,
+      globalFilterType: currentGlobalFilterType,
+      idPrefix,
+      onPaginationChange: (updater: any) =>
+        setPagination((old) => functionalUpdate(updater, old)),
+      ...props,
+      columns,
+      data,
+      state: {
+        currentEditingRow,
+        currentFilterTypes,
+        currentGlobalFilterType,
+        isDensePadding,
+        isFullScreen,
+        //@ts-ignore
+        pagination,
+        showFilters,
+        showGlobalFilter,
+        ...props.state,
+      },
+    }),
     setCurrentEditingRow,
     setCurrentFilterTypes,
     setCurrentGlobalFilterType,
     setIsDensePadding,
     setIsFullScreen,
     setShowFilters,
-    setShowSearch,
-    sortRowsFn,
-    state: {
-      ...props.initialState,
-      currentEditingRow,
-      currentFilterTypes,
-      currentGlobalFilterType,
-      isDensePadding,
-      isFullScreen,
-      //@ts-ignore
-      pagination,
-      showFilters,
-      showSearch,
-      ...props.state,
-    },
-  });
+    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} />
+      )}
+    </>
+  );
 };