material-react-table 0.38.1 → 0.38.4

package/dist/cjs/MaterialReactTable.d.ts

@@ -288,6 +288,7 @@ export declare 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/dist/cjs/body/MRT_EditRowModal.d.ts

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

package/dist/cjs/body/MRT_TableBodyRow.d.ts

@@ -4,6 +4,7 @@ interface Props {
     row: MRT_Row;
     rowIndex: number;
     table: MRT_TableInstance;
+    virtualRow?: any;
 }
 export declare const MRT_TableBodyRow: FC<Props>;
 export {};

package/dist/cjs/buttons/MRT_ColumnPinningButtons.d.ts

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

package/dist/cjs/buttons/MRT_EditActionButtons.d.ts

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

package/dist/cjs/buttons/MRT_FullScreenToggleButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ShowHideColumnsButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleDensePaddingButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleFiltersButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleGlobalFilterButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/index.js

@@ -263,7 +263,9 @@ const MRT_ExpandAllButton = ({ table }) => {
         : muiExpandAllButtonProps;
     return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expandAll },
         React__default["default"].createElement("span", null,
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) }),
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+                    ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
                 React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${getIsAllRowsExpanded()
                             ? -180
@@ -453,12 +455,14 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.move },
-        React__default["default"].createElement(material.IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { sx: Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
+        React__default["default"].createElement(material.IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
                 }, '&:active': {
                     cursor: 'grabbing',
-                } }, iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) }),
+                } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+                ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
+                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
             React__default["default"].createElement(DragHandleIcon, null))));
 };
 
@@ -1751,7 +1755,9 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
-    return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${material.alpha(theme.palette.common.black, 0.1)}`, backgroundColor: material.lighten(theme.palette.background.default, 0.04) }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)) }), headerGroup.headers.map((header, index) => (React__default["default"].createElement(MRT_TableHeadCell, { header: header, key: header.id || index, table: table })))));
+    return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${material.alpha(theme.palette.common.black, 0.1)}`, backgroundColor: material.lighten(theme.palette.background.default, 0.04) }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }), headerGroup.headers.map((header, index) => (React__default["default"].createElement(MRT_TableHeadCell, { header: header, key: header.id || index, table: table })))));
 };
 
 const MRT_TableHead = ({ table }) => {
@@ -1781,33 +1787,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) && editingRow) {
-            setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: 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: column.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, }) => {
@@ -1859,11 +1875,11 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
 };
 
 const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const { column, row } = cell;
     const { columnDef } = column;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsAggregated() && column.columnDef.aggregationFn
-        ? (_a = columnDef.AggregatedCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsAggregated() && columnDef.AggregatedCell
+        ? columnDef.AggregatedCell({
             cell,
             column,
             row,
@@ -1871,14 +1887,14 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         })
         : row.getIsGrouped() && !cell.getIsGrouped()
             ? null
-            : (cell.getIsGrouped() &&
-                ((_b = columnDef.GroupedCell) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+            : cell.getIsGrouped() && columnDef.GroupedCell
+                ? columnDef.GroupedCell({
                     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())));
+                })
+                : (_b = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : cell.renderValue()));
 };
 
 const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
@@ -2034,7 +2050,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: row.getIsExpanded() }, renderDetailPanel({ row, table }))))));
 };
 
-const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
+const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
     var _a, _b;
     const theme = material.useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel }, setHoveredRow, } = table;
@@ -2059,7 +2075,12 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
         }
         : undefined;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: rowRef }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 0.2s ease-in-out', '&:hover td': {
+        React__default["default"].createElement(material.TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: (node) => {
+                rowRef.current = node;
+                if (virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.measureRef) {
+                    virtualRow.measureRef = node;
+                }
+            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 0.2s ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${material.lighten(theme.palette.background.default, 0.12)}`
@@ -2139,7 +2160,7 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             const row = enableRowVirtualization
                 ? rows[rowOrVirtualRow.index]
                 : rowOrVirtualRow;
-            return (React__default["default"].createElement(MRT_TableBodyRow, { key: row.id, row: row, rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex, table: table }));
+            return (React__default["default"].createElement(MRT_TableBodyRow, { key: row.id, row: row, rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex, table: table, virtualRow: enableRowVirtualization ? rowOrVirtualRow : null }));
         }),
         enableRowVirtualization && paddingBottom > 0 && (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", { style: { height: `${paddingBottom}px` } })))));
@@ -2192,11 +2213,19 @@ const MRT_TableFooterRow = ({ footerGroup, table }) => {
 };
 
 const MRT_TableFooter = ({ table }) => {
-    const { getFooterGroups, options: { muiTableFooterProps }, } = table;
+    const { getFooterGroups, getState, options: { enableStickyFooter, muiTableFooterProps }, } = table;
+    const { isFullScreen } = getState();
     const tableFooterProps = muiTableFooterProps instanceof Function
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
-    return (React__default["default"].createElement(material.TableFooter, Object.assign({}, tableFooterProps), getFooterGroups().map((footerGroup) => (React__default["default"].createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
+    const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+    return (React__default["default"].createElement(material.TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ 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 === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
+            ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
+            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React__default["default"].createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
 };
 
 const MRT_Table = ({ tableContainerRef, table }) => {
@@ -2263,7 +2292,9 @@ const MRT_TablePaper = ({ table }) => {
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
-    return (React__default["default"].createElement(material.Paper, Object.assign({ elevation: 2 }, tablePaperProps, { sx: Object.assign({ transition: 'all 0.2s ease-in-out' }, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), { height: isFullScreen ? '100vh' : undefined, margin: isFullScreen ? '0' : undefined, maxHeight: isFullScreen ? '100vh' : undefined, maxWidth: isFullScreen ? '100vw' : undefined, padding: isFullScreen ? '0' : undefined, width: isFullScreen ? '100vw' : undefined }) }),
+    return (React__default["default"].createElement(material.Paper, Object.assign({ elevation: 2 }, tablePaperProps, { sx: (theme) => (Object.assign({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
+            ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
+            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), { height: isFullScreen ? '100vh' : undefined, margin: isFullScreen ? '0' : undefined, maxHeight: isFullScreen ? '100vh' : undefined, maxWidth: isFullScreen ? '100vw' : undefined, padding: isFullScreen ? '0' : undefined, width: isFullScreen ? '100vw' : undefined }) }),
         enableTopToolbar && React__default["default"].createElement(MRT_TopToolbar, { table: table }),
         React__default["default"].createElement(MRT_TableContainer, { table: table }),
         enableBottomToolbar && React__default["default"].createElement(MRT_BottomToolbar, { table: table })));