material-react-table 0.7.0 → 0.7.1

package/README.md

@@ -30,9 +30,9 @@ Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the devel
 - [x] Custom Styling and internal Mui Components
 - [x] Data Editing
 - [x] Dense Padding Toggle
-- [x] Filtering
+- [x] Filtering and multiple built-in filter modes
 - [x] Fullscreen
-- [ ] Global Search (broken in react-table v8 :( ))
+- [x] Global Filtering (Search)
 - [x] HeaderGroups
 - [x] Localization i18n
 - [x] Pagination (supports client-side and server-side)

package/dist/MaterialReactTable.d.ts

@@ -5,7 +5,7 @@ import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
 export declare type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<Omit<Options<D>, '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>>;
@@ -21,8 +21,8 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
 export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<TableInstance<Overwrite<Partial<DefaultGenerics>, {
     Row: D;
 }>>, 'getAllColumns' | 'getAllLeafColumns' | 'getExpandedRowModel' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRowModel' | 'getSelectedRowModel' | '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>;
@@ -57,7 +57,7 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<Ta
     showGlobalFilter: boolean;
     pagination: Partial<PaginationState>;
 };
-export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
+export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
     Edit?: ({ cell, tableInstance, }: {
         cell: MRT_Cell<D>;
         tableInstance: MRT_TableInstance<D>;
@@ -79,11 +79,11 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
         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;
@@ -105,19 +105,19 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     onCellEditBlur?: ({ cell, event, tableInstance, }: {
         event: FocusEvent<HTMLInputElement>;
@@ -134,11 +134,11 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
         filterValue: any;
     }) => void;
 };
-export declare type MRT_ColumnInstance<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnInterface<D> & {
-    columns?: MRT_ColumnInstance<D>[];
+export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnDef<D> & {
+    columns?: MRT_Column<D>[];
 };
 export declare type MRT_Header<D extends Record<string, any> = {}> = Omit<Header<D>, 'column'> & {
-    column: MRT_ColumnInstance<D>;
+    column: MRT_Column<D>;
 };
 export declare type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<HeaderGroup<D>, 'headers'> & {
     headers: MRT_Header<D>[];
@@ -153,7 +153,7 @@ export declare type MRT_Row<D extends Record<string, any> = {}> = Omit<Row<D>, '
     original: D;
 };
 export declare 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>;
 };
 export declare type MRT_FilterType = MRT_FILTER_TYPE | Function;
@@ -169,15 +169,15 @@ export declare 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;
@@ -226,7 +226,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableFooterProps?: TableFooterProps | (({ tableInstance, }: {
         tableInstance: MRT_TableInstance;
@@ -237,15 +237,15 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableHeadProps?: TableHeadProps | (({ tableInstance, }: {
         tableInstance: MRT_TableInstance;
@@ -312,7 +312,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         tableInstance: MRT_TableInstance<D>;
     }) => void;
     onToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
         columnVisibility: VisibilityState;
         tableInstance: MRT_TableInstance<D>;
     }) => void;
@@ -375,5 +375,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         }>;
     }) => ReactNode;
 };
-declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableMultiRowSelection, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableMultiRowSelection, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/material-react-table.cjs.development.js

@@ -459,7 +459,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       divider: false,
       fn: notEmpty
     }].filter(function (filterType) {
-      return header ? !header.column.enabledFilterTypes || header.column.enabledFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
+      return header ? !header.column.enabledColumnFilterTypes || header.column.enabledColumnFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
     });
   }, []);
 
@@ -1622,7 +1622,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       _tableInstance$option = tableInstance.options,
       enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enablePagination = _tableInstance$option.enablePagination,
-      hideToolbarInternalActions = _tableInstance$option.hideToolbarInternalActions,
+      enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
       idPrefix = _tableInstance$option.idPrefix,
       muiTableToolbarTopProps = _tableInstance$option.muiTableToolbarTopProps,
       positionPagination = _tableInstance$option.positionPagination,
@@ -1667,7 +1667,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     }
   }, enableGlobalFilter && React__default.createElement(MRT_SearchTextField, {
     tableInstance: tableInstance
-  }), !hideToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, {
+  }), enableToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   }))), React__default.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
@@ -1680,7 +1680,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   var tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      hideToolbarInternalActions = _tableInstance$option.hideToolbarInternalActions,
+      enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
       idPrefix = _tableInstance$option.idPrefix,
       enablePagination = _tableInstance$option.enablePagination,
       muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
@@ -1715,7 +1715,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       justifyContent: 'space-between',
       width: '100%'
     }
-  }, !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, {
+  }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   }) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, {
     tableInstance: tableInstance
@@ -2047,7 +2047,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       cursor: column.getCanSort() && column.columnDefType !== 'group' ? 'pointer' : undefined,
       display: 'flex',
       flexWrap: 'nowrap',
-      whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal'
+      whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal'
     }
   }, headerElement, column.columnDefType !== 'group' && column.getCanSort() && React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -2589,10 +2589,10 @@ var MRT_Table = function MRT_Table(_ref) {
       tableInstance = _ref.tableInstance;
   var getTableProps = tableInstance.getTableProps,
       _tableInstance$option = tableInstance.options,
-      enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      hideTableFooter = _tableInstance$option.hideTableFooter,
-      hideTableHead = _tableInstance$option.hideTableHead,
-      muiTableProps = _tableInstance$option.muiTableProps;
+      muiTableProps = _tableInstance$option.muiTableProps,
+      enableTableHead = _tableInstance$option.enableTableHead,
+      enableTableFooter = _tableInstance$option.enableTableFooter,
+      enableStickyHeader = _tableInstance$option.enableStickyHeader;
   var mTableProps = muiTableProps instanceof Function ? muiTableProps({
     tableInstance: tableInstance
   }) : muiTableProps;
@@ -2601,13 +2601,13 @@ var MRT_Table = function MRT_Table(_ref) {
 
   return React__default.createElement(material.Table, Object.assign({
     stickyHeader: enableStickyHeader
-  }, tableProps), !hideTableHead && React__default.createElement(MRT_TableHead, {
+  }, tableProps), enableTableHead && React__default.createElement(MRT_TableHead, {
     pinned: pinned,
     tableInstance: tableInstance
   }), React__default.createElement(MRT_TableBody, {
     pinned: pinned,
     tableInstance: tableInstance
-  }), !hideTableFooter && React__default.createElement(MRT_TableFooter, {
+  }), enableTableFooter && React__default.createElement(MRT_TableFooter, {
     pinned: pinned,
     tableInstance: tableInstance
   }));
@@ -2715,8 +2715,8 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   var tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      hideToolbarBottom = _tableInstance$option.hideToolbarBottom,
-      hideToolbarTop = _tableInstance$option.hideToolbarTop,
+      enableToolbarBottom = _tableInstance$option.enableToolbarBottom,
+      enableToolbarTop = _tableInstance$option.enableToolbarTop,
       muiTablePaperProps = _tableInstance$option.muiTablePaperProps;
 
   var _getState = getState(),
@@ -2726,8 +2726,10 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     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]);
@@ -2741,24 +2743,18 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
       transition: 'all 0.2s ease-in-out'
     }, tablePaperProps == null ? void 0 : 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,
-      width: isFullScreen ? '100vw' : undefined,
-      zIndex: isFullScreen ? 1200 : 1,
-      bottom: isFullScreen ? '0' : undefined
+      maxHeight: isFullScreen ? '100vh' : undefined,
+      maxWidth: isFullScreen ? '100vw' : undefined,
+      padding: isFullScreen ? '0' : undefined,
+      width: isFullScreen ? '100vw' : undefined
     }
-  }), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, {
+  }), enableToolbarTop && React__default.createElement(MRT_ToolbarTop, {
     tableInstance: tableInstance
   }), React__default.createElement(MRT_TableContainer, {
     tableInstance: tableInstance
-  }), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, {
+  }), enableToolbarBottom && React__default.createElement(MRT_ToolbarBottom, {
     tableInstance: tableInstance
   }));
 };
@@ -2812,43 +2808,47 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _props$initialState$i, _props$initialState, _props$initialState$i2, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$initialState$p, _props$initialState5, _props$initialState5$, _props$initialState$p2, _props$initialState6, _props$initialState6$, _props$initialState$p3, _props$initialState7, _props$initialState7$, _props$globalFilterTy, _props$getSubRows;
+  var _props$initialState$i, _props$initialState, _props$initialState$i2, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$initialState$p, _props$initialState5, _props$initialState5$, _props$initialState$p2, _props$initialState6, _props$initialState6$, _props$initialState$p3, _props$initialState7, _props$initialState7$, _props$globalFilterTy;
+
+  var _useState = React.useState(props.idPrefix),
+      idPrefix = _useState[0],
+      setIdPrefix = _useState[1];
 
-  var idPrefix = React.useMemo(function () {
+  React.useEffect(function () {
     var _props$idPrefix;
 
-    return (_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9);
+    return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
   }, [props.idPrefix]);
 
-  var _useState = React.useState(null),
-      currentEditingRow = _useState[0],
-      setCurrentEditingRow = _useState[1];
+  var _useState2 = React.useState(null),
+      currentEditingRow = _useState2[0],
+      setCurrentEditingRow = _useState2[1];
 
-  var _useState2 = React.useState((_props$initialState$i = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.isDensePadding) != null ? _props$initialState$i : false),
-      isDensePadding = _useState2[0],
-      setIsDensePadding = _useState2[1];
+  var _useState3 = React.useState((_props$initialState$i = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.isDensePadding) != null ? _props$initialState$i : false),
+      isDensePadding = _useState3[0],
+      setIsDensePadding = _useState3[1];
 
-  var _useState3 = React.useState((_props$initialState$i2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.isFullScreen) != null ? _props$initialState$i2 : false),
-      isFullScreen = _useState3[0],
-      setIsFullScreen = _useState3[1];
+  var _useState4 = React.useState((_props$initialState$i2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.isFullScreen) != null ? _props$initialState$i2 : false),
+      isFullScreen = _useState4[0],
+      setIsFullScreen = _useState4[1];
 
-  var _useState4 = React.useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
-      showFilters = _useState4[0],
-      setShowFilters = _useState4[1];
+  var _useState5 = React.useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
+      showFilters = _useState5[0],
+      setShowFilters = _useState5[1];
 
-  var _useState5 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showGlobalFilter) != null ? _props$initialState$s2 : false),
-      showGlobalFilter = _useState5[0],
-      setShowGlobalFilter = _useState5[1];
+  var _useState6 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showGlobalFilter) != null ? _props$initialState$s2 : false),
+      showGlobalFilter = _useState6[0],
+      setShowGlobalFilter = _useState6[1];
 
-  var _useState6 = React.useState({
+  var _useState7 = React.useState({
     pageIndex: (_props$initialState$p = (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.pagination) == null ? void 0 : _props$initialState5$.pageIndex) != null ? _props$initialState$p : 0,
     pageSize: (_props$initialState$p2 = (_props$initialState6 = props.initialState) == null ? void 0 : (_props$initialState6$ = _props$initialState6.pagination) == null ? void 0 : _props$initialState6$.pageSize) != null ? _props$initialState$p2 : 10,
     pageCount: (_props$initialState$p3 = (_props$initialState7 = props.initialState) == null ? void 0 : (_props$initialState7$ = _props$initialState7.pagination) == null ? void 0 : _props$initialState7$.pageCount) != null ? _props$initialState$p3 : -1
   }),
-      pagination = _useState6[0],
-      setPagination = _useState6[1];
+      pagination = _useState7[0],
+      setPagination = _useState7[1];
 
-  var _useState7 = React.useState(function () {
+  var _useState8 = React.useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filter, _props$initialState8, _props$initialState8$, _c$filterSelectOption, _ref2;
 
@@ -2857,12 +2857,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       })) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
     })));
   }),
-      currentFilterTypes = _useState7[0],
-      setCurrentFilterTypes = _useState7[1];
+      currentFilterTypes = _useState8[0],
+      setCurrentFilterTypes = _useState8[1];
 
-  var _useState8 = React.useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
-      currentGlobalFilterType = _useState8[0],
-      setCurrentGlobalFilterType = _useState8[1];
+  var _useState9 = React.useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
+      currentGlobalFilterType = _useState9[0],
+      setCurrentGlobalFilterType = _useState9[1];
 
   var table = React.useMemo(function () {
     return reactTable.createTable();
@@ -2949,9 +2949,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }) : props.data;
   }, [props.data, props.isLoading]); //@ts-ignore
 
-  var tableInstance = _extends({}, reactTable.useTableInstance(table, _extends({}, props, {
-    columns: columns,
-    data: data,
+  var tableInstance = _extends({}, reactTable.useTableInstance(table, _extends({
     //@ts-ignore
     filterTypes: defaultFilterFNs,
     getColumnFilteredRowModel: reactTable.getColumnFilteredRowModelSync(),
@@ -2961,18 +2959,19 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     getGroupedRowModel: reactTable.getGroupedRowModelSync(),
     getPaginationRowModel: reactTable.getPaginationRowModel(),
     getSortedRowModel: reactTable.getSortedRowModelSync(),
-    getSubRows: (_props$getSubRows = props.getSubRows) != null ? _props$getSubRows : function (originalRow) {
+    getSubRows: function getSubRows(originalRow) {
       return originalRow.subRows;
     },
     globalFilterType: currentGlobalFilterType,
     idPrefix: idPrefix,
-    //@ts-ignore
-    initialState: props.initialState,
     onPaginationChange: function onPaginationChange(updater) {
       return setPagination(function (old) {
         return reactTable.functionalUpdate(updater, old);
       });
-    },
+    }
+  }, props, {
+    columns: columns,
+    data: data,
     state: _extends({
       currentEditingRow: currentEditingRow,
       currentFilterTypes: currentFilterTypes,
@@ -2994,12 +2993,25 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setShowGlobalFilter: setShowGlobalFilter
   });
 
-  return React__default.createElement(MRT_TablePaper, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
+    TransitionComponent: material.Grow,
+    PaperComponent: material.Box,
+    disablePortal: true,
+    fullScreen: true,
+    keepMounted: false,
+    onClose: function onClose() {
+      return tableInstance.setIsFullScreen(false);
+    },
+    open: tableInstance.getState().isFullScreen,
+    transitionDuration: 400
+  }, React__default.createElement(MRT_TablePaper, {
     tableInstance: tableInstance
-  });
+  })), !tableInstance.getState().isFullScreen && React__default.createElement(MRT_TablePaper, {
+    tableInstance: tableInstance
+  }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3029,6 +3041,16 @@ var MaterialReactTable = (function (_ref) {
       enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
       _ref$enableStickyHead = _ref.enableStickyHeader,
       enableStickyHeader = _ref$enableStickyHead === void 0 ? true : _ref$enableStickyHead,
+      _ref$enableTableFoote = _ref.enableTableFooter,
+      enableTableFooter = _ref$enableTableFoote === void 0 ? true : _ref$enableTableFoote,
+      _ref$enableTableHead = _ref.enableTableHead,
+      enableTableHead = _ref$enableTableHead === void 0 ? true : _ref$enableTableHead,
+      _ref$enableToolbarBot = _ref.enableToolbarBottom,
+      enableToolbarBottom = _ref$enableToolbarBot === void 0 ? true : _ref$enableToolbarBot,
+      _ref$enableToolbarInt = _ref.enableToolbarInternalActions,
+      enableToolbarInternalActions = _ref$enableToolbarInt === void 0 ? true : _ref$enableToolbarInt,
+      _ref$enableToolbarTop = _ref.enableToolbarTop,
+      enableToolbarTop = _ref$enableToolbarTop === void 0 ? true : _ref$enableToolbarTop,
       icons = _ref.icons,
       localization = _ref.localization,
       _ref$positionActionsC = _ref.positionActionsColumn,
@@ -3056,6 +3078,11 @@ var MaterialReactTable = (function (_ref) {
     enableSelectAll: enableSelectAll,
     enableSorting: enableSorting,
     enableStickyHeader: enableStickyHeader,
+    enableTableFooter: enableTableFooter,
+    enableTableHead: enableTableHead,
+    enableToolbarBottom: enableToolbarBottom,
+    enableToolbarInternalActions: enableToolbarInternalActions,
+    enableToolbarTop: enableToolbarTop,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     positionActionsColumn: positionActionsColumn,