material-react-table 0.37.0 → 0.38.0

package/dist/esm/MaterialReactTable.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, DragEvent, MutableRefObject, ReactNode, SetStateAction } from 'react';
-import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
+import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Icons } from './icons';
@@ -113,6 +113,12 @@ export declare 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 | (({ column, header, table, }: {
         column: MRT_Column<TData>;
         header: MRT_Header<TData>;
@@ -292,6 +298,9 @@ export declare 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);
@@ -346,9 +355,6 @@ export declare 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 | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => TableContainerProps);
@@ -400,10 +406,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     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, }: {
@@ -416,13 +425,13 @@ export declare 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, 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;
@@ -459,7 +468,8 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         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;

package/dist/esm/body/MRT_TableBodyCellValue.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { MRT_Cell, MRT_TableInstance } from '..';
+interface Props {
+    cell: MRT_Cell;
+    table: MRT_TableInstance;
+}
+export declare const MRT_TableBodyCellValue: FC<Props>;
+export {};

package/dist/esm/buttons/MRT_CopyButton.d.ts

@@ -1,9 +1,9 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 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 declare const MRT_CopyButton: FC<Props>;
+export declare const MRT_CopyButton: <TData extends Record<string, any> = {}>({ cell, children, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/buttons/MRT_ToggleRowActionMenuButton.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 interface Props {
+    cell: MRT_Cell;
     row: MRT_Row;
     table: MRT_TableInstance;
 }

package/dist/esm/column.utils.d.ts

@@ -1,4 +1,4 @@
-import { ColumnOrderState } from '@tanstack/react-table';
+import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
@@ -81,6 +81,7 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>(co
     basic: import("@tanstack/table-core").SortingFn<any>;
 } & Record<string, import("@tanstack/table-core").SortingFn<any>>) => MRT_DefinedColumnDef<TData>[];
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
+export declare const showExpandColumn: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>, grouping?: GroupingState) => boolean;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];

package/dist/esm/index.d.ts

@@ -4,10 +4,11 @@ export * from './MaterialReactTable';
 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';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
-export { MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, };
+export { MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_CopyButton, };

package/dist/esm/material-react-table.esm.js

@@ -521,6 +521,9 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
     return [...columnOrder];
 };
+const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+    props.renderDetailPanel);
 const getLeadingDisplayColumnIds = (props) => {
     var _a;
     return [
@@ -530,9 +533,7 @@ const getLeadingDisplayColumnIds = (props) => {
                 ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
             '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',
@@ -546,9 +547,7 @@ const getTrailingDisplayColumnIds = (props) => {
                 ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'last' &&
-            (props.enableExpanding ||
-                props.enableGrouping ||
-                props.renderDetailPanel) &&
+            showExpandColumn(props) &&
             'mrt-row-expand',
     ];
 };
@@ -916,7 +915,7 @@ const commonIconButtonStyles = {
         opacity: 1,
     },
 };
-const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
+const MRT_ToggleRowActionMenuButton = ({ cell, row, table }) => {
     const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { editingRow } = getState();
     const [anchorEl, setAnchorEl] = useState(null);
@@ -929,8 +928,8 @@ const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
-        React.createElement(IconButton, { sx: commonIconButtonStyles, onClick: handleStartEditMode },
+    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ cell, row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
+        React.createElement(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
             React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
             React.createElement(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
@@ -1046,11 +1045,14 @@ const MRT_TablePagination = ({ table, position }) => {
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     var _a, _b;
-    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiTableToolbarAlertBannerProps }, } = table;
+    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, }, } = table;
     const { grouping, showAlertBanner } = getState();
-    const alertProps = muiTableToolbarAlertBannerProps instanceof Function
-        ? muiTableToolbarAlertBannerProps({ table })
-        : muiTableToolbarAlertBannerProps;
+    const alertProps = muiToolbarAlertBannerProps instanceof Function
+        ? muiToolbarAlertBannerProps({ table })
+        : muiToolbarAlertBannerProps;
+    const chipProps = muiToolbarAlertBannerChipProps instanceof Function
+        ? muiToolbarAlertBannerChipProps({ table })
+        : muiToolbarAlertBannerChipProps;
     const selectMessage = getSelectedRowModel().rows.length > 0
         ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', getPrePaginationRowModel().rows.length.toString())
         : null;
@@ -1059,7 +1061,7 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
         ' ',
         grouping.map((columnId, index) => (React.createElement(Fragment, { key: `${index}-${columnId}` },
             index > 0 ? localization.thenBy : '',
-            React.createElement(Chip, { color: "secondary", label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() })))))) : null;
+            React.createElement(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
     return (React.createElement(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
         React.createElement(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
                 ? alertProps.sx(theme)
@@ -1190,12 +1192,12 @@ const commonToolbarStyles = ({ theme }) => ({
 });
 const MRT_TopToolbar = ({ table }) => {
     var _a;
-    const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTableTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
+    const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
     const { isFullScreen, showGlobalFilter } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
-    const toolbarProps = muiTableTopToolbarProps instanceof Function
-        ? muiTableTopToolbarProps({ table })
-        : muiTableTopToolbarProps;
+    const toolbarProps = muiTopToolbarProps instanceof Function
+        ? muiTopToolbarProps({ table })
+        : muiTopToolbarProps;
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
     return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
@@ -1228,12 +1230,12 @@ const MRT_TopToolbar = ({ table }) => {
 };
 
 const MRT_BottomToolbar = ({ table }) => {
-    const { getState, options: { enablePagination, muiTableBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
+    const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
-    const toolbarProps = muiTableBottomToolbarProps instanceof Function
-        ? muiTableBottomToolbarProps({ table })
-        : muiTableBottomToolbarProps;
+    const toolbarProps = muiBottomToolbarProps instanceof Function
+        ? muiBottomToolbarProps({ table })
+        : muiBottomToolbarProps;
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
     return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             bottomToolbarRef.current = ref;
@@ -1252,7 +1254,7 @@ const MRT_BottomToolbar = ({ table }) => {
                 justifyContent: 'space-between',
                 width: '100%',
             } },
-            renderBottomToolbarCustomActions ? (React.createElement(Box, { sx: { p: '0.5rem' } }, renderBottomToolbarCustomActions({ table }))) : (React.createElement("span", null)),
+            renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React.createElement("span", null)),
             React.createElement(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'flex-end',
@@ -1634,7 +1636,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
         }
-        if (enableColumnOrdering && draggingColumn) {
+        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
@@ -1684,13 +1686,11 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         ? '0.4rem'
                         : '0.6rem', position: column.getIsPinned() && columnDefType !== 'group'
                     ? 'sticky'
-                    : undefined, pt: columnDefType === 'group'
-                    ? 0
-                    : density === 'compact'
-                        ? '0.25'
-                        : density === 'comfortable'
-                            ? '.75rem'
-                            : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+                    : undefined, pt: columnDefType === 'group' || density === 'compact'
+                    ? '0.25rem'
+                    : density === 'comfortable'
+                        ? '.75rem'
+                        : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
                     ? 3
                     : column.getIsPinned() && columnDefType !== 'group'
                         ? 2
@@ -1799,7 +1799,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
         }, onBlur: handleBlur, onChange: handleChange })));
 };
 
-const MRT_CopyButton = ({ cell, children, table }) => {
+const MRT_CopyButton = ({ cell, children, table, }) => {
     const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
@@ -1847,8 +1847,31 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
     return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
+const MRT_TableBodyCellValue = ({ cell, table }) => {
+    var _a, _b, _c, _d;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    return (React.createElement(React.Fragment, null, cell.getIsAggregated() && column.columnDef.aggregationFn
+        ? (_a = columnDef.AggregatedCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+            cell,
+            column,
+            row,
+            table,
+        })
+        : row.getIsGrouped() && !cell.getIsGrouped()
+            ? null
+            : (cell.getIsGrouped() &&
+                ((_b = columnDef.GroupedCell) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+                    cell,
+                    column,
+                    row,
+                    table,
+                }))) ||
+                ((_d = (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : cell.renderValue())));
+};
+
 const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
-    var _a, _b, _c, _d, _f, _g, _h, _j;
+    var _a, _b;
     const theme = useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
@@ -1978,21 +2001,12 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             (column.id === 'mrt-row-select' ||
                 column.id === 'mrt-row-expand' ||
                 !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-            columnDef.enableClickToCopy !== false ? (React.createElement(React.Fragment, null,
-            React.createElement(MRT_CopyButton, { cell: cell, table: table },
-                React.createElement(React.Fragment, null, row.getIsGrouped() && !cell.getIsGrouped()
-                    ? null
-                    : (_c = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table })) !== null && _c !== void 0 ? _c : cell.renderValue())),
-            cell.getIsGrouped() && React.createElement(React.Fragment, null,
-                " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
-                _d.length,
-                ")"))) : (React.createElement(React.Fragment, null,
-            row.getIsGrouped() && !cell.getIsGrouped()
-                ? null
-                : (_g = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _f === void 0 ? void 0 : _f.call(columnDef, { cell, column, row, table })) !== null && _g !== void 0 ? _g : cell.renderValue(),
-            cell.getIsGrouped() && React.createElement(React.Fragment, null,
-                " (", (_j = (_h = row.subRows) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : '',
-                ")"))))));
+            columnDef.enableClickToCopy !== false ? (React.createElement(MRT_CopyButton, { cell: cell, table: table },
+            React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
+        cell.getIsGrouped() && !columnDef.GroupedCell && (React.createElement(React.Fragment, null,
+            " (", (_b = row.subRows) === null || _b === void 0 ? void 0 :
+            _b.length,
+            ")"))));
 };
 
 const MRT_TableDetailPanel = ({ row, table }) => {
@@ -2263,7 +2277,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
 };
 
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
     const bottomToolbarRef = useRef(null);
     const editInputRefs = useRef({});
     const filterInputRefs = useRef({});
@@ -2296,23 +2310,26 @@ const MRT_TableRoot = (props) => {
     const [editingCell, setEditingCell] = useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
     const [editingRow, setEditingRow] = useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
     const [globalFilterFn, setGlobalFilterFn] = useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
-    const [hoveredColumn, setHoveredColumn] = useState((_h = initialState.hoveredColumn) !== null && _h !== void 0 ? _h : null);
-    const [hoveredRow, setHoveredRow] = useState((_j = initialState.hoveredRow) !== null && _j !== void 0 ? _j : null);
-    const [isFullScreen, setIsFullScreen] = useState((_k = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _k !== void 0 ? _k : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_m = (_l = props.initialState) === null || _l === void 0 ? void 0 : _l.showAlertBanner) !== null && _m !== void 0 ? _m : false);
-    const [showColumnFilters, setShowFilters] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _o !== void 0 ? _o : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _p !== void 0 ? _p : false);
+    const [grouping, setGrouping] = useState((_h = initialState.grouping) !== null && _h !== void 0 ? _h : []);
+    const [hoveredColumn, setHoveredColumn] = useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
+    const [hoveredRow, setHoveredRow] = useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
+    const [isFullScreen, setIsFullScreen] = useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
+    const [showColumnFilters, setShowFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const displayColumns = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
             columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, defaultDisplayColumnDefOptions), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, defaultDisplayColumnDefOptions), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            columnOrder.includes('mrt-row-expand') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, defaultDisplayColumnDefOptions), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            columnOrder.includes('mrt-row-expand') &&
+                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
             columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, defaultDisplayColumnDefOptions), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
             columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, defaultDisplayColumnDefOptions), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [
         columnOrder,
+        grouping,
         props.displayColumnDefOptions,
         props.editingMode,
         props.enableColumnDragging,
@@ -2329,6 +2346,7 @@ const MRT_TableRoot = (props) => {
         props.enableSelectAll,
         props.localization,
         props.positionActionsColumn,
+        props.renderDetailPanel,
     ]);
     const columnDefs = useMemo(() => prepareColumns([...displayColumns, ...props.columns], columnFilterFns, props.filterFns, props.sortingFns), [columnFilterFns, displayColumns, props.columns]);
     const data = useMemo(() => {
@@ -2346,11 +2364,11 @@ const MRT_TableRoot = (props) => {
                 });
             })))
             : props.data;
-    }, [props.data, (_q = props.state) === null || _q === void 0 ? void 0 : _q.isLoading, (_r = props.state) === null || _r === void 0 ? void 0 : _r.showSkeletons]);
+    }, [props.data, (_r = props.state) === null || _r === void 0 ? void 0 : _r.isLoading, (_s = props.state) === null || _s === void 0 ? void 0 : _s.showSkeletons]);
     //@ts-ignore
-    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
+    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_t = (_s = props.filterFns) === null || _s === void 0 ? void 0 : _s[globalFilterFn]) !== null && _t !== void 0 ? _t : (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+        columns: columnDefs, data, globalFilterFn: (_u = (_t = props.filterFns) === null || _t === void 0 ? void 0 : _t[globalFilterFn]) !== null && _u !== void 0 ? _u : (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
             density,
             draggingColumn,
@@ -2358,6 +2376,7 @@ const MRT_TableRoot = (props) => {
             editingCell,
             editingRow,
             globalFilterFn,
+            grouping,
             hoveredColumn,
             hoveredRow,
             isFullScreen,
@@ -2370,7 +2389,7 @@ const MRT_TableRoot = (props) => {
             searchInputRef,
             tableContainerRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_v = props.onFilterFnsChange) !== null && _v !== void 0 ? _v : setColumnFilterFns, setDensity: (_w = props.onDensityChange) !== null && _w !== void 0 ? _w : setDensity, setDraggingColumn: (_x = props.onDraggingColumnChange) !== null && _x !== void 0 ? _x : setDraggingColumn, setDraggingRow: (_y = props.onDraggingRowChange) !== null && _y !== void 0 ? _y : setDraggingRow, setEditingCell: (_z = props.onEditingCellChange) !== null && _z !== void 0 ? _z : setEditingCell, setEditingRow: (_0 = props.onEditingRowChange) !== null && _0 !== void 0 ? _0 : setEditingRow, setGlobalFilterFn: (_1 = props.onGlobalFilterFnChange) !== null && _1 !== void 0 ? _1 : setGlobalFilterFn, setHoveredColumn: (_2 = props.onHoveredColumnChange) !== null && _2 !== void 0 ? _2 : setHoveredColumn, setHoveredRow: (_3 = props.onHoveredRowChange) !== null && _3 !== void 0 ? _3 : setHoveredRow, setIsFullScreen: (_4 = props.onIsFullScreenChange) !== null && _4 !== void 0 ? _4 : setIsFullScreen, setShowAlertBanner: (_5 = props.onShowAlertBannerChange) !== null && _5 !== void 0 ? _5 : setShowAlertBanner, setShowFilters: (_6 = props.onShowFiltersChange) !== null && _6 !== void 0 ? _6 : setShowFilters, setShowGlobalFilter: (_7 = props.onShowGlobalFilterChange) !== null && _7 !== void 0 ? _7 : setShowGlobalFilter });
+        }, setColumnFilterFns: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : setShowGlobalFilter });
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),
@@ -2383,5 +2402,5 @@ var MaterialReactTable = (_a) => {
     return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilterChangeMode: enableColumnFilterChangeMode, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterChangeMode: enableGlobalFilterChangeMode, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
 };
 
-export { MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };
+export { MRT_CopyButton, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };
 //# sourceMappingURL=material-react-table.esm.js.map