material-react-table 0.4.1 → 0.4.4

package/dist/MaterialReactTable.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import { AlertProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import { Cell, Column, HeaderGroup, Row, TableInstance, TableOptions, UseExpandedOptions, UseFiltersOptions, UseGlobalFiltersOptions, UseGroupByOptions, UsePaginationOptions, UseResizeColumnsOptions, UseRowSelectOptions, UseRowStateOptions, UseSortByOptions, UseTableOptions } from 'react-table';
 import { MRT_Localization } from './utils/localization';
@@ -24,7 +24,7 @@ export declare type MaterialReactTableProps<D extends {} = {}> = TableOptions<D>
     enableSelection?: boolean;
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
-    hideToolbarActions?: boolean;
+    hideToolbarInternalActions?: boolean;
     hideToolbarBottom?: boolean;
     hideToolbarTop?: boolean;
     isFetching?: boolean;
@@ -65,6 +65,13 @@ export declare type MaterialReactTableProps<D extends {} = {}> = TableOptions<D>
     renderRowActionMenuItems?: (rowData: Row<D>, tableInstance: TableInstance<D>, closeMenu: () => void) => ReactNode[];
     renderRowActions?: (row: Row<D>, tableInstance: TableInstance<D>) => ReactNode;
     renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
+    renderToolbarInternalActions?: (tableInstance: TableInstance<D>, { MRT_ToggleSearchButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
+        MRT_ToggleSearchButton: FC;
+        MRT_ToggleFiltersButton: FC;
+        MRT_ShowHideColumnsButton: FC;
+        MRT_ToggleDensePaddingButton: FC;
+        MRT_FullScreenToggleButton: FC;
+    }) => ReactNode;
 };
 declare const _default: <D extends {}>({ defaultColumn, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/buttons/MRT_ToggleDensePaddingButton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_ToggleDensePaddingButton: FC<Props>;
+export {};

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

@@ -24,6 +24,8 @@ var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
 var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
 var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
 var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
+var DensityMediumIcon = _interopDefault(require('@mui/icons-material/DensityMedium'));
+var DensitySmallIcon = _interopDefault(require('@mui/icons-material/DensitySmall'));
 var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
 var FilterListIcon = _interopDefault(require('@mui/icons-material/Fullscreen'));
 var FilterListOffIcon$1 = _interopDefault(require('@mui/icons-material/FullscreenExit'));
@@ -2083,8 +2085,8 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
   })));
 };
 
-var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
-  var _localization$toggleD, _localization$toggleD2;
+var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton() {
+  var _localization$toggleD;
 
   var _useMRT = useMRT(),
       densePadding = _useMRT.densePadding,
@@ -2094,17 +2096,13 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
-  }, React__default.createElement(material.Switch, {
-    inputProps: {
-      'aria-label': (_localization$toggleD2 = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD2 : ''
-    },
-    color: "default",
-    checked: densePadding,
-    size: "small",
-    onChange: function onChange() {
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle,
+    onClick: function onClick() {
       return setDensePadding(!densePadding);
-    }
-  }));
+    },
+    size: "small"
+  }, densePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
 };
 
 var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
@@ -2165,9 +2163,21 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
       disableColumnHiding = _useMRT.disableColumnHiding,
       disableDensePaddingToggle = _useMRT.disableDensePaddingToggle,
       disableGlobalFilter = _useMRT.disableGlobalFilter,
-      disableFullScreenToggle = _useMRT.disableFullScreenToggle;
+      disableFullScreenToggle = _useMRT.disableFullScreenToggle,
+      renderToolbarInternalActions = _useMRT.renderToolbarInternalActions,
+      tableInstance = _useMRT.tableInstance;
 
-  return React__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_DensePaddingSwitch, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
+  if (renderToolbarInternalActions) {
+    return React__default.createElement(React__default.Fragment, null, renderToolbarInternalActions(tableInstance, {
+      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
+      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton
+    }));
+  }
+
+  return React__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
 };
 
 var MRT_TablePagination = function MRT_TablePagination() {
@@ -2261,12 +2271,26 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
   }, alertProps), selectMessage, groupedByMessage));
 };
 
-var Toolbar = /*#__PURE__*/material.styled(material.Toolbar)({
-  display: 'grid',
-  padding: '0 0.5rem !important'
+var Toolbar = /*#__PURE__*/material.styled(material.Toolbar, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen,
+      theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background["default"],
+    backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
+    display: 'grid',
+    padding: '0 0.5rem !important',
+    position: fullScreen ? 'sticky' : undefined,
+    top: fullScreen ? '0' : undefined,
+    width: 'calc(100% - 1rem)',
+    zIndex: 1
+  };
 });
 var ToolbarTopRow = /*#__PURE__*/material.styled('div')({
-  padding: '1rem 0.5rem',
+  padding: '0.5rem',
   display: 'flex',
   justifyContent: 'space-between'
 });
@@ -2281,41 +2305,59 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
 
   var _useMRT = useMRT(),
       disableGlobalFilter = _useMRT.disableGlobalFilter,
-      hideToolbarActions = _useMRT.hideToolbarActions,
+      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
       positionPagination = _useMRT.positionPagination,
       positionToolbarActions = _useMRT.positionToolbarActions,
+      fullScreen = _useMRT.fullScreen,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
   return React__default.createElement(Toolbar, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
-  }, toolbarProps), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
+  }, toolbarProps), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
 };
 
-var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem !important',
-  overflowY: 'hidden'
+var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'fullScreen';
+  }
+})(function (_ref) {
+  var fullScreen = _ref.fullScreen,
+      theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background["default"],
+    backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
+    bottom: fullScreen ? '0' : undefined,
+    display: 'flex',
+    justifyContent: 'space-between',
+    overflowY: 'hidden',
+    padding: '0 0.5rem !important',
+    position: fullScreen ? 'fixed' : undefined,
+    width: 'calc(100% - 1rem)',
+    zIndex: 1
+  };
 });
 var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
   var _useMRT = useMRT(),
-      hideToolbarActions = _useMRT.hideToolbarActions,
+      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
       positionPagination = _useMRT.positionPagination,
+      fullScreen = _useMRT.fullScreen,
       positionToolbarActions = _useMRT.positionToolbarActions,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       tableInstance = _useMRT.tableInstance;
 
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
   return React__default.createElement(Toolbar$1, Object.assign({
+    fullScreen: fullScreen,
     variant: "dense"
-  }, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
+  }, toolbarProps), !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
 };
 
 var TableContainer = /*#__PURE__*/material.styled(material.TableContainer, {
@@ -2329,12 +2371,12 @@ var TableContainer = /*#__PURE__*/material.styled(material.TableContainer, {
     height: fullScreen ? '100%' : undefined,
     left: fullScreen ? '0' : undefined,
     margin: fullScreen ? '0' : undefined,
-    position: fullScreen ? 'absolute' : undefined,
+    position: fullScreen ? 'fixed' : undefined,
     right: fullScreen ? '0' : undefined,
     top: fullScreen ? '0' : undefined,
     transition: 'all 0.2s ease-in-out',
     width: fullScreen ? '100vw' : undefined,
-    zIndex: fullScreen ? 1200 : undefined
+    zIndex: fullScreen ? 1200 : 1
   };
 });
 var CircularProgressWrapper = /*#__PURE__*/material.styled('div')(function (_ref2) {
@@ -2360,6 +2402,13 @@ var MRT_TableContainer = function MRT_TableContainer() {
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
+  React.useEffect(function () {
+    if (fullScreen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [fullScreen]);
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
   return React__default.createElement(TableContainer, Object.assign({
     component: material.Paper,