material-react-table 0.4.2 → 0.4.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -56,9 +56,9 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.4",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@babel/core": "^7.17.5",
+    "@emotion/react": "^11.8.0",
+    "@emotion/styled": "^11.8.0",
     "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-alpha.6",
     "@mui/icons-material": "^5.4.2",
@@ -87,7 +87,7 @@
     "size-limit": "^7.0.8",
     "storybook-addon-paddings": "^4.2.1",
     "storybook-addon-performance": "^0.16.1",
-    "storybook-dark-mode": "^1.0.8",
+    "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5"

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
+
+interface Props {}
+
+export const MRT_ToggleDensePaddingButton: FC<Props> = () => {
+  const { densePadding, setDensePadding, localization } = useMRT();
+
+  return (
+    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleDensePaddingSwitchTitle}
+        onClick={() => setDensePadding(!densePadding)}
+        size="small"
+      >
+        {densePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import {
   CircularProgress,
   LinearProgress,
@@ -14,7 +14,7 @@ import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 
 const TableContainer = styled(MuiTableContainer, {
   shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean; component?: any }>(({ fullScreen }) => ({
+})<{ fullScreen?: boolean, component: any }>(({ fullScreen }) => ({
   bottom: fullScreen ? '0' : undefined,
   height: fullScreen ? '100%' : undefined,
   left: fullScreen ? '0' : undefined,
@@ -51,6 +51,14 @@ export const MRT_TableContainer: FC<Props> = () => {
     tableInstance,
   } = useMRT();
 
+  useEffect(() => {
+    if(fullScreen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [fullScreen]);
+
   const tableContainerProps =
     muiTableContainerProps instanceof Function
       ? muiTableContainerProps(tableInstance)

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,16 +1,27 @@
 import React, { FC } from 'react';
-import { styled, Toolbar as MuiToolbar } from '@mui/material';
+import { alpha, styled, Toolbar as MuiToolbar } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
-const Toolbar = styled(MuiToolbar)({
+const Toolbar = styled(MuiToolbar, {
+  shouldForwardProp: (prop) => prop !== 'fullScreen',
+})<{ fullScreen?: boolean }>(({ fullScreen, theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  backgroundImage: `linear-gradient(${alpha(
+    theme.palette.common.white,
+    0.05,
+  )},${alpha(theme.palette.common.white, 0.05)})`,
+  bottom: fullScreen ? '0' : undefined,
   display: 'flex',
   justifyContent: 'space-between',
-  padding: '0 0.5rem !important',
   overflowY: 'hidden',
-});
+  padding: '0 0.5rem !important',
+  position: fullScreen ? 'fixed' : undefined,
+  width: 'calc(100% - 1rem)',
+  zIndex: 1,
+}));
 
 interface Props {}
 
@@ -20,6 +31,7 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
     manualPagination,
     muiTableToolbarBottomProps,
     positionPagination,
+    fullScreen,
     positionToolbarActions,
     positionToolbarAlertBanner,
     tableInstance,
@@ -31,7 +43,7 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       : muiTableToolbarBottomProps;
 
   return (
-    <Toolbar variant="dense" {...toolbarProps}>
+    <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
       {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarInternalButtons />
       ) : (

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -3,7 +3,7 @@ import { styled } from '@mui/material';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { useMRT } from '../useMRT';
-import { MRT_DensePaddingSwitch } from '../inputs/MRT_DensePaddingSwitch';
+import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
 import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
 
@@ -29,7 +29,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = () => {
       {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
-      {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}
+      {!disableDensePaddingToggle && <MRT_ToggleDensePaddingButton />}
       {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
     </ToolbarButtonsContainer>
   );

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,18 +1,29 @@
 import React, { FC } from 'react';
-import { styled, Toolbar as MuiToolbar } from '@mui/material';
+import { alpha, styled, Toolbar as MuiToolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 import { useMRT } from '../useMRT';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
-const Toolbar = styled(MuiToolbar)({
+const Toolbar = styled(MuiToolbar, {
+  shouldForwardProp: (prop) => prop !== 'fullScreen',
+})<{ fullScreen?: boolean }>(({ fullScreen, theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  backgroundImage: `linear-gradient(${alpha(
+    theme.palette.common.white,
+    0.05,
+  )},${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,
+}));
 
 const ToolbarTopRow = styled('div')({
-  padding: '1rem 0.5rem',
+  padding: '0.5rem',
   display: 'flex',
   justifyContent: 'space-between',
 });
@@ -34,6 +45,7 @@ export const MRT_ToolbarTop: FC<Props> = () => {
     muiTableToolbarTopProps,
     positionPagination,
     positionToolbarActions,
+    fullScreen,
     positionToolbarAlertBanner,
     renderToolbarCustomActions,
     tableInstance,
@@ -45,7 +57,7 @@ export const MRT_ToolbarTop: FC<Props> = () => {
       : muiTableToolbarTopProps;
 
   return (
-    <Toolbar variant="dense" {...toolbarProps}>
+    <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
       {positionToolbarAlertBanner === 'top' && <MRT_ToolbarAlertBanner />}
       <ToolbarTopRow>
         {renderToolbarCustomActions?.(tableInstance) ?? <span />}

package/dist/inputs/MRT_DensePaddingSwitch.d.ts

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

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -1,23 +0,0 @@
-import React, { FC } from 'react';
-import { Switch, Tooltip } from '@mui/material';
-import { useMRT } from '../useMRT';
-
-interface Props {}
-
-export const MRT_DensePaddingSwitch: FC<Props> = () => {
-  const { densePadding, setDensePadding, localization } = useMRT();
-
-  return (
-    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
-      <Switch
-        inputProps={{
-          'aria-label': localization?.toggleDensePaddingSwitchTitle ?? '',
-        }}
-        color="default"
-        checked={densePadding}
-        size="small"
-        onChange={() => setDensePadding(!densePadding)}
-      />
-    </Tooltip>
-  );
-};