material-react-table 0.4.2 → 0.4.5

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',
 });
@@ -29,11 +40,12 @@ interface Props {}
 export const MRT_ToolbarTop: FC<Props> = () => {
   const {
     disableGlobalFilter,
-    hideToolbarActions,
+    hideToolbarInternalActions,
     manualPagination,
     muiTableToolbarTopProps,
     positionPagination,
     positionToolbarActions,
+    fullScreen,
     positionToolbarAlertBanner,
     renderToolbarCustomActions,
     tableInstance,
@@ -45,13 +57,13 @@ 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 />}
         <ToolbarActionsContainer>
           {!disableGlobalFilter && <MRT_SearchTextField />}
-          {!hideToolbarActions && positionToolbarActions === 'top' && (
+          {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
             <MRT_ToolbarInternalButtons />
           )}
         </ToolbarActionsContainer>

package/src/utils/localization.ts

@@ -35,7 +35,7 @@ export interface MRT_Localization {
 export const defaultLocalization: MRT_Localization = {
   actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemClearSort: 'Clear sort',
   columnActionMenuItemGroupBy: 'Group by {column}',
   columnActionMenuItemHideColumn: 'Hide {column} column',
   columnActionMenuItemSortAsc: 'Sort by {column} ascending',
@@ -54,8 +54,8 @@ export const defaultLocalization: MRT_Localization = {
   rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
-  selectAllCheckboxTitle: 'Select all',
-  selectCheckboxTitle: 'Select row',
+  selectAllCheckboxTitle: 'Toggle select all',
+  selectCheckboxTitle: 'Toggle select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters',

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/dist/inputs/MRT_SelectAllCheckbox.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const MRT_SelectAllCheckbox: () => JSX.Element;

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>
-  );
-};

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Checkbox } from '@mui/material';
-import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
-
-export const MRT_SelectAllCheckbox = () => {
-  const { tableInstance, disableSelectAll, densePadding, localization } =
-    useMRT();
-
-  return (
-    <MRT_TableButtonCell densePadding={densePadding} variant="head">
-      {!disableSelectAll ? (
-        <Checkbox
-          inputProps={{
-            'aria-label': localization?.selectAllCheckboxTitle ?? '',
-          }}
-          {...tableInstance.getToggleAllPageRowsSelectedProps()}
-        />
-      ) : null}
-    </MRT_TableButtonCell>
-  );
-};