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

package/dist/esm/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/index.d.ts

@@ -19,11 +19,23 @@ import { TableProps } from '@mui/material/Table';
 import { TableRowProps } from '@mui/material/TableRow';
 import { TextFieldProps } from '@mui/material/TextField';
 import { ToolbarProps } from '@mui/material/Toolbar';
-import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
+import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, AggregationFn, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options, VirtualItem } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 
+declare const MRT_AggregationFns: {
+    sum: _tanstack_table_core.AggregationFn<any>;
+    min: _tanstack_table_core.AggregationFn<any>;
+    max: _tanstack_table_core.AggregationFn<any>;
+    extent: _tanstack_table_core.AggregationFn<any>;
+    mean: _tanstack_table_core.AggregationFn<any>;
+    median: _tanstack_table_core.AggregationFn<any>;
+    unique: _tanstack_table_core.AggregationFn<any>;
+    uniqueCount: _tanstack_table_core.AggregationFn<any>;
+    count: _tanstack_table_core.AggregationFn<any>;
+};
+
 declare const MRT_FilterFns: {
     between: {
         <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;
@@ -308,7 +320,7 @@ declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState
     showProgressBars: boolean;
     showSkeletons: boolean;
 };
-declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
+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>;
@@ -365,6 +377,7 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
      * @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.
@@ -490,6 +503,8 @@ declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell<TData,
     column: MRT_Column<TData>;
     row: MRT_Row<TData>;
 };
+declare type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
+declare type MRT_AggregationFn<TData extends Record<string, any> = {}> = AggregationFn<TData> | MRT_AggregationOption;
 declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
 declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
@@ -721,7 +736,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         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>;
@@ -859,4 +874,4 @@ interface Props<TData extends Record<string, any> = {}> {
 }
 declare const MRT_ToolbarInternalButtons: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
 
-export { DensityState, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, MaterialReactTableProps, Virtualizer, MaterialReactTable as default };
+export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, MaterialReactTableProps, Virtualizer, MaterialReactTable as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.10",
+  "version": "1.3.0-beta.2",
   "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.",
@@ -47,17 +47,18 @@
     "format": "prettier -w .",
     "lint": "eslint .",
     "size": "size-limit",
+    "dev": "start-storybook -p 6006",
     "start": "start-storybook -p 6006",
     "storybook": "start-storybook -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.19.6",
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@faker-js/faker": "^7.5.0",
     "@mui/icons-material": "^5.10.6",
-    "@mui/material": "^5.10.7",
+    "@mui/material": "^5.10.10",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-typescript": "^8.5.0",
@@ -74,10 +75,10 @@
     "@storybook/react": "^6.5.12",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
+    "@typescript-eslint/eslint-plugin": "^5.40.1",
+    "@typescript-eslint/parser": "^5.40.1",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.24.0",
+    "eslint": "^8.26.0",
     "eslint-plugin-mui-path-imports": "^0.0.3",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
@@ -101,8 +102,8 @@
     "react": ">=17.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.5.13",
+    "@tanstack/match-sorter-utils": "8.5.14",
+    "@tanstack/react-table": "8.5.17",
     "react-virtual": "^2.10.4"
   }
-}
+}

package/src/MaterialReactTable.tsx

@@ -25,6 +25,7 @@ import type { TableRowProps } from '@mui/material/TableRow';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { ToolbarProps } from '@mui/material/Toolbar';
 import type {
+  AggregationFn,
   Cell,
   Column,
   ColumnDef,
@@ -244,7 +245,9 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
 
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   ColumnDef<TData, unknown>,
+  | 'accessorKey'
   | 'aggregatedCell'
+  | 'aggregationFn'
   | 'cell'
   | 'columns'
   | 'filterFn'
@@ -346,6 +349,7 @@ export 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.
@@ -554,6 +558,12 @@ export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
   row: MRT_Row<TData>;
 };
 
+export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
+
+export type MRT_AggregationFn<TData extends Record<string, any> = {}> =
+  | AggregationFn<TData>
+  | MRT_AggregationOption;
+
 export type MRT_SortingOption = LiteralUnion<
   string & keyof typeof MRT_SortingFns
 >;
@@ -928,7 +938,7 @@ export 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<{ [key: string]: MRT_FilterOption }>;
+    onColumnFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
     onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
     onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;

package/src/body/MRT_TableBodyCell.tsx

@@ -133,7 +133,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
     editingMode !== 'modal' &&
     (editingMode === 'table' ||
       editingRow?.id === row.id ||
-      editingCell?.id === cell.id);
+      editingCell?.id === cell.id) &&
+    !row.getIsGrouped();
 
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);

package/src/column.utils.ts

@@ -1,4 +1,9 @@
-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 { alpha, lighten } from '@mui/material/styles';
@@ -38,12 +43,15 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
 };
 
 export const prepareColumns = <TData extends Record<string, any> = {}>({
+  aggregationFns,
   columnDefs,
   columnFilterFns,
   defaultDisplayColumn,
   filterFns,
   sortingFns,
 }: {
+  aggregationFns: typeof MRT_AggregationFns &
+    MaterialReactTableProps<TData>['aggregationFns'];
   columnDefs: MRT_ColumnDef<TData>[];
   columnFilterFns: { [key: string]: MRT_FilterOption };
   defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
@@ -52,16 +60,21 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
     MaterialReactTableProps<TData>['sortingFns'];
 }): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
+    //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 (columnDef.columns?.length) {
       columnDef.columnDefType = 'group';
+      //recursively prepare columns if this is a group column
       columnDef.columns = prepareColumns({
+        aggregationFns,
         columnDefs: columnDef.columns,
         columnFilterFns,
         defaultDisplayColumn,
@@ -69,12 +82,28 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
         sortingFns,
       });
     } else if (columnDef.columnDefType === 'data') {
+      //assign aggregationFns if multiple aggregationFns are provided
+      if (Array.isArray(columnDef.aggregationFn)) {
+        const aggFns = columnDef.aggregationFn as string[];
+        columnDef.aggregationFn = (
+          columnId: string,
+          leafRows: Row<TData>[],
+          childRows: Row<TData>[],
+        ) =>
+          aggFns.map((fn) =>
+            aggregationFns[fn]?.(columnId, leafRows, childRows),
+          );
+      }
+
+      //assign filterFns
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
           filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
         (columnDef as MRT_DefinedColumnDef)._filterFn =
           columnFilterFns[columnDef.id];
       }
+
+      //assign sortingFns
       if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
         // @ts-ignore
         columnDef.sortingFn = sortingFns[columnDef.sortingFn];

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -65,7 +65,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
           {...iconButtonProps}
           sx={(theme) => ({
             height: '2rem',
-            m: '-6px -3px',
+            m: '-8px -4px',
             opacity: 0.5,
             transform: 'scale(0.85)',
             transition: 'opacity 150ms',

package/src/table/MRT_TableRoot.tsx

@@ -209,6 +209,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const columnDefs = useMemo(
     () =>
       prepareColumns({
+        aggregationFns: props.aggregationFns as any,
         columnDefs: [...displayColumns, ...props.columns],
         columnFilterFns: props.state?.columnFilterFns ?? columnFilterFns,
         defaultDisplayColumn: props.defaultDisplayColumn ?? {},
@@ -296,7 +297,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       tablePaperRef,
       topToolbarRef,
     },
-    setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
+    setColumnFilterFns: props.onColumnFilterFnsChange ?? setColumnFilterFns,
     setDensity: props.onDensityChange ?? setDensity,
     setDraggingColumn: props.onDraggingColumnChange ?? setDraggingColumn,
     setDraggingRow: props.onDraggingRowChange ?? setDraggingRow,