material-react-table 0.38.1 → 0.38.4

package/dist/esm/menus/MRT_FilterOptionMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
 export declare const internalFilterOptions: (localization: MRT_Localization) => {

package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
 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';
@@ -479,6 +480,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
+    enableStickyFooter?: boolean;
     enableStickyHeader?: boolean;
     enableTableFooter?: boolean;
     enableTableHead?: boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.38.1",
+  "version": "0.38.4",
   "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.",
@@ -78,7 +78,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^2.78.0",
+    "rollup": "^2.78.1",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^8.0.1",

package/src/MaterialReactTable.tsx

@@ -488,6 +488,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableRowSelection?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
+    enableStickyFooter?: boolean;
     enableStickyHeader?: boolean;
     enableTableFooter?: boolean;
     enableTableHead?: boolean;

package/src/body/MRT_TableBody.tsx

@@ -124,6 +124,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
               table={table}
+              virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
             />
           );
         },

package/src/body/MRT_TableBodyCellValue.tsx

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

package/src/body/MRT_TableBodyRow.tsx

@@ -8,9 +8,15 @@ interface Props {
   row: MRT_Row;
   rowIndex: number;
   table: MRT_TableInstance;
+  virtualRow?: any;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
+export const MRT_TableBodyRow: FC<Props> = ({
+  row,
+  rowIndex,
+  table,
+  virtualRow,
+}) => {
   const theme = useTheme();
   const {
     getIsSomeColumnsPinned,
@@ -31,7 +37,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
     }
   };
 
-  const rowRef = useRef<HTMLTableRowElement>(null);
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
 
   const draggingBorder =
     draggingRow?.id === row.id
@@ -52,7 +58,12 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
         onDragEnter={handleDragEnter}
         hover
         selected={row.getIsSelected()}
-        ref={rowRef}
+        ref={(node) => {
+          rowRef.current = node;
+          if (virtualRow?.measureRef) {
+            virtualRow.measureRef = node;
+          }
+        }}
         {...tableRowProps}
         sx={(theme) => ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -40,12 +40,14 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
           disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
           onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
           {...iconButtonProps}
-          sx={{
+          sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
             mt: density !== 'compact' ? '-0.25rem' : undefined,
-            ...iconButtonProps?.sx,
-          }}
+            ...(iconButtonProps?.sx instanceof Function
+              ? iconButtonProps?.sx(theme)
+              : (iconButtonProps?.sx as any)),
+          })}
         >
           <KeyboardDoubleArrowDownIcon
             style={{

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -37,7 +37,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
         onDragEnd={onDragEnd}
         size="small"
         {...iconButtonProps}
-        sx={{
+        sx={(theme) => ({
           cursor: 'grab',
           m: 0,
           opacity: 0.5,
@@ -50,8 +50,10 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
           '&:active': {
             cursor: 'grabbing',
           },
-          ...iconButtonProps?.sx,
-        }}
+          ...(iconButtonProps?.sx instanceof Function
+            ? iconButtonProps?.sx(theme)
+            : (iconButtonProps?.sx as any)),
+        })}
       >
         <DragHandleIcon />
       </IconButton>

package/src/footer/MRT_TableFooter.tsx

@@ -10,16 +10,36 @@ interface Props {
 export const MRT_TableFooter: FC<Props> = ({ table }) => {
   const {
     getFooterGroups,
-    options: { muiTableFooterProps },
+    getState,
+    options: { enableStickyFooter, muiTableFooterProps },
   } = table;
+  const { isFullScreen } = getState();
 
   const tableFooterProps =
     muiTableFooterProps instanceof Function
       ? muiTableFooterProps({ table })
       : muiTableFooterProps;
 
+  const stickFooter =
+    (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+
   return (
-    <TableFooter {...tableFooterProps}>
+    <TableFooter
+      {...tableFooterProps}
+      sx={(theme) => ({
+        position: stickFooter ? 'sticky' : undefined,
+        bottom: stickFooter ? 0 : undefined,
+        opacity: stickFooter ? 0.95 : undefined,
+        outline: stickFooter
+          ? theme.palette.mode === 'light'
+            ? `1px solid ${theme.palette.grey[300]}`
+            : `1px solid ${theme.palette.grey[700]}`
+          : undefined,
+        ...(tableFooterProps?.sx instanceof Function
+          ? tableFooterProps?.sx(theme)
+          : (tableFooterProps?.sx as any)),
+      })}
+    >
       {getFooterGroups().map((footerGroup) => (
         <MRT_TableFooterRow
           footerGroup={footerGroup as any}

package/src/head/MRT_TableHeadRow.tsx

@@ -24,7 +24,9 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
       sx={(theme) => ({
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         backgroundColor: lighten(theme.palette.background.default, 0.04),
-        ...(tableRowProps?.sx as any),
+        ...(tableRowProps?.sx instanceof Function
+          ? tableRowProps?.sx(theme)
+          : (tableRowProps?.sx as any)),
       })}
     >
       {headerGroup.headers.map((header: MRT_Header, index) => (

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,31 +52,36 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    textFieldProps.onChange?.(event);
-    setValue(event.target.value);
-    if (textFieldProps?.select && editingRow) {
+  const saveRow = (newValue: string) => {
+    if (editingRow) {
       setEditingRow({
         ...editingRow,
-        _valuesCache: {
-          ...editingRow._valuesCache,
-          [column.id]: event.target.value,
-        },
+        _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 },
-      });
-    }
+    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 })}</>;
   }
@@ -79,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={column.id}
-      onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-      placeholder={columnDef.header}
-      value={value}
-      variant="standard"
-      {...textFieldProps}
       inputRef={(inputRef) => {
         if (inputRef) {
           editInputRefs.current[column.id] = inputRef;
@@ -95,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/table/MRT_TablePaper.tsx

@@ -35,10 +35,12 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
     <Paper
       elevation={2}
       {...tablePaperProps}
-      sx={{
+      sx={(theme) => ({
         transition: 'all 0.2s ease-in-out',
-        ...tablePaperProps?.sx,
-      }}
+        ...(tablePaperProps?.sx instanceof Function
+          ? tablePaperProps?.sx(theme)
+          : (tablePaperProps?.sx as any)),
+      })}
       style={{
         ...tablePaperProps?.style,
         height: isFullScreen ? '100vh' : undefined,