material-react-table 0.4.4 → 0.4.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.4",
+  "version": "0.4.5",
   "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.",
@@ -57,12 +57,12 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@emotion/react": "^11.8.0",
-    "@emotion/styled": "^11.8.0",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-alpha.6",
+    "@faker-js/faker": "^6.0.0-alpha.7",
     "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.2",
+    "@mui/material": "^5.4.3",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
@@ -86,7 +86,6 @@
     "react-table": "^7.7.0",
     "size-limit": "^7.0.8",
     "storybook-addon-paddings": "^4.2.1",
-    "storybook-addon-performance": "^0.16.1",
     "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",

package/src/MaterialReactTable.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
+  IconButtonProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -138,6 +139,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       row: Row<D>,
       selectedRows: Row<D>[],
     ) => void;
+    onSelectAllChange?: (event: ChangeEvent, selectedRows: Row<D>[]) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -162,11 +164,11 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
         MRT_ToggleDensePaddingButton,
         MRT_FullScreenToggleButton,
       }: {
-        MRT_ToggleSearchButton: FC;
-        MRT_ToggleFiltersButton: FC;
-        MRT_ShowHideColumnsButton: FC;
-        MRT_ToggleDensePaddingButton: FC;
-        MRT_FullScreenToggleButton: FC;
+        MRT_ToggleSearchButton: FC<IconButtonProps>;
+        MRT_ToggleFiltersButton: FC<IconButtonProps>;
+        MRT_ShowHideColumnsButton: FC<IconButtonProps>;
+        MRT_ToggleDensePaddingButton: FC<IconButtonProps>;
+        MRT_FullScreenToggleButton: FC<IconButtonProps>;
       },
     ) => ReactNode;
   };

package/src/body/MRT_TableBodyRow.tsx

@@ -27,6 +27,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
     enableRowActions,
+    enableRowEditing,
     enableRowNumbers,
     enableSelection,
     muiTableBodyRowProps,
@@ -62,7 +63,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         {enableRowNumbers && (
           <MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
         )}
-        {enableRowActions && positionActionsColumn === 'first' && (
+        {(enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (
           <MRT_ToggleRowActionMenuButton row={row} />
         )}
         {(anyRowsCanExpand || renderDetailPanel) && (
@@ -72,7 +73,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         {row.cells.map((cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}
-        {enableRowActions && positionActionsColumn === 'last' && (
+        {(enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && (
           <MRT_ToggleRowActionMenuButton row={row} />
         )}
       </TableRow>

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import FilterListIcon from '@mui/icons-material/Fullscreen';
 import FilterListOffIcon from '@mui/icons-material/FullscreenExit';
 
-type Props = {};
+interface Props extends IconButtonProps {}
 
-export const MRT_FullScreenToggleButton: FC<Props> = () => {
+export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
   const { localization, setFullScreen, fullScreen } = useMRT();
 
   return (
@@ -15,6 +15,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = () => {
         aria-label={localization?.toggleFilterButtonTitle}
         onClick={() => setFullScreen(!fullScreen)}
         size="small"
+        {...rest}
       >
         {fullScreen ? <FilterListOffIcon /> : <FilterListIcon />}
       </IconButton>

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -6,6 +6,7 @@ import {
   Tooltip,
   styled,
   Divider,
+  IconButtonProps,
 } from '@mui/material';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import { useMRT } from '../useMRT';
@@ -17,9 +18,9 @@ const MenuButtons = styled('div')({
   padding: '0 0.5rem 0.5rem 0.5rem',
 });
 
-interface Props {}
+interface Props extends IconButtonProps {}
 
-export const MRT_ShowHideColumnsButton: FC<Props> = () => {
+export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
   const { tableInstance, localization } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -35,6 +36,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
           aria-label={localization?.showHideColumnsButtonTitle}
           onClick={handleClick}
           size="small"
+          {...rest}
         >
           <ViewColumnIcon />
         </IconButton>

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled } from '@mui/material';
+import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
@@ -33,14 +33,20 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
 
   return (
     <>
-      <IconButton
-        aria-label={localization?.columnActionMenuButtonTitle}
-        onClick={handleClick}
-        size="small"
-        title={localization?.columnActionMenuButtonTitle}
+      <Tooltip
+        arrow
+        enterDelay={1000}
+        enterNextDelay={1000}
+        title={localization?.columnActionMenuButtonTitle ?? ''}
       >
-        <MoreVertIcon />
-      </IconButton>
+        <IconButton
+          aria-label={localization?.columnActionMenuButtonTitle}
+          onClick={handleClick}
+          size="small"
+        >
+          <MoreVertIcon />
+        </IconButton>
+      </Tooltip>
       <MRT_ColumnActionMenu
         anchorEl={anchorEl}
         column={column}

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

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

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 
-type Props = {};
+interface Props extends IconButtonProps {}
 
-export const MRT_ToggleFiltersButton: FC<Props> = () => {
+export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
   const { localization, setShowFilters, showFilters } = useMRT();
 
   return (
@@ -15,6 +15,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = () => {
         aria-label={localization?.toggleFilterButtonTitle}
         onClick={() => setShowFilters(!showFilters)}
         size="small"
+        {...rest}
       >
         {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
       </IconButton>

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 
-type Props = {};
+interface Props extends IconButtonProps {}
 
-export const MRT_ToggleSearchButton: FC<Props> = () => {
+export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
   const { localization, setShowSearch, showSearch, muiSearchTextFieldProps } =
     useMRT();
 
@@ -25,7 +25,7 @@ export const MRT_ToggleSearchButton: FC<Props> = () => {
 
   return (
     <Tooltip arrow title={localization?.toggleSearchButtonTitle ?? ''}>
-      <IconButton size="small" onClick={handleToggleSearch}>
+      <IconButton size="small" onClick={handleToggleSearch} {...rest}>
         {showSearch ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>

package/src/footer/MRT_TableFooterRow.tsx

@@ -11,15 +11,16 @@ interface Props {
 
 export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
   const {
-    renderDetailPanel,
-    columns,
     anyRowsCanExpand,
-    enableSelection,
+    columns,
     enableRowActions,
+    enableRowEditing,
     enableRowNumbers,
+    enableSelection,
+    muiTableFooterRowProps,
     positionActionsColumn,
+    renderDetailPanel,
     tableInstance,
-    muiTableFooterRowProps,
   } = useMRT();
 
   //if no content in row, skip row
@@ -42,9 +43,8 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
   return (
     <TableRow {...tableRowProps}>
       {enableRowNumbers && <MRT_TableSpacerCell />}
-      {enableRowActions && positionActionsColumn === 'first' && (
-        <MRT_TableSpacerCell />
-      )}
+      {(enableRowActions || enableRowEditing) &&
+        positionActionsColumn === 'first' && <MRT_TableSpacerCell />}
       {(anyRowsCanExpand || renderDetailPanel) && (
         <MRT_TableSpacerCell
           width={`${
@@ -59,9 +59,8 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
           column={column}
         />
       ))}
-      {enableRowActions && positionActionsColumn === 'last' && (
-        <MRT_TableSpacerCell />
-      )}
+      {(enableRowActions || enableRowEditing) &&
+        positionActionsColumn === 'last' && <MRT_TableSpacerCell />}
     </TableRow>
   );
 };

package/src/head/MRT_TableHeadCell.tsx

@@ -5,6 +5,7 @@ import {
   styled,
   Divider as MuiDivider,
   Collapse,
+  Tooltip,
 } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { useMRT } from '../useMRT';
@@ -89,6 +90,18 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     },
   };
 
+  const sortTooltip = column.isSorted
+    ? column.isSortedDesc
+      ? localization?.columnActionMenuItemClearSort ?? ''
+      : localization?.columnActionMenuItemSortDesc?.replace(
+          '{column}',
+          column.Header as string,
+        ) ?? ''
+    : localization?.columnActionMenuItemSortAsc?.replace(
+        '{column}',
+        column.Header as string,
+      ) ?? '';
+
   return (
     <MRT_StyledTableHeadCell
       align={isParentHeader ? 'center' : 'left'}
@@ -100,20 +113,16 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
         <TableCellTopContents
           style={{ justifyContent: isParentHeader ? 'center' : undefined }}
         >
-          <CellFlexItem {...column.getSortByToggleProps()}>
+          <CellFlexItem {...column.getSortByToggleProps()} title={undefined}>
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
-              <TableSortLabel
-                aria-label={
-                  column.isSorted
-                    ? column.sortDescFirst
-                      ? localization?.columnActionMenuItemClearSort
-                      : localization?.columnActionMenuItemSortDesc
-                    : localization?.columnActionMenuItemSortAsc
-                }
-                active={column.isSorted}
-                direction={column.isSortedDesc ? 'desc' : 'asc'}
-              />
+              <Tooltip arrow title={sortTooltip}>
+                <TableSortLabel
+                  aria-label={sortTooltip}
+                  active={column.isSorted}
+                  direction={column.isSortedDesc ? 'desc' : 'asc'}
+                />
+              </Tooltip>
             )}
           </CellFlexItem>
           <CellFlexItem>

package/src/head/MRT_TableHeadRow.tsx

@@ -6,7 +6,7 @@ import {
   MRT_TableHeadCell,
 } from './MRT_TableHeadCell';
 import { useMRT } from '../useMRT';
-import { MRT_SelectAllCheckbox } from '../inputs/MRT_SelectAllCheckbox';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
@@ -19,8 +19,9 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
     disableExpandAll,
-    enableRowNumbers,
     enableRowActions,
+    enableRowEditing,
+    enableRowNumbers,
     enableSelection,
     muiTableHeadRowProps,
     positionActionsColumn,
@@ -55,7 +56,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         ) : (
           <MRT_StyledTableHeadCell>#</MRT_StyledTableHeadCell>
         ))}
-      {enableRowActions &&
+      {(enableRowActions || enableRowEditing) &&
         positionActionsColumn === 'first' &&
         (isParentHeader ? (
           <MRT_TableSpacerCell />
@@ -75,7 +76,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
       ) : null}
       {enableSelection ? (
         !isParentHeader ? (
-          <MRT_SelectAllCheckbox />
+          <MRT_SelectCheckbox selectAll />
         ) : (
           <MRT_TableSpacerCell width="1rem" />
         )
@@ -83,7 +84,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
       {headerGroup.headers.map((column: HeaderGroup) => (
         <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
-      {enableRowActions &&
+      {(enableRowActions || enableRowEditing) &&
         positionActionsColumn === 'last' &&
         (isParentHeader ? (
           <MRT_TableSpacerCell />

package/src/inputs/MRT_EditCellTextField.tsx

@@ -10,7 +10,6 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
   const {
     currentEditingRow,
-    localization,
     muiTableBodyCellEditTextFieldProps,
     setCurrentEditingRow,
   } = useMRT();
@@ -55,7 +54,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
       margin="dense"
       onChange={handleChange}
       onClick={(e) => e.stopPropagation()}
-      placeholder={localization?.filterTextFieldPlaceholder}
+      placeholder={cell.column.Header as string}
       value={cell.value}
       variant="standard"
       {...textFieldProps}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,31 +1,60 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox } from '@mui/material';
+import { Checkbox, Tooltip } from '@mui/material';
 import { Row } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 interface Props {
-  row: Row;
+  row?: Row;
+  selectAll?: boolean;
 }
 
-export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
-  const { tableInstance, onRowSelectChange, densePadding, localization } =
-    useMRT();
+export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
+  const {
+    densePadding,
+    localization,
+    onRowSelectChange,
+    onSelectAllChange,
+    tableInstance,
+  } = useMRT();
 
-  const onSelectChange = (event: ChangeEvent) => {
-    row.getToggleRowSelectedProps()?.onChange?.(event);
-    onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
+  const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (selectAll) {
+      onSelectAllChange?.(event, tableInstance.selectedFlatRows);
+      tableInstance.toggleAllRowsSelected(event.target.checked);
+    } else if (row) {
+      row?.getToggleRowSelectedProps()?.onChange?.(event);
+      onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
+    }
   };
 
+  const checkboxProps = selectAll
+    ? tableInstance.getToggleAllRowsSelectedProps()
+    : row?.getToggleRowSelectedProps();
+
   return (
     <MRT_TableButtonCell densePadding={densePadding}>
-      <Checkbox
-        inputProps={{
-          'aria-label': localization?.selectCheckboxTitle,
-        }}
-        onChange={onSelectChange}
-        {...row.getToggleRowSelectedProps()}
-      />
+      <Tooltip
+        arrow
+        enterDelay={1000}
+        enterNextDelay={1000}
+        title={
+          selectAll
+            ? localization?.selectAllCheckboxTitle ?? ''
+            : localization?.selectCheckboxTitle ?? ''
+        }
+      >
+        <Checkbox
+          inputProps={{
+            'aria-label': selectAll
+              ? localization?.selectAllCheckboxTitle ?? ''
+              : localization?.selectCheckboxTitle ?? '',
+          }}
+          onChange={onSelectChange}
+          {...checkboxProps}
+          title={undefined}
+        />
+      </Tooltip>
     </MRT_TableButtonCell>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import {
   CircularProgress,
   LinearProgress,
@@ -51,14 +51,6 @@ 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_TablePagination.tsx

@@ -25,6 +25,7 @@ export const MRT_TablePagination: FC<Props> = () => {
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={tableInstance.state.pageIndex}
       rowsPerPage={tableInstance.state.pageSize}
+      SelectProps={{ style: { margin: '0 1rem 0 1ch' } }}
       showFirstButton={
         tableInstance.rows.length / tableInstance.state.pageSize > 2
       }

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