material-react-table 0.3.0 → 0.3.4

package/src/inputs/MRT_SearchTextField.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FC, useState } from 'react';
 import {
+  Collapse,
   IconButton,
   InputAdornment,
   styled,
@@ -17,22 +18,15 @@ const TextField = styled(MuiTextField)({
 interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
-  const {
-    tableInstance,
-    tableSearchTextfieldProps,
-    localization,
-    onSearchChange,
-  } = useMaterialReactTable();
+  const { showSearch, localization, muiSearchTextFieldProps, onGlobalFilterChange, tableInstance } =
+    useMaterialReactTable();
 
   const [searchValue, setSearchValue] = useState('');
 
-  const handleChange = useAsyncDebounce(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      tableInstance.setGlobalFilter(event.target.value ?? undefined);
-      onSearchChange?.(event);
-    },
-    200,
-  );
+  const handleChange = useAsyncDebounce((event: ChangeEvent<HTMLInputElement>) => {
+    tableInstance.setGlobalFilter(event.target.value ?? undefined);
+    onGlobalFilterChange?.(event);
+  }, 200);
 
   const handleClear = () => {
     setSearchValue('');
@@ -40,35 +34,38 @@ export const MRT_SearchTextField: FC<Props> = () => {
   };
 
   return (
-    <TextField
-      placeholder={localization?.searchTextFieldPlaceholder}
-      onChange={(event: ChangeEvent<HTMLInputElement>) => {
-        setSearchValue(event.target.value);
-        handleChange(event);
-      }}
-      value={searchValue ?? ''}
-      variant="standard"
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start">
-            <SearchIcon fontSize="small" />
-          </InputAdornment>
-        ),
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton
-              aria-label={localization?.searchTextFieldClearButtonTitle}
-              disabled={searchValue?.length === 0}
-              onClick={handleClear}
-              size="small"
-              title={localization?.searchTextFieldClearButtonTitle}
-            >
-              <CloseIcon fontSize="small" />
-            </IconButton>
-          </InputAdornment>
-        ),
-      }}
-      {...tableSearchTextfieldProps}
-    />
+    <Collapse in={showSearch} orientation="horizontal">
+      <TextField
+        id="global-search-text-field"
+        placeholder={localization?.searchTextFieldPlaceholder}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setSearchValue(event.target.value);
+          handleChange(event);
+        }}
+        value={searchValue ?? ''}
+        variant="standard"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon fontSize="small" />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label={localization?.searchTextFieldClearButtonTitle}
+                disabled={searchValue?.length === 0}
+                onClick={handleClear}
+                size="small"
+                title={localization?.searchTextFieldClearButtonTitle}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+        {...muiSearchTextFieldProps}
+      />
+    </Collapse>
   );
 };

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
-import { Checkbox, TableCell } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 export const MRT_SelectAllCheckbox = () => {
-  const { tableInstance, enableSelectAll } = useMaterialReactTable();
+  const { tableInstance, disableSelectAll, densePadding, localization } = useMaterialReactTable();
 
   return (
-    <TableCell style={{ width: '2rem', padding: '0.5rem' }} variant="head">
-      {enableSelectAll ? (
+    <MRT_TableButtonCell densePadding={densePadding} variant="head">
+      {!disableSelectAll ? (
         <Checkbox
-          aria-label=""
+          inputProps={{
+            'aria-label': localization?.selectAllCheckboxTitle ?? '',
+          }}
           {...tableInstance.getToggleAllPageRowsSelectedProps()}
         />
       ) : null}
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,14 +1,15 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { Row } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 interface Props {
   row: Row;
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
-  const { tableInstance, onRowSelectChange } = useMaterialReactTable();
+  const { tableInstance, onRowSelectChange, densePadding, localization } = useMaterialReactTable();
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);
@@ -16,11 +17,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell style={{ width: '2rem', padding: '0.5rem' }}>
+    <MRT_TableButtonCell densePadding={densePadding}>
       <Checkbox
-        {...row.getToggleRowSelectedProps()}
+        inputProps={{
+          'aria-label': localization?.selectCheckboxTitle,
+        }}
         onChange={onSelectChange}
+        {...row.getToggleRowSelectedProps()}
       />
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,11 +1,12 @@
 import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMaterialReactTable } from '../useMaterialReactTable';
-import { ColumnInstance } from 'react-table';
+import { HeaderGroup } from 'react-table';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import SortIcon from '@mui/icons-material/Sort';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import FilterIcon from '@mui/icons-material/FilterList';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -14,20 +15,18 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: ColumnInstance;
+  column: HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
-export const MRT_ColumnActionMenu: FC<Props> = ({
-  anchorEl,
-  column,
-  setAnchorEl,
-}) => {
+export const MRT_ColumnActionMenu: FC<Props> = ({ anchorEl, column, setAnchorEl }) => {
   const {
-    enableColumnHiding,
+    disableColumnHiding,
     enableColumnGrouping,
-    enableSorting,
+    disableSortBy,
     localization,
+    disableFilters,
+    setShowFilters,
   } = useMaterialReactTable();
 
   const handleClearSort = () => {
@@ -55,48 +54,70 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleFilterByColumn = () => {
+    setShowFilters(true);
+    setTimeout(
+      () =>
+        document
+          .getElementById(
+            // @ts-ignore
+            column.muiTableHeadCellFilterTextFieldProps?.id ?? `filter-${column.id}-column`,
+          )
+          ?.focus(),
+      200,
+    );
+    setAnchorEl(null);
+  };
+
   return (
-    <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
-    >
-      {enableSorting && [
-        <MenuItem key={1} disabled={!column.isSorted} onClick={handleClearSort}>
-          <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
-        </MenuItem>,
-        <MenuItem
-          key={2}
-          disabled={column.isSorted && !column.isSortedDesc}
-          onClick={handleSortAsc}
-        >
-          <SortIcon /> {localization?.columnActionMenuItemSortAsc}
-        </MenuItem>,
-        <MenuItem
-          key={3}
-          disabled={column.isSorted && column.isSortedDesc}
-          onClick={handleSortDesc}
-        >
-          <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-          {localization?.columnActionMenuItemSortDesc}
+    <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
+      {!disableSortBy &&
+        column.canSort && [
+          <MenuItem key={1} disabled={!column.isSorted} onClick={handleClearSort}>
+            <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
+          </MenuItem>,
+          <MenuItem
+            key={2}
+            disabled={column.isSorted && !column.isSortedDesc}
+            onClick={handleSortAsc}
+          >
+            <SortIcon />{' '}
+            {localization?.columnActionMenuItemSortAsc?.replace('{column}', String(column.Header))}
+          </MenuItem>,
+          <MenuItem
+            key={3}
+            disabled={column.isSorted && column.isSortedDesc}
+            onClick={handleSortDesc}
+          >
+            <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
+            {localization?.columnActionMenuItemSortDesc?.replace('{column}', String(column.Header))}
+          </MenuItem>,
+        ]}
+      {!disableFilters &&
+        column.canFilter && [
+          <Divider key={0} />,
+          <MenuItem key={1} onClick={handleFilterByColumn}>
+            <FilterIcon />{' '}
+            {localization?.filterTextFieldPlaceholder?.replace('{column}', String(column.Header))}
+          </MenuItem>,
+        ]}
+      {enableColumnGrouping &&
+        column.canGroupBy && [
+          <Divider key={1} />,
+          <MenuItem key={2} onClick={handleGroupByColumn}>
+            <DynamicFeedIcon />{' '}
+            {localization?.[
+              column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy'
+            ]?.replace('{column}', String(column.Header))}
+          </MenuItem>,
+        ]}
+      {!disableColumnHiding && [
+        <Divider key={0} />,
+        <MenuItem key={1} onClick={handleHideColumn}>
+          <VisibilityOffIcon />{' '}
+          {localization?.columnActionMenuItemHideColumn?.replace('{column}', String(column.Header))}
         </MenuItem>,
-        <Divider key={4} />,
       ]}
-      {enableColumnHiding && (
-        <MenuItem onClick={handleHideColumn}>
-          <VisibilityOffIcon /> {localization?.columnActionMenuItemHideColumn}
-        </MenuItem>
-      )}
-      {enableColumnGrouping && column.canGroupBy && (
-        <MenuItem disabled={column.isGrouped} onClick={handleGroupByColumn}>
-          <DynamicFeedIcon /> {localization?.columnActionMenuItemGroupBy}
-        </MenuItem>
-      )}
-      {enableColumnGrouping && column.canGroupBy && (
-        <MenuItem disabled={!column.isGrouped} onClick={handleGroupByColumn}>
-          <DynamicFeedIcon /> {localization?.columnActionMenuItemUnGroupBy}
-        </MenuItem>
-      )}
     </Menu>
   );
 };

package/src/menus/MRT_RowActionMenu.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+import EditIcon from '@mui/icons-material/Edit';
+
+const MenuItem = styled(MuiMenuItem)({
+  display: 'flex',
+  gap: '0.75rem',
+});
+
+interface Props {
+  anchorEl: HTMLElement | null;
+  row: Row;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  handleEdit: () => void;
+}
+
+export const MRT_RowActionMenu: FC<Props> = ({ anchorEl, row, handleEdit, setAnchorEl }) => {
+  const { enableRowEditing, localization, renderRowActionMenuItems, tableInstance } =
+    useMaterialReactTable();
+
+  return (
+    <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
+      {enableRowEditing && (
+        <MenuItem onClick={handleEdit}>
+          <EditIcon /> {localization?.rowActionMenuItemEdit}
+        </MenuItem>
+      )}
+      {renderRowActionMenuItems?.(row, tableInstance, () => setAnchorEl(null)) ?? null}
+    </Menu>
+  );
+};

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -17,10 +17,10 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
       <MenuItem style={{ paddingLeft: `${column.depth + 1}rem` }}>
         {isMaxDepth ? (
           <FormControlLabel
-            onChange={() => isMaxDepth && column.toggleHidden()}
-            label={column.Header as string}
             checked={column.isVisible}
             control={<Switch />}
+            label={column.Header as string}
+            onChange={() => isMaxDepth && column.toggleHidden()}
           />
         ) : (
           <Typography>{column.Header}</Typography>

package/src/table/MRT_Table.tsx

@@ -8,14 +8,22 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 interface Props {}
 
 export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, tableProps, showHead, showFooter } =
-    useMaterialReactTable();
+  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } = useMaterialReactTable();
+
+  const tableProps = {
+    ...muiTableProps,
+    ...tableInstance.getTableProps(),
+    style: {
+      ...tableInstance.getTableProps().style,
+      ...(muiTableProps?.style ?? {}),
+    },
+  };
 
   return (
-    <Table {...tableProps} {...tableInstance.getTableProps()}>
-      {showHead && <MRT_TableHead />}
+    <Table {...tableProps}>
+      {!hideTableHead && <MRT_TableHead />}
       <MRT_TableBody />
-      {showFooter && <MRT_TableFooter />}
+      {!hideTableFooter && <MRT_TableFooter />}
     </Table>
   );
 };

package/src/table/MRT_TableButtonCell.tsx

@@ -0,0 +1,9 @@
+import { styled, TableCell as MuiTableCell } from '@mui/material';
+
+export const MRT_TableButtonCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '1px' : '0.6rem',
+  textAlign: 'center',
+  transition: 'all 0.2s ease-in-out',
+}));

package/src/table/MRT_TableContainer.tsx

@@ -1,18 +1,45 @@
 import React, { FC } from 'react';
-import { Paper, TableContainer } from '@mui/material';
+import {
+  alpha,
+  CircularProgress,
+  LinearProgress,
+  Paper,
+  styled,
+  TableContainer,
+} from '@mui/material';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_Table } from './MRT_Table';
-import { MRT_Toolbar } from '../toolbar/MRT_Toolbar';
+import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
+import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
+
+const CircularProgressWrapper = styled('div')(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: alpha(theme.palette.background.paper, 0.5),
+  display: 'grid',
+  height: '100%',
+  justifyContent: 'center',
+  margin: 'auto',
+  position: 'absolute',
+  width: 'calc(100% - 2rem)',
+}));
 
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
-  const { tableContainerProps, showToolbar } = useMaterialReactTable();
+  const { muiTableContainerProps, hideToolbarTop, hideToolbarBottom, isLoading, isFetching } =
+    useMaterialReactTable();
 
   return (
-    <TableContainer component={Paper} {...tableContainerProps}>
-      {showToolbar && <MRT_Toolbar />}
+    <TableContainer component={Paper} {...muiTableContainerProps}>
+      {!hideToolbarTop && <MRT_ToolbarTop />}
+      {isFetching && <LinearProgress />}
+      {isLoading && (
+        <CircularProgressWrapper>
+          <CircularProgress aria-busy="true" aria-label="Loading data" />
+        </CircularProgressWrapper>
+      )}
       <MRT_Table />
+      {!hideToolbarBottom && <MRT_ToolbarBottom />}
     </TableContainer>
   );
 };

package/src/table/MRT_TableSpacerCell.tsx

@@ -1,10 +1,24 @@
 import React, { CSSProperties, FC } from 'react';
 import { TableCell } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
 
 interface Props {
   width?: CSSProperties['width'];
 }
 
 export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
-  return <TableCell style={{ width }} />;
+  const { muiTableBodyCellProps } = useMaterialReactTable();
+
+  const mTableBodyCellrops =
+    muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
+
+  const tableCellProps = {
+    ...mTableBodyCellrops,
+    style: {
+      width,
+      ...(mTableBodyCellrops?.style ?? {}),
+    },
+  };
+
+  return <TableCell {...tableCellProps} />;
 };

package/src/toolbar/MRT_TablePagination.tsx

@@ -0,0 +1,34 @@
+import React, { ChangeEvent, FC } from 'react';
+import { TablePagination } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_TablePagination: FC<Props> = () => {
+  const { tableInstance, muiTablePaginationProps } = useMaterialReactTable();
+
+  const tablePaginationProps =
+    muiTablePaginationProps instanceof Function
+      ? muiTablePaginationProps(tableInstance)
+      : muiTablePaginationProps;
+
+  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
+    tableInstance.setPageSize(+event.target.value);
+    tableInstance.gotoPage(0);
+  };
+
+  return (
+    <TablePagination
+      component={'div'}
+      count={tableInstance.rows.length}
+      onPageChange={(_, newPage) => tableInstance.gotoPage(newPage)}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={tableInstance.state.pageIndex}
+      rowsPerPage={tableInstance.state.pageSize}
+      showFirstButton={tableInstance.rows.length / tableInstance.state.pageSize > 2}
+      showLastButton={tableInstance.rows.length / tableInstance.state.pageSize > 2}
+      style={{ padding: 0 }}
+      {...tablePaginationProps}
+    />
+  );
+};

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { styled, Toolbar as MuiToolbar } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+
+const Toolbar = styled(MuiToolbar)({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+interface Props {}
+
+export const MRT_ToolbarBottom: FC<Props> = () => {
+  const {
+    hideToolbarActions,
+    manualPagination,
+    muiTableToolbarBottomProps,
+    positionPagination,
+    positionToolbarActions,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const toolbarProps =
+    muiTableToolbarBottomProps instanceof Function
+      ? muiTableToolbarBottomProps(tableInstance)
+      : muiTableToolbarBottomProps;
+
+  return (
+    <Toolbar style={{ padding: 0 }} variant="dense" {...toolbarProps}>
+      {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
+        <MRT_ToolbarButtons />
+      ) : (
+        <span />
+      )}
+      {!manualPagination && ['bottom', 'both'].includes(positionPagination ?? '') && (
+        <MRT_TablePagination />
+      )}
+    </Toolbar>
+  );
+};

package/src/toolbar/MRT_ToolbarButtons.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { styled } from '@mui/material';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_DensePaddingSwitch } from '../inputs/MRT_DensePaddingSwitch';
+import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
+
+const ToolbarButtonsContainer = styled('div')({
+  display: 'flex',
+  gap: '0.5rem',
+  alignItems: 'center',
+});
+
+interface Props {}
+
+export const MRT_ToolbarButtons: FC<Props> = () => {
+  const { disableFilters, disableColumnHiding, disableDensePaddingToggle, disableGlobalFilter } =
+    useMaterialReactTable();
+
+  return (
+    <ToolbarButtonsContainer>
+      {!disableGlobalFilter && <MRT_ToggleSearchButton />}
+      {!disableFilters && <MRT_ToggleFiltersButton />}
+      {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
+      {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}
+    </ToolbarButtonsContainer>
+  );
+};

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -0,0 +1,59 @@
+import React, { FC } from 'react';
+import { styled, Toolbar as MuiToolbar } from '@mui/material';
+import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+import { MRT_TablePagination } from './MRT_TablePagination';
+
+const Toolbar = styled(MuiToolbar)({
+  display: 'grid',
+  padding: '0.5rem !important',
+});
+
+const ToolbarTopRow = styled('div')({
+  padding: '0.5rem',
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+const ToolbarActionsContainer = styled('div')({
+  display: 'flex',
+  gap: '0.5rem',
+});
+
+interface Props {}
+
+export const MRT_ToolbarTop: FC<Props> = () => {
+  const {
+    disableGlobalFilter,
+    hideToolbarActions,
+    manualPagination,
+    muiTableToolbarTopProps,
+    positionPagination,
+    positionToolbarActions,
+    renderToolbarActions,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const toolbarProps =
+    muiTableToolbarTopProps instanceof Function
+      ? muiTableToolbarTopProps(tableInstance)
+      : muiTableToolbarTopProps;
+
+  return (
+    <Toolbar variant="dense" {...toolbarProps}>
+      <ToolbarTopRow>
+        {renderToolbarActions?.(tableInstance) ?? <span />}
+        <ToolbarActionsContainer>
+          {!disableGlobalFilter && <MRT_SearchTextField />}
+          {!hideToolbarActions && positionToolbarActions === 'top' && <MRT_ToolbarButtons />}
+        </ToolbarActionsContainer>
+      </ToolbarTopRow>
+      <div>
+        {!manualPagination && ['top', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination />
+        )}
+      </div>
+    </Toolbar>
+  );
+};