material-react-table 1.2.10 → 1.3.0-beta.1

package/dist/cjs/table/MRT_TableRoot.d.ts

@@ -181,7 +181,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
         values: Record<(string & Record<never, never>) | (string & import("@tanstack/table-core").DeepKeys<TData>), any>;
     }) => void | Promise<void>) | undefined;
     onEditingRowChange?: import("@tanstack/table-core").OnChangeFn<MRT_Row<TData> | null> | undefined;
-    onFilterFnsChange?: import("@tanstack/table-core").OnChangeFn<{
+    onColumnFilterFnsChange?: import("@tanstack/table-core").OnChangeFn<{
         [key: string]: MRT_FilterOption;
     }> | undefined;
     onGlobalFilterFnChange?: import("@tanstack/table-core").OnChangeFn<MRT_FilterOption> | undefined;

package/dist/esm/MaterialReactTable.d.ts

@@ -18,8 +18,9 @@ import type { TableProps } from '@mui/material/Table';
 import type { TableRowProps } from '@mui/material/TableRow';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { ToolbarProps } from '@mui/material/Toolbar';
-import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
+import type { AggregationFn, Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
+import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_Icons } from './icons';
 import { MRT_SortingFns } from './sortingFns';
@@ -196,7 +197,7 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
     showProgressBars: boolean;
     showSkeletons: boolean;
 };
-export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
+export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
     AggregatedCell?: ({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
@@ -253,6 +254,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      * @example accessorKey: 'name.firstName' //deep key dot notation
      */
     accessorKey?: DeepKeys<TData>;
+    aggregationFn?: MRT_AggregationFn<TData> | Array<MRT_AggregationFn<TData>>;
     /**
      * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
      * Leave this blank if you are just creating a normal data column.
@@ -378,6 +380,8 @@ export declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell
     column: MRT_Column<TData>;
     row: MRT_Row<TData>;
 };
+export declare type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
+export declare type MRT_AggregationFn<TData extends Record<string, any> = {}> = AggregationFn<TData> | MRT_AggregationOption;
 export declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
 export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 export declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
@@ -609,7 +613,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
     onEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
-    onFilterFnsChange?: OnChangeFn<{
+    onColumnFilterFnsChange?: OnChangeFn<{
         [key: string]: MRT_FilterOption;
     }>;
     onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;

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

@@ -1,4 +1,5 @@
-import type { ColumnOrderState, GroupingState } from '@tanstack/react-table';
+import type { ColumnOrderState, GroupingState, Row } from '@tanstack/react-table';
+import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 import type { TableCellProps } from '@mui/material/TableCell';
@@ -6,7 +7,18 @@ import type { Theme } from '@mui/material/styles';
 import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
-export declare const prepareColumns: <TData extends Record<string, any> = {}>({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
+export declare const prepareColumns: <TData extends Record<string, any> = {}>({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
+    aggregationFns: {
+        sum: import("@tanstack/table-core").AggregationFn<any>;
+        min: import("@tanstack/table-core").AggregationFn<any>;
+        max: import("@tanstack/table-core").AggregationFn<any>;
+        extent: import("@tanstack/table-core").AggregationFn<any>;
+        mean: import("@tanstack/table-core").AggregationFn<any>;
+        median: import("@tanstack/table-core").AggregationFn<any>;
+        unique: import("@tanstack/table-core").AggregationFn<any>;
+        uniqueCount: import("@tanstack/table-core").AggregationFn<any>;
+        count: import("@tanstack/table-core").AggregationFn<any>;
+    } & Record<string, import("@tanstack/table-core").AggregationFn<any>>;
     columnDefs: MRT_ColumnDef<TData>[];
     columnFilterFns: {
         [key: string]: MRT_FilterOption;
@@ -14,59 +26,59 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>({
     defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
     filterFns: {
         between: {
-            <TData_1 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
+            <TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
             autoRemove(val: any): boolean;
         };
         betweenInclusive: {
-            <TData_2 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_2>, id: string, filterValues: [string | number, string | number]): boolean;
+            <TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, filterValues: [string | number, string | number]): boolean;
             autoRemove(val: any): boolean;
         };
         contains: {
-            <TData_3 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_3>, id: string, filterValue: string | number): boolean;
+            <TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         empty: {
-            <TData_4 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_4>, id: string, _filterValue: string | number): boolean;
+            <TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, _filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         endsWith: {
-            <TData_5 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_5>, id: string, filterValue: string | number): boolean;
+            <TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         equals: {
-            <TData_6 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_6>, id: string, filterValue: string | number): boolean;
+            <TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         fuzzy: {
-            <TData_7 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_7>, columnId: string, filterValue: string | number, addMeta: (item: import("@tanstack/match-sorter-utils").RankingInfo) => void): boolean;
+            <TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, columnId: string, filterValue: string | number, addMeta: (item: import("@tanstack/match-sorter-utils").RankingInfo) => void): boolean;
             autoRemove(val: any): boolean;
         };
         greaterThan: {
-            <TData_8 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_8>, id: string, filterValue: string | number): boolean;
+            <TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         greaterThanOrEqualTo: {
-            <TData_9 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_9>, id: string, filterValue: string | number): boolean;
+            <TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         lessThan: {
-            <TData_10 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_10>, id: string, filterValue: string | number): boolean;
+            <TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         lessThanOrEqualTo: {
-            <TData_11 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_11>, id: string, filterValue: string | number): boolean;
+            <TData_11 extends Record<string, any> = {}>(row: Row<TData_11>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         notEmpty: {
-            <TData_12 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_12>, id: string, _filterValue: string | number): boolean;
+            <TData_12 extends Record<string, any> = {}>(row: Row<TData_12>, id: string, _filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         notEquals: {
-            <TData_13 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_13>, id: string, filterValue: string | number): boolean;
+            <TData_13 extends Record<string, any> = {}>(row: Row<TData_13>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         startsWith: {
-            <TData_14 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_14>, id: string, filterValue: string | number): boolean;
+            <TData_14 extends Record<string, any> = {}>(row: Row<TData_14>, id: string, filterValue: string | number): boolean;
             autoRemove(val: any): boolean;
         };
         includesString: import("@tanstack/table-core").FilterFn<any>;
@@ -79,7 +91,7 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>({
         inNumberRange: import("@tanstack/table-core").FilterFn<any>;
     } & Record<string, import("@tanstack/table-core").FilterFn<any>>;
     sortingFns: {
-        fuzzy: <TData_15 extends Record<string, any> = {}>(rowA: import("@tanstack/table-core").Row<TData_15>, rowB: import("@tanstack/table-core").Row<TData_15>, columnId: string) => number;
+        fuzzy: <TData_15 extends Record<string, any> = {}>(rowA: Row<TData_15>, rowB: Row<TData_15>, columnId: string) => number;
         alphanumeric: import("@tanstack/table-core").SortingFn<any>;
         alphanumericCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
         text: import("@tanstack/table-core").SortingFn<any>;

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

@@ -121,18 +121,22 @@ const getAllLeafColumnDefs = (columns) => {
     getLeafColumns(columns);
     return allLeafColumnDefs;
 };
-const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
+const prepareColumns = ({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
     var _a, _b;
+    //assign columnId
     if (!columnDef.id)
         columnDef.id = getColumnId(columnDef);
     if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
         console.error('Column definitions must have a valid `accessorKey` or `id` property');
     }
+    //assign columnDefType
     if (!columnDef.columnDefType)
         columnDef.columnDefType = 'data';
     if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
         columnDef.columnDefType = 'group';
+        //recursively prepare columns if this is a group column
         columnDef.columns = prepareColumns({
+            aggregationFns,
             columnDefs: columnDef.columns,
             columnFilterFns,
             defaultDisplayColumn,
@@ -141,12 +145,19 @@ const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, fil
         });
     }
     else if (columnDef.columnDefType === 'data') {
+        //assign aggregationFns if multiple aggregationFns are provided
+        if (Array.isArray(columnDef.aggregationFn)) {
+            const aggFns = columnDef.aggregationFn;
+            columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
+        }
+        //assign filterFns
         if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
             columnDef.filterFn =
                 (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
             columnDef._filterFn =
                 columnFilterFns[columnDef.id];
         }
+        //assign sortingFns
         if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
             // @ts-ignore
             columnDef.sortingFn = sortingFns[columnDef.sortingFn];
@@ -1428,7 +1439,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-6px -3px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -2146,7 +2157,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table
         editingMode !== 'modal' &&
         (editingMode === 'table' ||
             (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
-            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id);
+            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
+        !row.getIsGrouped();
     const handleDoubleClick = (event) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
@@ -2632,6 +2644,7 @@ const MRT_TableRoot = (props) => {
     const columnDefs = useMemo(() => {
         var _a, _b, _c;
         return prepareColumns({
+            aggregationFns: props.aggregationFns,
             columnDefs: [...displayColumns, ...props.columns],
             columnFilterFns: (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
             defaultDisplayColumn: (_c = props.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
@@ -2686,7 +2699,7 @@ const MRT_TableRoot = (props) => {
             tableHeadCellRefs,
             tablePaperRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_x = props.onFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
+        }, setColumnFilterFns: (_x = props.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }