material-react-table 0.37.0 → 0.38.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
-import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
+import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
@@ -304,6 +304,12 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         footer: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode);
+    GroupedCell?: ({ cell, column, row, table, }: {
+        cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     Header?: ReactNode | (({ column, header, table, }: {
         column: MRT_Column<TData>;
         header: MRT_Header<TData>;
@@ -483,6 +489,9 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     icons?: Partial<MRT_Icons>;
     initialState?: Partial<MRT_TableState<TData>>;
     localization?: Partial<MRT_Localization>;
+    muiBottomToolbarProps?: ToolbarProps | (({ table }: {
+        table: MRT_TableInstance<TData>;
+    }) => ToolbarProps);
     muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => IconButtonProps);
@@ -537,9 +546,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => TableRowProps);
-    muiTableBottomToolbarProps?: ToolbarProps | (({ table }: {
-        table: MRT_TableInstance<TData>;
-    }) => ToolbarProps);
     muiTableContainerProps?: TableContainerProps | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => TableContainerProps);
@@ -591,10 +597,13 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     muiTableProps?: TableProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => TableProps);
-    muiTableToolbarAlertBannerProps?: AlertProps | (({ table }: {
+    muiToolbarAlertBannerChipProps?: ChipProps | (({ table }: {
+        table: MRT_TableInstance<TData>;
+    }) => ChipProps);
+    muiToolbarAlertBannerProps?: AlertProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => AlertProps);
-    muiTableTopToolbarProps?: ToolbarProps | (({ table }: {
+    muiTopToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
     onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
@@ -607,13 +616,13 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
     onEditingRowSave?: ({ exitEditingMode, row, table, values, }: {
         exitEditingMode: () => void;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
-    onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
     onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onFilterFnsChange?: OnChangeFn<{
         [key: string]: MRT_FilterOption;
@@ -650,7 +659,8 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode[];
-    renderRowActions?: ({ row, table, }: {
+    renderRowActions?: ({ cell, row, table, }: {
+        cell: MRT_Cell<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -670,6 +680,13 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
 };
 declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
+interface Props$6<TData extends Record<string, any> = {}> {
+    cell: MRT_Cell<TData>;
+    children: ReactNode;
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_CopyButton: <TData extends Record<string, any> = {}>({ cell, children, table, }: Props$6<TData>) => JSX.Element;
+
 interface Props$5<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
@@ -700,4 +717,4 @@ interface Props<TData extends Record<string, any> = {}> extends IconButtonProps
 }
 declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props<TData>) => JSX.Element;
 
-export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };
+export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.37.0",
+  "version": "0.38.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.4.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.0",
+    "@mui/material": "^5.10.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
@@ -71,14 +71,14 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.21.0",
+    "eslint": "^8.22.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^2.77.3",
+    "rollup": "^2.78.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^8.0.1",

package/src/MaterialReactTable.tsx

@@ -9,6 +9,7 @@ import type {
   AlertProps,
   ButtonProps,
   CheckboxProps,
+  ChipProps,
   IconButtonProps,
   LinearProgressProps,
   PaperProps,
@@ -207,6 +208,17 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
         footer: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
       }) => ReactNode);
+  GroupedCell?: ({
+    cell,
+    column,
+    row,
+    table,
+  }: {
+    cell: MRT_Cell<TData>;
+    column: MRT_Column<TData>;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) => ReactNode;
   Header?:
     | ReactNode
     | (({
@@ -486,6 +498,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     icons?: Partial<MRT_Icons>;
     initialState?: Partial<MRT_TableState<TData>>;
     localization?: Partial<MRT_Localization>;
+    muiBottomToolbarProps?:
+      | ToolbarProps
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
     muiExpandAllButtonProps?:
       | IconButtonProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => IconButtonProps);
@@ -590,9 +605,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           row: MRT_Row<TData>;
         }) => TableRowProps);
-    muiTableBottomToolbarProps?:
-      | ToolbarProps
-      | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
     muiTableContainerProps?:
       | TableContainerProps
       | (({
@@ -693,10 +705,13 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableProps?:
       | TableProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => TableProps);
-    muiTableToolbarAlertBannerProps?:
+    muiToolbarAlertBannerChipProps?:
+      | ChipProps
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ChipProps);
+    muiToolbarAlertBannerProps?:
       | AlertProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => AlertProps);
-    muiTableTopToolbarProps?:
+    muiTopToolbarProps?:
       | ToolbarProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
     onColumnDrop?: ({
@@ -711,6 +726,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
     onEditingRowSave?: ({
       exitEditingMode,
       row,
@@ -722,7 +738,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       table: MRT_TableInstance<TData>;
       values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
-    onEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
     onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
     onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
@@ -769,9 +784,11 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       table: MRT_TableInstance<TData>;
     }) => ReactNode[];
     renderRowActions?: ({
+      cell,
       row,
       table,
     }: {
+      cell: MRT_Cell<TData>;
       row: MRT_Row<TData>;
       table: MRT_TableInstance<TData>;
     }) => ReactNode;

package/src/body/MRT_TableBodyCell.tsx

@@ -18,6 +18,7 @@ import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
+import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
 
 interface Props {
   cell: MRT_Cell;
@@ -282,27 +283,16 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
-          <>
-            <MRT_CopyButton cell={cell} table={table}>
-              <>
-                {row.getIsGrouped() && !cell.getIsGrouped()
-                  ? null
-                  : columnDef?.Cell?.({ cell, column, row, table }) ??
-                    cell.renderValue()}
-              </>
-            </MRT_CopyButton>
-            {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
-          </>
+          <MRT_CopyButton cell={cell} table={table}>
+            <MRT_TableBodyCellValue cell={cell} table={table} />
+          </MRT_CopyButton>
         ) : (
-          <>
-            {row.getIsGrouped() && !cell.getIsGrouped()
-              ? null
-              : columnDef?.Cell?.({ cell, column, row, table }) ??
-                cell.renderValue()}
-            {cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
-          </>
+          <MRT_TableBodyCellValue cell={cell} table={table} />
         )}
       </>
+      {cell.getIsGrouped() && !columnDef.GroupedCell && (
+        <> ({row.subRows?.length})</>
+      )}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyCellValue.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import { MRT_Cell, MRT_TableInstance } from '..';
+
+interface Props {
+  cell: MRT_Cell;
+  table: MRT_TableInstance;
+}
+
+export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
+  const { column, row } = cell;
+  const { columnDef } = column;
+
+  return (
+    <>
+      {cell.getIsAggregated() && column.columnDef.aggregationFn
+        ? columnDef.AggregatedCell?.({
+            cell,
+            column,
+            row,
+            table,
+          })
+        : row.getIsGrouped() && !cell.getIsGrouped()
+        ? null
+        : (cell.getIsGrouped() &&
+            columnDef.GroupedCell?.({
+              cell,
+              column,
+              row,
+              table,
+            })) ||
+          (columnDef?.Cell?.({ cell, column, row, table }) ??
+            cell.renderValue())}
+    </>
+  );
+};

package/src/buttons/MRT_CopyButton.tsx

@@ -1,14 +1,18 @@
-import React, { FC, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any> = {}> {
+  cell: MRT_Cell<TData>;
   children: ReactNode;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
+export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
+  cell,
+  children,
+  table,
+}: Props<TData>) => {
   const {
     options: { localization, muiTableBodyCellCopyButtonProps },
   } = table;

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 const commonIconButtonStyles = {
   height: '2rem',
@@ -16,11 +16,12 @@ const commonIconButtonStyles = {
 };
 
 interface Props {
+  cell: MRT_Cell
   row: MRT_Row;
   table: MRT_TableInstance;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ cell, row, table }) => {
   const {
     getState,
     options: {
@@ -52,12 +53,16 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
   return (
     <>
       {renderRowActions ? (
-        <>{renderRowActions({ row, table })}</>
+        <>{renderRowActions({ cell, row, table })}</>
       ) : row.id === editingRow?.id && editingMode === 'row' ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
-          <IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
+          <IconButton
+            aria-label={localization.edit}
+            sx={commonIconButtonStyles}
+            onClick={handleStartEditMode}
+          >
             <EditIcon />
           </IconButton>
         </Tooltip>

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { ColumnOrderState } from '@tanstack/react-table';
+import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -107,6 +107,16 @@ export const reorderColumn = <TData extends Record<string, any> = {}>(
   return [...columnOrder];
 };
 
+export const showExpandColumn = <TData extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<TData>,
+  grouping?: GroupingState,
+) =>
+  !!(
+    props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || grouping?.length)) ||
+    props.renderDetailPanel
+  );
+
 export const getLeadingDisplayColumnIds = <
   TData extends Record<string, any> = {},
 >(
@@ -119,9 +129,7 @@ export const getLeadingDisplayColumnIds = <
         ['row', 'modal'].includes(props.editingMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
-      (props.enableExpanding ||
-        props.enableGrouping ||
-        props.renderDetailPanel) &&
+      showExpandColumn(props) &&
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
@@ -137,9 +145,7 @@ export const getTrailingDisplayColumnIds = <
       ['row', 'modal'].includes(props.editingMode ?? ''))) &&
     'mrt-row-actions',
   props.positionExpandColumn === 'last' &&
-    (props.enableExpanding ||
-      props.enableGrouping ||
-      props.renderDetailPanel) &&
+    showExpandColumn(props) &&
     'mrt-row-expand',
 ];
 

package/src/head/MRT_TableHeadCell.tsx

@@ -70,7 +70,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
     }
-    if (enableColumnOrdering && draggingColumn) {
+    if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
       setHoveredColumn(
         columnDef.enableColumnOrdering !== false ? column : null,
       );
@@ -151,10 +151,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             ? 'sticky'
             : undefined,
         pt:
-          columnDefType === 'group'
-            ? 0
-            : density === 'compact'
-            ? '0.25'
+          columnDefType === 'group' || density === 'compact'
+            ? '0.25rem'
             : density === 'comfortable'
             ? '.75rem'
             : '1.25rem',

package/src/index.tsx

@@ -6,6 +6,7 @@ import type { MRT_Icons } from './icons';
 import type { MRT_Localization } from './localization';
 export type { MRT_Localization, MRT_Icons };
 
+import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
@@ -20,4 +21,5 @@ export {
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
+  MRT_CopyButton,
 };

package/src/table/MRT_TableRoot.tsx

@@ -9,6 +9,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
+  GroupingState,
 } from '@tanstack/react-table';
 import { Box, Dialog, Grow } from '@mui/material';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -22,6 +23,7 @@ import {
   getDefaultColumnOrderIds,
   getDefaultColumnFilterFn,
   defaultDisplayColumnDefOptions,
+  showExpandColumn,
 } from '../column.utils';
 import type {
   MRT_Cell,
@@ -95,6 +97,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
     initialState.globalFilterFn ?? 'fuzzy',
   );
+  const [grouping, setGrouping] = useState<GroupingState>(
+    initialState.grouping ?? [],
+  );
   const [hoveredColumn, setHoveredColumn] = useState<
     MRT_Column<TData> | { id: string } | null
   >(initialState.hoveredColumn ?? null);
@@ -126,8 +131,12 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-drag',
           },
           columnOrder.includes('mrt-row-actions') && {
-            Cell: ({ row }) => (
-              <MRT_ToggleRowActionMenuButton row={row as any} table={table} />
+            Cell: ({ cell, row }) => (
+              <MRT_ToggleRowActionMenuButton
+                cell={cell as any}
+                row={row as any}
+                table={table}
+              />
             ),
             header: props.localization?.actions,
             size: 70,
@@ -135,20 +144,21 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
             id: 'mrt-row-actions',
           },
-          columnOrder.includes('mrt-row-expand') && {
-            Cell: ({ row }) => (
-              <MRT_ExpandButton row={row as any} table={table} />
-            ),
-            Header: () =>
-              props.enableExpandAll ? (
-                <MRT_ExpandAllButton table={table} />
-              ) : null,
-            header: props.localization?.expand,
-            size: 60,
-            ...defaultDisplayColumnDefOptions,
-            ...props.displayColumnDefOptions?.['mrt-row-expand'],
-            id: 'mrt-row-expand',
-          },
+          columnOrder.includes('mrt-row-expand') &&
+            showExpandColumn(props, grouping) && {
+              Cell: ({ row }) => (
+                <MRT_ExpandButton row={row as any} table={table} />
+              ),
+              Header: () =>
+                props.enableExpandAll ? (
+                  <MRT_ExpandAllButton table={table} />
+                ) : null,
+              header: props.localization?.expand,
+              size: 60,
+              ...defaultDisplayColumnDefOptions,
+              ...props.displayColumnDefOptions?.['mrt-row-expand'],
+              id: 'mrt-row-expand',
+            },
           columnOrder.includes('mrt-row-select') && {
             Cell: ({ row }) => (
               <MRT_SelectCheckbox row={row as any} table={table} />
@@ -176,6 +186,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       ).filter(Boolean),
     [
       columnOrder,
+      grouping,
       props.displayColumnDefOptions,
       props.editingMode,
       props.enableColumnDragging,
@@ -192,6 +203,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.enableSelectAll,
       props.localization,
       props.positionActionsColumn,
+      props.renderDetailPanel,
     ],
   );
 
@@ -241,6 +253,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModel(),
       onColumnOrderChange: setColumnOrder,
+      onGroupingChange: setGrouping,
       getSubRows: (row) => row?.subRows,
       ...props,
       //@ts-ignore
@@ -258,6 +271,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         editingCell,
         editingRow,
         globalFilterFn,
+        grouping,
         hoveredColumn,
         hoveredRow,
         isFullScreen,

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -16,7 +16,7 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
     getState,
     options: {
       enablePagination,
-      muiTableBottomToolbarProps,
+      muiBottomToolbarProps,
       positionPagination,
       positionToolbarAlertBanner,
       positionToolbarDropZone,
@@ -29,9 +29,9 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
-    muiTableBottomToolbarProps instanceof Function
-      ? muiTableBottomToolbarProps({ table })
-      : muiTableBottomToolbarProps;
+    muiBottomToolbarProps instanceof Function
+      ? muiBottomToolbarProps({ table })
+      : muiBottomToolbarProps;
 
   const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
 
@@ -75,9 +75,7 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
         }}
       >
         {renderBottomToolbarCustomActions ? (
-          <Box sx={{ p: '0.5rem' }}>
-            {renderBottomToolbarCustomActions({ table })}
-          </Box>
+          renderBottomToolbarCustomActions({ table })
         ) : (
           <span />
         )}

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -15,14 +15,23 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
-    options: { localization, muiTableToolbarAlertBannerProps },
+    options: {
+      localization,
+      muiToolbarAlertBannerProps,
+      muiToolbarAlertBannerChipProps,
+    },
   } = table;
   const { grouping, showAlertBanner } = getState();
 
   const alertProps =
-    muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps({ table })
-      : muiTableToolbarAlertBannerProps;
+    muiToolbarAlertBannerProps instanceof Function
+      ? muiToolbarAlertBannerProps({ table })
+      : muiToolbarAlertBannerProps;
+
+  const chipProps =
+    muiToolbarAlertBannerChipProps instanceof Function
+      ? muiToolbarAlertBannerChipProps({ table })
+      : muiToolbarAlertBannerChipProps;
 
   const selectMessage =
     getSelectedRowModel().rows.length > 0
@@ -45,9 +54,9 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           <Fragment key={`${index}-${columnId}`}>
             {index > 0 ? localization.thenBy : ''}
             <Chip
-              color="secondary"
               label={table.getColumn(columnId).columnDef.header}
               onDelete={() => table.getColumn(columnId).toggleGrouping()}
+              {...chipProps}
             />
           </Fragment>
         ))}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -31,7 +31,7 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
       enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
-      muiTableTopToolbarProps,
+      muiTopToolbarProps,
       positionGlobalFilter,
       positionPagination,
       positionToolbarAlertBanner,
@@ -46,9 +46,9 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
-    muiTableTopToolbarProps instanceof Function
-      ? muiTableTopToolbarProps({ table })
-      : muiTableTopToolbarProps;
+    muiTopToolbarProps instanceof Function
+      ? muiTopToolbarProps({ table })
+      : muiTopToolbarProps;
 
   const stackAlertBanner =
     isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;