material-react-table 0.3.3 → 0.4.1

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { ColumnInstance } from 'react-table';
+import { HeaderGroup } from 'react-table';
 interface Props {
     anchorEl: HTMLElement | null;
-    column: ColumnInstance;
+    column: HeaderGroup;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 export declare const MRT_ColumnActionMenu: FC<Props>;

package/dist/menus/MRT_RowActionMenu.d.ts

@@ -4,6 +4,7 @@ interface Props {
     anchorEl: HTMLElement | null;
     row: Row;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
+    handleEdit: () => void;
 }
 export declare const MRT_RowActionMenu: FC<Props>;
 export {};

package/dist/table/MRT_TableButtonCell.d.ts

@@ -0,0 +1,3 @@
+export declare const MRT_TableButtonCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    densePadding?: boolean | undefined;
+}, {}, {}>;

package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_ToolbarAlertBanner: FC<Props>;
+export {};

package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_ToolbarInternalButtons: FC<Props>;
+export {};

package/dist/{useMaterialReactTable.d.ts → useMRT.d.ts}

@@ -1,15 +1,20 @@
 import React, { PropsWithChildren } from 'react';
 import { Row, TableInstance } from 'react-table';
 import { MaterialReactTableProps } from './MaterialReactTable';
-import { UseMRTCalcs } from './utils/useMRTCalcs';
-export interface UseMaterialReactTable<D extends {}> extends MaterialReactTableProps<D>, UseMRTCalcs {
+export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
+    anyRowsCanExpand: boolean;
+    anyRowsExpanded: boolean;
     currentEditingRow: Row<D> | null;
     densePadding: boolean;
+    fullScreen: boolean;
     setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
     setDensePadding: (densePadding: boolean) => void;
+    setFullScreen: (fullScreen: boolean) => void;
     setShowFilters: (showFilters: boolean) => void;
+    setShowSearch: (showSearch: boolean) => void;
     showFilters: boolean;
+    showSearch: boolean;
     tableInstance: TableInstance<D>;
 }
 export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
-export declare const useMaterialReactTable: <D extends {}>() => UseMaterialReactTable<D>;
+export declare const useMRT: <D extends {}>() => UseMRT<D>;

package/dist/utils/localization.d.ts

@@ -7,6 +7,8 @@ export interface MRT_Localization {
     columnActionMenuItemSortAsc: string;
     columnActionMenuItemSortDesc: string;
     columnActionMenuItemUnGroupBy: string;
+    columnShowHideMenuHideAll: string;
+    columnShowHideMenuShowAll: string;
     expandAllButtonTitle: string;
     expandButtonTitle: string;
     filterTextFieldClearButtonTitle: string;
@@ -19,8 +21,14 @@ export interface MRT_Localization {
     searchTextFieldClearButtonTitle: string;
     searchTextFieldPlaceholder: string;
     selectAllCheckboxTitle: string;
+    selectCheckboxTitle: string;
     showHideColumnsButtonTitle: string;
     toggleDensePaddingSwitchTitle: string;
     toggleFilterButtonTitle: string;
+    toggleFullScreenButtonTitle: string;
+    toggleSearchButtonTitle: string;
+    toolbarAlertSelectionMessage: string;
+    toolbarAlertGroupedByMessage: string;
+    toolbarAlertGroupedThenByMessage: string;
 }
 export declare const defaultLocalization: MRT_Localization;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.3",
+  "version": "0.4.1",
   "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.",
@@ -27,20 +27,21 @@
     "node": ">=12"
   },
   "scripts": {
-    "start": "tsdx watch",
+    "analyze": "size-limit --why",
     "build": "tsdx build && size-limit",
-    "test": "tsdx test --passWithNoTests",
+    "build-storybook": "build-storybook",
+    "format": "prettier -w .",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
-    "analyze": "size-limit --why",
+    "start": "tsdx watch",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "test": "tsdx test --passWithNoTests",
     "upgrade": "ncu -u && npm i"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "tsdx lint && format"
     }
   },
   "module": "dist/material-react-table.esm.js",
@@ -55,23 +56,23 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.4",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-alpha.5",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/material": "^5.4.0",
-    "@size-limit/preset-small-lib": "^7.0.5",
-    "@storybook/addon-a11y": "^6.4.18",
-    "@storybook/addon-actions": "^6.4.18",
+    "@faker-js/faker": "^6.0.0-alpha.6",
+    "@mui/icons-material": "^5.4.2",
+    "@mui/material": "^5.4.2",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.18",
-    "@storybook/addon-storysource": "^6.4.18",
-    "@storybook/addons": "^6.4.18",
-    "@storybook/react": "^6.4.18",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@types/faker": "^6.6.8",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
@@ -83,7 +84,8 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-table": "^7.7.0",
-    "size-limit": "^7.0.5",
+    "size-limit": "^7.0.8",
+    "storybook-addon-paddings": "^4.2.1",
     "storybook-addon-performance": "^0.16.1",
     "storybook-dark-mode": "^1.0.8",
     "tsdx": "^0.14.1",

package/src/@types/react-table-config.d.ts

@@ -1,5 +1,5 @@
+import { ChangeEvent, ReactNode } from 'react';
 import { TableCellProps, TextFieldProps } from '@mui/material';
-import { ReactNode } from 'react';
 import {
   UseColumnOrderInstanceProps,
   UseColumnOrderState,
@@ -50,6 +50,41 @@ import {
   UseSortByState,
 } from 'react-table';
 
+export type MRT_ColumnInterface<D extends {} = {}> =
+  UseFiltersColumnOptions<D> &
+    UseGlobalFiltersColumnOptions<D> &
+    UseGroupByColumnOptions<D> &
+    UseResizeColumnsColumnOptions<D> &
+    UseSortByColumnOptions<D> & {
+      disableFilters?: boolean;
+      Filter?: ({ column }: { column: HeaderGroup<D> }) => ReactNode;
+      editable?: boolean;
+      Edit?: ({ cell, onChange }: { cell: Cell<D> }) => ReactNode;
+      muiTableBodyCellProps?:
+        | TableCellProps
+        | ((cell: Cell<D>) => TableCellProps);
+      muiTableHeadCellProps?:
+        | TableCellProps
+        | ((column: Column<D>) => TableCellProps);
+      muiTableFooterCellProps?:
+        | TableCellProps
+        | ((column: Column<D>) => TableCellProps);
+      muiTableBodyCellEditTextFieldProps?:
+        | TextFieldProps
+        | ((cell: Cell<D>) => TextFieldProps);
+      muiTableHeadCellFilterTextFieldProps?:
+        | TextFieldProps
+        | ((column: Column<D>) => TextFieldProps);
+      onCellEditChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        cell: Cell<D>,
+      ) => void;
+      onFilterChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        filterValue: any,
+      ) => void;
+    };
+
 declare module 'react-table' {
   export interface TableOptions<D extends Record<string, unknown>>
     extends UseExpandedOptions<D>,
@@ -97,37 +132,7 @@ declare module 'react-table' {
 
   export interface ColumnInterface<
     D extends Record<string, unknown> = Record<string, unknown>,
-  > extends UseFiltersColumnOptions<D>,
-      UseGlobalFiltersColumnOptions<D>,
-      UseGroupByColumnOptions<D>,
-      UseResizeColumnsColumnOptions<D>,
-      UseSortByColumnOptions<D> {
-    disableFilters?: boolean;
-    Filter?: ({ column }: { column: HeaderGroup<D> }) => ReactNode;
-    editable?: boolean;
-    Edit?: ({
-      cell,
-      onChange,
-    }: {
-      cell: Cell<D>;
-      onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    }) => ReactNode;
-    muiTableBodyCellProps?:
-      | TableCellProps
-      | ((cell?: Cell<D>) => TableCellProps);
-    muiTableHeadCellProps?:
-      | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
-    muiTableFooterCellProps?:
-      | TableCellProps
-      | ((column: Column<D>) => TableCellProps);
-    muiTableBodyCellEditTextFieldProps?:
-      | TextFieldProps
-      | ((cell?: Cell<D>) => TextFieldProps);
-    muiTableHeadCellFilterTextFieldProps?:
-      | TextFieldProps
-      | ((column: Column<D>) => TextFieldProps);
-  }
+  > extends MRT_ColumnInterface {}
 
   export interface ColumnInstance<
     D extends Record<string, unknown> = Record<string, unknown>,
@@ -149,5 +154,3 @@ declare module 'react-table' {
       UseRowSelectRowProps<D>,
       UseRowStateRowProps<D> {}
 }
-
-export module 'react-table';

package/src/MaterialReactTable.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
 import {
+  AlertProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -10,7 +11,6 @@ import {
   TableRowProps,
   TextFieldProps,
   ToolbarProps,
-  TypographyProps,
 } from '@mui/material';
 import {
   Cell,
@@ -28,12 +28,15 @@ import {
   UseRowSelectOptions,
   UseRowStateOptions,
   UseSortByOptions,
+  UseTableOptions,
 } from 'react-table';
-import { MaterialReactTableProvider } from './useMaterialReactTable';
+import { MaterialReactTableProvider } from './useMRT';
 import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { defaultLocalization, MRT_Localization } from './utils/localization';
+import { MRT_ColumnInterface } from './@types/react-table-config';
 
 export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
+  UseTableOptions<D> &
   UseExpandedOptions<D> &
   UseFiltersOptions<D> &
   UseGlobalFiltersOptions<D> &
@@ -43,14 +46,19 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
   UseRowSelectOptions<D> &
   UseRowStateOptions<D> &
   UseSortByOptions<D> & {
+    columns: (Column<D> & MRT_ColumnInterface)[];
     defaultDensePadding?: boolean;
+    defaultFullScreen?: boolean;
     defaultShowFilters?: boolean;
+    defaultShowSearchTextField?: boolean;
     disableColumnActions?: boolean;
     disableColumnHiding?: boolean;
     disableDensePaddingToggle?: boolean;
     disableExpandAll?: boolean;
+    disableFullScreenToggle?: boolean;
     disableSelectAll?: boolean;
     disableSubRowTree?: boolean;
+    enableRowNumbers?: boolean;
     enableColumnGrouping?: boolean;
     enableColumnResizing?: boolean;
     enableRowActions?: boolean;
@@ -73,7 +81,9 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       | ((cell?: Cell<D>) => TableCellProps);
     muiTableBodyProps?: TableBodyProps;
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
-    muiTableContainerProps?: TableContainerProps;
+    muiTableContainerProps?:
+      | TableContainerProps
+      | ((table: TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
       | ((row: Row<D>) => TableCellProps);
@@ -98,7 +108,9 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       | Partial<TablePaginationProps>
       | ((tableInstance: TableInstance<D>) => Partial<TablePaginationProps>);
     muiTableProps?: TableProps;
-    muiTableTitleProps?: TypographyProps;
+    muiTableToolbarAlertBannerProps?:
+      | AlertProps
+      | ((tableInstance: TableInstance<D>) => AlertProps);
     muiTableToolbarBottomProps?:
       | ToolbarProps
       | ((tableInstance: TableInstance<D>) => ToolbarProps);
@@ -109,6 +121,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       event: MouseEvent<HTMLTableCellElement>,
       cell: Cell<D>,
     ) => void;
+    onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
     onDetailPanelClick?: (
       event: MouseEvent<HTMLTableCellElement>,
       row: Row<D>,
@@ -128,6 +141,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
+    positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: (row: Row<D>) => ReactNode;
     renderRowActionMenuItems?: (
       rowData: Row<D>,
@@ -138,7 +152,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       row: Row<D>,
       tableInstance: TableInstance<D>,
     ) => ReactNode;
-    title?: string | ReactNode;
+    renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
   };
 
 export default <D extends {}>({
@@ -147,14 +161,16 @@ export default <D extends {}>({
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
+  positionToolbarAlertBanner = 'top',
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
     defaultColumn={defaultColumn}
     localization={{ ...defaultLocalization, ...localization }}
-    positionPagination={positionPagination}
     positionActionsColumn={positionActionsColumn}
+    positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}
+    positionToolbarAlertBanner={positionToolbarAlertBanner}
     {...rest}
   >
     <MRT_TableContainer />

package/src/body/MRT_TableBody.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { styled, TableBody as MuiTableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 const TableBody = styled(MuiTableBody)({
   overflowY: 'hidden',
@@ -10,8 +10,7 @@ const TableBody = styled(MuiTableBody)({
 interface Props {}
 
 export const MRT_TableBody: FC<Props> = () => {
-  const { tableInstance, muiTableBodyProps, manualPagination } =
-    useMaterialReactTable();
+  const { tableInstance, muiTableBodyProps, manualPagination } = useMRT();
 
   const rows = manualPagination ? tableInstance.rows : tableInstance.page;
 

package/src/body/MRT_TableBodyCell.tsx

@@ -1,14 +1,15 @@
 import React, { FC, MouseEvent } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { Cell } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_EditCellTextfield } from '../inputs/MRT_EditCellTextfield';
+import { useMRT } from '../useMRT';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
-const TableCell = styled(MuiTableCell, {
+export const MRT_StyledTableBodyCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) => prop !== 'densePadding',
 })<{ densePadding?: boolean }>(({ densePadding }) => ({
   padding: densePadding ? '0.5rem' : '1rem',
   transition: 'all 0.2s ease-in-out',
+  whiteSpace: densePadding ? 'nowrap' : 'normal',
 }));
 
 interface Props {
@@ -21,7 +22,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
     muiTableBodyCellProps,
     densePadding,
     currentEditingRow,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
@@ -45,7 +46,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   };
 
   return (
-    <TableCell
+    <MRT_StyledTableBodyCell
       densePadding={densePadding}
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.(event, cell)
@@ -53,7 +54,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       {...tableCellProps}
     >
       {currentEditingRow?.id === cell.row.id ? (
-        <MRT_EditCellTextfield cell={cell} />
+        <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')
       ) : cell.isGrouped ? (
@@ -63,7 +64,6 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       ) : (
         cell.render('Cell')
       )}
-      {}
-    </TableCell>
+    </MRT_StyledTableBodyCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,13 +1,11 @@
 import React, { FC, MouseEvent } from 'react';
-import {
-  alpha,
-  styled,
-  TableCell,
-  TableRow as MuiTableRow,
-} from '@mui/material';
+import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
 import { Row } from 'react-table';
-import { MRT_TableBodyCell } from './MRT_TableBodyCell';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import {
+  MRT_StyledTableBodyCell,
+  MRT_TableBodyCell,
+} from './MRT_TableBodyCell';
+import { useMRT } from '../useMRT';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
@@ -29,12 +27,13 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
     enableRowActions,
+    enableRowNumbers,
     enableSelection,
     muiTableBodyRowProps,
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function
@@ -60,10 +59,11 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         }
         {...tableRowProps}
       >
+        {enableRowNumbers && (
+          <MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
+        )}
         {enableRowActions && positionActionsColumn === 'first' && (
-          <TableCell>
-            <MRT_ToggleRowActionMenuButton row={row} />
-          </TableCell>
+          <MRT_ToggleRowActionMenuButton row={row} />
         )}
         {(anyRowsCanExpand || renderDetailPanel) && (
           <MRT_ExpandButton row={row} />
@@ -73,9 +73,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}
         {enableRowActions && positionActionsColumn === 'last' && (
-          <TableCell>
-            <MRT_ToggleRowActionMenuButton row={row} />
-          </TableCell>
+          <MRT_ToggleRowActionMenuButton row={row} />
         )}
       </TableRow>
       {renderDetailPanel && <MRT_TableDetailPanel row={row} />}

package/src/body/MRT_TableDetailPanel.tsx

@@ -6,7 +6,7 @@ import {
   TableRow,
 } from '@mui/material';
 import { Row } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 const TableCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) => prop !== 'isExpanded',
@@ -28,7 +28,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     muiTableDetailPanelProps,
     muiTableBodyRowProps,
     onDetailPanelClick,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const mTableBodyRowProps =
     muiTableBodyRowProps instanceof Function

package/src/buttons/MRT_EditActionButtons.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
 import CancelIcon from '@mui/icons-material/Cancel';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 
 const EditActionButtonWrappers = styled('div')({
@@ -20,9 +20,10 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
     setCurrentEditingRow,
     onRowEditSubmit,
     currentEditingRow,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const handleCancel = () => {
+    row.values = row.original;
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { IconButton, styled, TableCell } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
 import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 const ArrowRightIcon = styled(MuiArrowRightIcon, {
   shouldForwardProp: (prop) => prop !== 'rotation',
@@ -13,23 +14,14 @@ const ArrowRightIcon = styled(MuiArrowRightIcon, {
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const {
-    tableInstance,
-    localization,
-    anyRowsExpanded,
-    densePadding,
-    renderDetailPanel,
-  } = useMaterialReactTable();
+  const { tableInstance, localization, anyRowsExpanded, densePadding } =
+    useMRT();
 
   return (
-    <TableCell
+    <MRT_TableButtonCell
       size="small"
+      densePadding={densePadding}
       {...tableInstance.getToggleAllRowsExpandedProps()}
-      style={{
-        padding: densePadding ? '0' : '0.5rem 0.5rem',
-        transition: 'all 0.2s ease-in-out',
-        width: `${renderDetailPanel ? 2 : tableInstance.expandedDepth + 2}rem`,
-      }}
     >
       <IconButton
         aria-label={localization?.expandAllButtonTitle}
@@ -42,6 +34,6 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
           }
         />
       </IconButton>
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,15 +1,15 @@
 import React, { FC } from 'react';
-import { IconButton, styled, TableCell as MuiTableCell } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
 import { Row } from 'react-table';
 import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
-const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'depth',
-})<{ densePadding?: boolean; depth: number }>(({ densePadding, depth }) => ({
-  padding: densePadding ? '0' : '0.6rem',
+const TableCell = styled(MRT_TableButtonCell, {
+  shouldForwardProp: (prop) => prop !== 'depth',
+})<{ depth: number }>(({ depth }) => ({
   paddingLeft: `${depth + 0.5}rem`,
-  transition: 'all 0.2s ease-in-out',
+  textAlign: 'left',
 }));
 
 const ExpandMoreIcon = styled(MuiExpandMoreIcon, {
@@ -24,8 +24,7 @@ interface Props {
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, densePadding, renderDetailPanel } =
-    useMaterialReactTable();
+  const { localization, densePadding, renderDetailPanel } = useMRT();
 
   return (
     <TableCell size="small" densePadding={densePadding} depth={row.depth}>

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+import FilterListIcon from '@mui/icons-material/Fullscreen';
+import FilterListOffIcon from '@mui/icons-material/FullscreenExit';
+
+type Props = {};
+
+export const MRT_FullScreenToggleButton: FC<Props> = () => {
+  const { localization, setFullScreen, fullScreen } = useMRT();
+
+  return (
+    <Tooltip arrow title={localization?.toggleFullScreenButtonTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleFilterButtonTitle}
+        onClick={() => setFullScreen(!fullScreen)}
+        size="small"
+      >
+        {fullScreen ? <FilterListOffIcon /> : <FilterListIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};