material-react-table 0.4.2 → 0.4.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.2",
+  "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.",
@@ -56,13 +56,13 @@
     }
   ],
   "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.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,8 +86,7 @@
     "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.8",
+    "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5"

package/src/MaterialReactTable.tsx

@@ -1,6 +1,7 @@
-import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
+  IconButtonProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -66,7 +67,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     enableSelection?: boolean;
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
-    hideToolbarActions?: boolean;
+    hideToolbarInternalActions?: boolean;
     hideToolbarBottom?: boolean;
     hideToolbarTop?: boolean;
     isFetching?: boolean;
@@ -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';
@@ -153,6 +155,22 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<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<IconButtonProps>;
+        MRT_ToggleFiltersButton: FC<IconButtonProps>;
+        MRT_ShowHideColumnsButton: FC<IconButtonProps>;
+        MRT_ToggleDensePaddingButton: FC<IconButtonProps>;
+        MRT_FullScreenToggleButton: FC<IconButtonProps>;
+      },
+    ) => ReactNode;
   };
 
 export default <D extends {}>({

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

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+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 extends IconButtonProps {}
+
+export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
+  const { densePadding, setDensePadding, localization } = useMRT();
+
+  return (
+    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleDensePaddingSwitchTitle}
+        onClick={() => setDensePadding(!densePadding)}
+        size="small"
+        {...rest}
+      >
+        {densePadding ? <DensitySmallIcon /> : <DensityMediumIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -14,12 +14,12 @@ 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,
   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',

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/toolbar/MRT_ToolbarBottom.tsx

@@ -1,25 +1,37 @@
 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 {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
   const {
-    hideToolbarActions,
+    hideToolbarInternalActions,
     manualPagination,
     muiTableToolbarBottomProps,
     positionPagination,
+    fullScreen,
     positionToolbarActions,
     positionToolbarAlertBanner,
     tableInstance,
@@ -31,8 +43,8 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       : muiTableToolbarBottomProps;
 
   return (
-    <Toolbar variant="dense" {...toolbarProps}>
-      {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
+    <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
+      {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarInternalButtons />
       ) : (
         <span />

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';
 
@@ -22,14 +22,30 @@ export const MRT_ToolbarInternalButtons: FC<Props> = () => {
     disableDensePaddingToggle,
     disableGlobalFilter,
     disableFullScreenToggle,
+    renderToolbarInternalActions,
+    tableInstance,
   } = useMRT();
 
+  if (renderToolbarInternalActions) {
+    return (
+      <>
+        {renderToolbarInternalActions(tableInstance, {
+          MRT_ToggleSearchButton,
+          MRT_ToggleFiltersButton,
+          MRT_ShowHideColumnsButton,
+          MRT_ToggleDensePaddingButton,
+          MRT_FullScreenToggleButton,
+        })}
+      </>
+    );
+  }
+
   return (
     <ToolbarButtonsContainer>
       {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
-      {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}
+      {!disableDensePaddingToggle && <MRT_ToggleDensePaddingButton />}
       {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
     </ToolbarButtonsContainer>
   );