material-react-table 0.4.3 → 0.4.6

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_TableHeadCellActions.tsx

@@ -12,7 +12,7 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
       densePadding={densePadding}
       style={{ textAlign: 'center' }}
     >
-      {localization?.actionsHeadColumnTitle}
+      {localization.actionsHeadColumnTitle}
     </MRT_StyledTableHeadCell>
   );
 };

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/icons.tsx

@@ -0,0 +1,72 @@
+import CancelIcon from '@mui/icons-material/Cancel';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import CloseIcon from '@mui/icons-material/Close';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
+import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import EditIcon from '@mui/icons-material/Edit';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import SaveIcon from '@mui/icons-material/Save';
+import SearchIcon from '@mui/icons-material/Search';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+import SortIcon from '@mui/icons-material/Sort';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+
+export interface MRT_Icons {
+  CancelIcon: any;
+  ClearAllIcon: any;
+  CloseIcon: any;
+  DensityMediumIcon: any;
+  DensitySmallIcon: any;
+  DoubleArrowDownIcon: any;
+  DynamicFeedIcon: any;
+  EditIcon: any;
+  ExpandLessIcon: any;
+  ExpandMoreIcon: any;
+  FilterListIcon: any;
+  FilterListOffIcon: any;
+  FullscreenExitIcon: any;
+  FullscreenIcon: any;
+  MoreHorizIcon: any;
+  MoreVertIcon: any;
+  SaveIcon: any;
+  SearchIcon: any;
+  SearchOffIcon: any;
+  SortIcon: any;
+  ViewColumnIcon: any;
+  VisibilityOffIcon: any;
+}
+
+export const MRT_Default_Icons: MRT_Icons = {
+  CancelIcon,
+  ClearAllIcon,
+  CloseIcon,
+  DensityMediumIcon,
+  DensitySmallIcon,
+  DoubleArrowDownIcon,
+  DynamicFeedIcon,
+  EditIcon,
+  ExpandLessIcon,
+  ExpandMoreIcon,
+  FilterListIcon,
+  FilterListOffIcon,
+  FullscreenExitIcon,
+  FullscreenIcon,
+  MoreHorizIcon,
+  MoreVertIcon,
+  SaveIcon,
+  SearchIcon,
+  SearchOffIcon,
+  SortIcon,
+  ViewColumnIcon,
+  VisibilityOffIcon,
+};

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_FilterTextField.tsx

@@ -1,7 +1,5 @@
 import React, { ChangeEvent, FC, useState } from 'react';
 import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import FilterIcon from '@mui/icons-material/FilterList';
 import { HeaderGroup, useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
 
@@ -10,7 +8,10 @@ interface Props {
 }
 
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {
-  const { localization } = useMRT();
+  const {
+    icons: { FilterListIcon, CloseIcon },
+    localization,
+  } = useMRT();
 
   const [filterValue, setFilterValue] = useState('');
 
@@ -37,7 +38,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         },
       }}
       margin="dense"
-      placeholder={localization?.filterTextFieldPlaceholder?.replace(
+      placeholder={localization.filterTextFieldPlaceholder?.replace(
         '{column}',
         String(column.Header),
       )}
@@ -52,15 +53,13 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         startAdornment: (
           <Tooltip
             arrow
-            title={
-              localization?.filterTextFieldPlaceholder?.replace(
-                '{column}',
-                String(column.Header),
-              ) ?? ''
-            }
+            title={localization.filterTextFieldPlaceholder?.replace(
+              '{column}',
+              String(column.Header),
+            )}
           >
             <InputAdornment position="start">
-              <FilterIcon />
+              <FilterListIcon />
             </InputAdornment>
           </Tooltip>
         ),
@@ -68,11 +67,11 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           <InputAdornment position="end">
             <Tooltip
               arrow
-              title={localization?.filterTextFieldClearButtonTitle ?? ''}
+              title={localization.filterTextFieldClearButtonTitle ?? ''}
             >
               <span>
                 <IconButton
-                  aria-label={localization?.filterTextFieldClearButtonTitle}
+                  aria-label={localization.filterTextFieldClearButtonTitle}
                   disabled={filterValue?.length === 0}
                   onClick={handleClear}
                   size="small"

package/src/inputs/MRT_SearchTextField.tsx

@@ -6,8 +6,6 @@ import {
   styled,
   TextField as MuiTextField,
 } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import CloseIcon from '@mui/icons-material/Close';
 import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
@@ -19,6 +17,7 @@ interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
+    icons: { SearchIcon, CloseIcon },
     showSearch,
     localization,
     muiSearchTextFieldProps,
@@ -45,7 +44,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
     <Collapse in={showSearch} orientation="horizontal">
       <TextField
         id="global-search-text-field"
-        placeholder={localization?.searchTextFieldPlaceholder}
+        placeholder={localization.searchTextFieldPlaceholder}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);
           handleChange(event);
@@ -61,11 +60,11 @@ export const MRT_SearchTextField: FC<Props> = () => {
           endAdornment: (
             <InputAdornment position="end">
               <IconButton
-                aria-label={localization?.searchTextFieldClearButtonTitle}
+                aria-label={localization.searchTextFieldClearButtonTitle}
                 disabled={searchValue?.length === 0}
                 onClick={handleClear}
                 size="small"
-                title={localization?.searchTextFieldClearButtonTitle}
+                title={localization.searchTextFieldClearButtonTitle}
               >
                 <CloseIcon fontSize="small" />
               </IconButton>

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/{utils/localization.ts → localization.ts}

@@ -32,10 +32,10 @@ export interface MRT_Localization {
   toolbarAlertGroupedThenByMessage: string;
 }
 
-export const defaultLocalization: MRT_Localization = {
+export const MRT_DefaultLocalization_EN: 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/src/menus/MRT_ColumnActionMenu.tsx

@@ -2,11 +2,6 @@ import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
 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',
@@ -31,6 +26,13 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     enableColumnGrouping,
     localization,
     setShowFilters,
+    icons: {
+      FilterListIcon,
+      SortIcon,
+      ClearAllIcon,
+      DynamicFeedIcon,
+      VisibilityOffIcon,
+    },
   } = useMRT();
 
   const handleClearSort = () => {
@@ -87,7 +89,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             disabled={!column.isSorted}
             onClick={handleClearSort}
           >
-            <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
+            <ClearAllIcon /> {localization.columnActionMenuItemClearSort}
           </MenuItem>,
           <MenuItem
             key={2}
@@ -95,7 +97,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortAsc}
           >
             <SortIcon />{' '}
-            {localization?.columnActionMenuItemSortAsc?.replace(
+            {localization.columnActionMenuItemSortAsc?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -106,7 +108,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleSortDesc}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization?.columnActionMenuItemSortDesc?.replace(
+            {localization.columnActionMenuItemSortDesc?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -116,8 +118,8 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         column.canFilter && [
           <Divider key={0} />,
           <MenuItem key={1} onClick={handleFilterByColumn}>
-            <FilterIcon />{' '}
-            {localization?.filterTextFieldPlaceholder?.replace(
+            <FilterListIcon />{' '}
+            {localization.filterTextFieldPlaceholder?.replace(
               '{column}',
               String(column.Header),
             )}
@@ -128,7 +130,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           <Divider key={1} />,
           <MenuItem key={2} onClick={handleGroupByColumn}>
             <DynamicFeedIcon />{' '}
-            {localization?.[
+            {localization[
               column.isGrouped
                 ? 'columnActionMenuItemUnGroupBy'
                 : 'columnActionMenuItemGroupBy'
@@ -139,7 +141,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         <Divider key={0} />,
         <MenuItem key={1} onClick={handleHideColumn}>
           <VisibilityOffIcon />{' '}
-          {localization?.columnActionMenuItemHideColumn?.replace(
+          {localization.columnActionMenuItemHideColumn?.replace(
             '{column}',
             String(column.Header),
           )}

package/src/menus/MRT_RowActionMenu.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
-import EditIcon from '@mui/icons-material/Edit';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -23,6 +22,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
   setAnchorEl,
 }) => {
   const {
+    icons: { EditIcon },
     enableRowEditing,
     localization,
     renderRowActionMenuItems,
@@ -37,7 +37,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
     >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit}>
-          <EditIcon /> {localization?.rowActionMenuItemEdit}
+          <EditIcon /> {localization.rowActionMenuItemEdit}
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import {
   CircularProgress,
   LinearProgress,
@@ -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',
@@ -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/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -47,7 +47,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
 
   const selectMessage =
     tableInstance.selectedFlatRows.length > 0
-      ? localization?.toolbarAlertSelectionMessage
+      ? localization.toolbarAlertSelectionMessage
           ?.replace(
             '{selectedCount}',
             tableInstance.selectedFlatRows.length.toString(),
@@ -58,10 +58,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
   const groupedByMessage =
     tableInstance.state.groupBy.length > 0 ? (
       <span>
-        {localization?.toolbarAlertGroupedByMessage}{' '}
+        {localization.toolbarAlertGroupedByMessage}{' '}
         {tableInstance.state.groupBy.map((columnId, index) => (
           <Fragment key={`${index}-${columnId}`}>
-            {index > 0 ? localization?.toolbarAlertGroupedThenByMessage : ''}
+            {index > 0 ? localization.toolbarAlertGroupedThenByMessage : ''}
             <Chip
               color="secondary"
               label={

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -27,7 +27,7 @@ interface Props {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
   const {
-    hideToolbarActions,
+    hideToolbarInternalActions,
     manualPagination,
     muiTableToolbarBottomProps,
     positionPagination,
@@ -44,7 +44,7 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
 
   return (
     <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
-      {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
+      {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarInternalButtons />
       ) : (
         <span />

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -22,8 +22,24 @@ 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 />}

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -40,7 +40,7 @@ interface Props {}
 export const MRT_ToolbarTop: FC<Props> = () => {
   const {
     disableGlobalFilter,
-    hideToolbarActions,
+    hideToolbarInternalActions,
     manualPagination,
     muiTableToolbarTopProps,
     positionPagination,
@@ -63,7 +63,7 @@ export const MRT_ToolbarTop: FC<Props> = () => {
         {renderToolbarCustomActions?.(tableInstance) ?? <span />}
         <ToolbarActionsContainer>
           {!disableGlobalFilter && <MRT_SearchTextField />}
-          {!hideToolbarActions && positionToolbarActions === 'top' && (
+          {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
             <MRT_ToolbarInternalButtons />
           )}
         </ToolbarActionsContainer>

package/src/useMRT.tsx

@@ -21,14 +21,18 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
+import { MRT_Icons } from './icons';
+import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
 
-export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
+export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsCanExpand: boolean;
   anyRowsExpanded: boolean;
   currentEditingRow: Row<D> | null;
   densePadding: boolean;
   fullScreen: boolean;
+  icons: MRT_Icons;
+  localization: MRT_Localization;
   setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
   setDensePadding: (densePadding: boolean) => void;
   setFullScreen: (fullScreen: boolean) => void;
@@ -37,7 +41,7 @@ export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
   showFilters: boolean;
   showSearch: boolean;
   tableInstance: TableInstance<D>;
-}
+};
 
 const MaterialReactTableContext = (<D extends {}>() =>
   createContext<UseMRT<D>>({} as UseMRT<D>) as Context<UseMRT<D>>)();