material-react-table 0.37.2 → 0.38.2

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
-import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
+import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
@@ -239,8 +239,8 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
     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;
@@ -304,6 +304,12 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         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>;
@@ -483,6 +489,9 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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);
@@ -537,9 +546,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         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);
@@ -591,10 +597,13 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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, }: {
@@ -607,13 +616,13 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.37.2",
+  "version": "0.38.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.",

package/src/MaterialReactTable.tsx

@@ -9,6 +9,7 @@ import type {
   AlertProps,
   ButtonProps,
   CheckboxProps,
+  ChipProps,
   IconButtonProps,
   LinearProgressProps,
   PaperProps,
@@ -108,8 +109,8 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   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 } | null>
@@ -207,6 +208,17 @@ export 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
     | (({
@@ -486,6 +498,9 @@ export 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);
@@ -590,9 +605,6 @@ export 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
       | (({
@@ -693,10 +705,13 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableProps?:
       | TableProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => TableProps);
-    muiTableToolbarAlertBannerProps?:
+    muiToolbarAlertBannerChipProps?:
+      | ChipProps
+      | (({ table }: { table: MRT_TableInstance<TData> }) => ChipProps);
+    muiToolbarAlertBannerProps?:
       | AlertProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => AlertProps);
-    muiTableTopToolbarProps?:
+    muiTopToolbarProps?:
       | ToolbarProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
     onColumnDrop?: ({
@@ -711,6 +726,7 @@ export 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,
@@ -722,7 +738,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       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 }>;
     onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;

package/src/body/MRT_TableBodyCell.tsx

@@ -290,7 +290,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <MRT_TableBodyCellValue cell={cell} table={table} />
         )}
       </>
-      {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
+      {cell.getIsGrouped() && !columnDef.GroupedCell && (
+        <> ({row.subRows?.length})</>
+      )}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyCellValue.tsx

@@ -21,7 +21,15 @@ export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
           })
         : row.getIsGrouped() && !cell.getIsGrouped()
         ? null
-        : columnDef?.Cell?.({ cell, column, row, table }) ?? cell.renderValue()}
+        : (cell.getIsGrouped() &&
+            columnDef.GroupedCell?.({
+              cell,
+              column,
+              row,
+              table,
+            })) ||
+          (columnDef?.Cell?.({ cell, column, row, table }) ??
+            cell.renderValue())}
     </>
   );
 };

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,4 +1,10 @@
-import React, { ChangeEvent, FocusEvent, MouseEvent, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  useState,
+} from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 
@@ -46,22 +52,36 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
     ...mcTableBodyCellEditTextFieldProps,
   };
 
+  const saveRow = (newValue: string) => {
+    if (editingRow) {
+      setEditingRow({
+        ...editingRow,
+        _valuesCache: { ...editingRow._valuesCache, [column.id]: newValue },
+      });
+    }
+  };
+
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     textFieldProps.onChange?.(event);
     setValue(event.target.value);
+    if (textFieldProps?.select) {
+      saveRow(event.target.value);
+    }
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     textFieldProps.onBlur?.(event);
-    if (editingRow) {
-      setEditingRow({
-        ...editingRow,
-        _valuesCache: { ...editingRow._valuesCache, [column.id]: value },
-      } as any);
-    }
+    saveRow(value);
     setEditingCell(null);
   };
 
+  const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    textFieldProps.onKeyDown?.(event);
+    if (event.key === 'Enter') {
+      editInputRefs.current[column.id]?.blur();
+    }
+  };
+
   if (columnDef.Edit) {
     return <>{columnDef.Edit?.({ cell, column, row, table })}</>;
   }
@@ -70,14 +90,6 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
     <TextField
       disabled={columnDef.enableEditing === false}
       fullWidth
-      label={showLabel ? column.columnDef.header : undefined}
-      margin="none"
-      name={cell.id}
-      onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-      placeholder={columnDef.header}
-      value={value}
-      variant="standard"
-      {...textFieldProps}
       inputRef={(inputRef) => {
         if (inputRef) {
           editInputRefs.current[column.id] = inputRef;
@@ -86,8 +98,17 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
           }
         }
       }}
+      label={showLabel ? column.columnDef.header : undefined}
+      margin="none"
+      name={column.id}
+      onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
+      placeholder={columnDef.header}
+      value={value}
+      variant="standard"
+      {...textFieldProps}
       onBlur={handleBlur}
       onChange={handleChange}
+      onKeyDown={handleEnterKeyDown}
     />
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -299,7 +299,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         sx={(theme) => ({
           p: 0,
-          minWidth: !filterChipLabel ? '6rem' : 'auto',
+          minWidth: !filterChipLabel ? '150px' : 'auto',
           width: '100%',
           '&	.MuiSelect-icon': {
             mr: '1.5rem',

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -16,7 +16,7 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
     getState,
     options: {
       enablePagination,
-      muiTableBottomToolbarProps,
+      muiBottomToolbarProps,
       positionPagination,
       positionToolbarAlertBanner,
       positionToolbarDropZone,
@@ -29,9 +29,9 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
-    muiTableBottomToolbarProps instanceof Function
-      ? muiTableBottomToolbarProps({ table })
-      : muiTableBottomToolbarProps;
+    muiBottomToolbarProps instanceof Function
+      ? muiBottomToolbarProps({ table })
+      : muiBottomToolbarProps;
 
   const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
 

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -15,14 +15,23 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
-    options: { localization, muiTableToolbarAlertBannerProps },
+    options: {
+      localization,
+      muiToolbarAlertBannerProps,
+      muiToolbarAlertBannerChipProps,
+    },
   } = table;
   const { grouping, showAlertBanner } = getState();
 
   const alertProps =
-    muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps({ table })
-      : muiTableToolbarAlertBannerProps;
+    muiToolbarAlertBannerProps instanceof Function
+      ? muiToolbarAlertBannerProps({ table })
+      : muiToolbarAlertBannerProps;
+
+  const chipProps =
+    muiToolbarAlertBannerChipProps instanceof Function
+      ? muiToolbarAlertBannerChipProps({ table })
+      : muiToolbarAlertBannerChipProps;
 
   const selectMessage =
     getSelectedRowModel().rows.length > 0
@@ -45,9 +54,9 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           <Fragment key={`${index}-${columnId}`}>
             {index > 0 ? localization.thenBy : ''}
             <Chip
-              color="secondary"
               label={table.getColumn(columnId).columnDef.header}
               onDelete={() => table.getColumn(columnId).toggleGrouping()}
+              {...chipProps}
             />
           </Fragment>
         ))}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -31,7 +31,7 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
       enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
-      muiTableTopToolbarProps,
+      muiTopToolbarProps,
       positionGlobalFilter,
       positionPagination,
       positionToolbarAlertBanner,
@@ -46,9 +46,9 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
-    muiTableTopToolbarProps instanceof Function
-      ? muiTableTopToolbarProps({ table })
-      : muiTableTopToolbarProps;
+    muiTopToolbarProps instanceof Function
+      ? muiTopToolbarProps({ table })
+      : muiTopToolbarProps;
 
   const stackAlertBanner =
     isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;