material-react-table 0.37.2 → 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;

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

@@ -1045,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;
@@ -1058,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)
@@ -1189,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;
@@ -1227,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;
@@ -1845,7 +1848,7 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
 };
 
 const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { column, row } = cell;
     const { columnDef } = column;
     return (React.createElement(React.Fragment, null, cell.getIsAggregated() && column.columnDef.aggregationFn
@@ -1857,7 +1860,14 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         })
         : 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() &&
+                ((_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, }) => {
@@ -1993,10 +2003,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                 !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(MRT_CopyButton, { cell: cell, table: table },
             React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
-        cell.getIsGrouped() && React.createElement(React.Fragment, null,
+        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 }) => {