material-react-table 0.7.0 → 0.7.1

package/dist/material-react-table.esm.js

@@ -27,7 +27,7 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { createTable, useTableInstance, getColumnFilteredRowModelSync, getCoreRowModelSync, getExpandedRowModel, getGlobalFilteredRowModelSync, getGroupedRowModelSync, getPaginationRowModel, getSortedRowModelSync, functionalUpdate } from '@tanstack/react-table';
-import { IconButton, Menu, MenuItem, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, Tooltip, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper } from '@mui/material';
+import { IconButton, Menu, MenuItem, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, Tooltip, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 
 function _extends() {
@@ -452,7 +452,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);
     });
   }, []);
 
@@ -1615,7 +1615,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,
@@ -1660,7 +1660,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     }
   }, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
     tableInstance: tableInstance
-  }), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
+  }), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   }))), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
@@ -1673,7 +1673,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,
@@ -1708,7 +1708,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       justifyContent: 'space-between',
       width: '100%'
     }
-  }, !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
+  }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   }) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
     tableInstance: tableInstance
@@ -2040,7 +2040,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.createElement(Tooltip, {
     arrow: true,
@@ -2582,10 +2582,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;
@@ -2594,13 +2594,13 @@ var MRT_Table = function MRT_Table(_ref) {
 
   return React.createElement(Table, Object.assign({
     stickyHeader: enableStickyHeader
-  }, tableProps), !hideTableHead && React.createElement(MRT_TableHead, {
+  }, tableProps), enableTableHead && React.createElement(MRT_TableHead, {
     pinned: pinned,
     tableInstance: tableInstance
   }), React.createElement(MRT_TableBody, {
     pinned: pinned,
     tableInstance: tableInstance
-  }), !hideTableFooter && React.createElement(MRT_TableFooter, {
+  }), enableTableFooter && React.createElement(MRT_TableFooter, {
     pinned: pinned,
     tableInstance: tableInstance
   }));
@@ -2708,8 +2708,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(),
@@ -2719,8 +2719,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]);
@@ -2734,24 +2736,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.createElement(MRT_ToolbarTop, {
+  }), enableToolbarTop && React.createElement(MRT_ToolbarTop, {
     tableInstance: tableInstance
   }), React.createElement(MRT_TableContainer, {
     tableInstance: tableInstance
-  }), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, {
+  }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
     tableInstance: tableInstance
   }));
 };
@@ -2805,43 +2801,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 = useState(props.idPrefix),
+      idPrefix = _useState[0],
+      setIdPrefix = _useState[1];
 
-  var idPrefix = useMemo(function () {
+  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 = useState(null),
-      currentEditingRow = _useState[0],
-      setCurrentEditingRow = _useState[1];
+  var _useState2 = useState(null),
+      currentEditingRow = _useState2[0],
+      setCurrentEditingRow = _useState2[1];
 
-  var _useState2 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = useState({
+  var _useState7 = 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 = useState(function () {
+  var _useState8 = 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;
 
@@ -2850,12 +2850,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 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
-      currentGlobalFilterType = _useState8[0],
-      setCurrentGlobalFilterType = _useState8[1];
+  var _useState9 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
+      currentGlobalFilterType = _useState9[0],
+      setCurrentGlobalFilterType = _useState9[1];
 
   var table = useMemo(function () {
     return createTable();
@@ -2942,9 +2942,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }) : props.data;
   }, [props.data, props.isLoading]); //@ts-ignore
 
-  var tableInstance = _extends({}, useTableInstance(table, _extends({}, props, {
-    columns: columns,
-    data: data,
+  var tableInstance = _extends({}, useTableInstance(table, _extends({
     //@ts-ignore
     filterTypes: defaultFilterFNs,
     getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
@@ -2954,18 +2952,19 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     getGroupedRowModel: getGroupedRowModelSync(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: 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 functionalUpdate(updater, old);
       });
-    },
+    }
+  }, props, {
+    columns: columns,
+    data: data,
     state: _extends({
       currentEditingRow: currentEditingRow,
       currentFilterTypes: currentFilterTypes,
@@ -2987,12 +2986,25 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setShowGlobalFilter: setShowGlobalFilter
   });
 
-  return React.createElement(MRT_TablePaper, {
+  return React.createElement(React.Fragment, null, React.createElement(Dialog, {
+    TransitionComponent: Grow,
+    PaperComponent: Box,
+    disablePortal: true,
+    fullScreen: true,
+    keepMounted: false,
+    onClose: function onClose() {
+      return tableInstance.setIsFullScreen(false);
+    },
+    open: tableInstance.getState().isFullScreen,
+    transitionDuration: 400
+  }, React.createElement(MRT_TablePaper, {
     tableInstance: tableInstance
-  });
+  })), !tableInstance.getState().isFullScreen && React.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,
@@ -3022,6 +3034,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,
@@ -3049,6 +3071,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,