material-react-table 0.37.2 → 0.38.2

package/README.md

@@ -43,6 +43,7 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
  - [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
  - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features)
  - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
+ - [Aggregation/Grouping](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Aggregation features such as Sum, Average, Count, etc.)
  - [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
  - [Editing CRUD Table](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
  - [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
@@ -60,9 +61,9 @@ _All features can easily be enabled/disabled_
 
 - [x] < 37kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
+- [x] Aggregation and Grouping (Sum, Average, Count, etc.)
 - [x] Click To Copy Cell Values
 - [x] Column Action Dropdown Menu
-- [x] Column/Row Grouping (Group By and Aggregates)
 - [x] Column Hiding
 - [x] Column Ordering via Drag'n'Drop
 - [x] Column Pinning (Freeze Columns)

package/dist/cjs/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';
@@ -48,8 +48,8 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
     setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
     setDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
     setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
-    setEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
-    setEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
+    setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
+    setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
     setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
     setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | {
         id: string;
@@ -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/cjs/index.js

@@ -1053,11 +1053,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;
@@ -1066,7 +1069,7 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
         ' ',
         grouping.map((columnId, index) => (React__default["default"].createElement(React.Fragment, { key: `${index}-${columnId}` },
             index > 0 ? localization.thenBy : '',
-            React__default["default"].createElement(material.Chip, { color: "secondary", label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() })))))) : null;
+            React__default["default"].createElement(material.Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
     return (React__default["default"].createElement(material.Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
         React__default["default"].createElement(material.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)
@@ -1197,12 +1200,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 = material.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__default["default"].createElement(material.Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
@@ -1235,12 +1238,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 = material.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__default["default"].createElement(material.Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             bottomToolbarRef.current = ref;
@@ -1449,7 +1452,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
-            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '6rem' : 'auto', width: '100%', '&	.MuiSelect-icon': {
+            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '150px' : 'auto', width: '100%', '&	.MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1778,30 +1781,43 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
         })
         : columnDef.muiTableBodyCellEditTextFieldProps;
     const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
+    const saveRow = (newValue) => {
+        if (editingRow) {
+            setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: newValue }) }));
+        }
+    };
     const handleChange = (event) => {
         var _a;
         (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         setValue(event.target.value);
+        if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select) {
+            saveRow(event.target.value);
+        }
     };
     const handleBlur = (event) => {
         var _a;
         (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
-        if (editingRow) {
-            setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: value }) }));
-        }
+        saveRow(value);
         setEditingCell(null);
     };
+    const handleEnterKeyDown = (event) => {
+        var _a, _b;
+        (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
+        if (event.key === 'Enter') {
+            (_b = editInputRefs.current[column.id]) === null || _b === void 0 ? void 0 : _b.blur();
+        }
+    };
     if (columnDef.Edit) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
     }
-    return (React__default["default"].createElement(material.TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: cell.id, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
+    return (React__default["default"].createElement(material.TextField, Object.assign({ disabled: columnDef.enableEditing === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
                 editInputRefs.current[column.id] = inputRef;
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, onBlur: handleBlur, onChange: handleChange })));
+        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -1853,7 +1869,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__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsAggregated() && column.columnDef.aggregationFn
@@ -1865,7 +1881,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, }) => {
@@ -2001,10 +2024,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__default["default"].createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
             columnDef.enableClickToCopy !== false ? (React__default["default"].createElement(MRT_CopyButton, { cell: cell, table: table },
             React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
-        cell.getIsGrouped() && React__default["default"].createElement(React__default["default"].Fragment, null,
+        cell.getIsGrouped() && !columnDef.GroupedCell && (React__default["default"].createElement(React__default["default"].Fragment, null,
             " (", (_b = row.subRows) === null || _b === void 0 ? void 0 :
             _b.length,
-            ")")));
+            ")"))));
 };
 
 const MRT_TableDetailPanel = ({ row, table }) => {