material-react-table 1.9.4 → 1.10.0

package/dist/cjs/types/MaterialReactTable.d.ts

@@ -567,6 +567,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
     muiTableBodyRowProps?: TableRowProps | ((props: {
         isDetailPanel?: boolean;
         row: MRT_Row<TData>;
+        staticRowIndex: number;
         table: MRT_TableInstance<TData>;
     }) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | ((props: {
@@ -691,6 +692,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
     }) => ReactNode[];
+    renderEmptyRowsFallback?: (props: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     renderRowActionMenuItems?: (props: {
         closeMenu: () => void;
         row: MRT_Row<TData>;

package/dist/cjs/types/body/MRT_TableDetailPanel.d.ts

@@ -4,8 +4,9 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     parentRowRef: React.RefObject<HTMLTableRowElement>;
     row: MRT_Row;
+    rowIndex: number;
     table: MRT_TableInstance;
     virtualRow?: VirtualItem;
 }
-export declare const MRT_TableDetailPanel: ({ parentRowRef, row, table, virtualRow, }: Props) => JSX.Element;
+export declare const MRT_TableDetailPanel: ({ parentRowRef, row, rowIndex, table, virtualRow, }: Props) => JSX.Element;
 export {};

package/dist/cjs/types/column.utils.d.ts

@@ -103,7 +103,7 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>({
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: MRT_ColumnOrderState) => MRT_ColumnOrderState;
 export declare const showExpandColumn: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>, grouping?: MRT_GroupingState) => boolean;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
-export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
+export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
 export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;
 export declare const getIsFirstColumn: (column: MRT_Column, table: MRT_TableInstance) => boolean;

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

@@ -200,13 +200,17 @@ const getTrailingDisplayColumnIds = (props) => {
         props.positionExpandColumn === 'last' &&
             showExpandColumn(props) &&
             'mrt-row-expand',
-    ];
+    ].filter(Boolean);
+};
+const getDefaultColumnOrderIds = (props) => {
+    const leadingDisplayCols = getLeadingDisplayColumnIds(props);
+    const trailingDisplayCols = getTrailingDisplayColumnIds(props);
+    const allLeafColumnDefs = getAllLeafColumnDefs(props.columns)
+        .map((columnDef) => getColumnId(columnDef))
+        .filter((columnId) => !leadingDisplayCols.includes(columnId) &&
+        !trailingDisplayCols.includes(columnId));
+    return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
-const getDefaultColumnOrderIds = (props) => [
-    ...getLeadingDisplayColumnIds(props),
-    ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
-    ...getTrailingDisplayColumnIds(props),
-].filter(Boolean);
 const getDefaultColumnFilterFn = (columnDef) => {
     if (columnDef.filterVariant === 'multi-select')
         return 'arrIncludesSome';
@@ -236,28 +240,33 @@ const getTotalRight = (table, column) => {
 };
 const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+    const widthStyles = {
+        minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = column.columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
+        width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
+    };
+    return Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
             ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
-            ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
+            ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'left' &&
             column.getPinnedIndex() === 0
-            ? `-${column.getSize() * ((_c = (_b = table.getState().columnPinning.left) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1)}px`
+            ? `-${column.getSize() *
+                ((_f = (_e = table.getState().columnPinning.left) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 1)}px`
             : undefined, mr: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'right' &&
             column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
             ? `-${column.getSize() *
-                ((_e = (_d = table.getState().columnPinning.right) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 1) *
+                ((_h = (_g = table.getState().columnPinning.right) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 1) *
                 1.2}px`
-            : undefined, opacity: ((_f = table.getState().draggingColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id ||
-            ((_g = table.getState().hoveredColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id
+            : undefined, opacity: ((_j = table.getState().draggingColumn) === null || _j === void 0 ? void 0 : _j.id) === column.id ||
+            ((_k = table.getState().hoveredColumn) === null || _k === void 0 ? void 0 : _k.id) === column.id
             ? 0.5
             : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? 'sticky'
@@ -265,9 +274,9 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? `${getTotalRight(table, column)}px`
             : undefined, transition: table.options.enableColumnVirtualization
             ? 'none'
-            : `padding 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+            : `padding 150ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
         ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_h = header === null || header === void 0 ? void 0 : header.id) !== null && _h !== void 0 ? _h : column.id)}-size) * 1px), ${(_j = column.columnDef.minSize) !== null && _j !== void 0 ? _j : 30}px)`, width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_k = header === null || header === void 0 ? void 0 : header.id) !== null && _k !== void 0 ? _k : column.id)}-size) * 1px)` }));
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), (table.options.enableColumnResizing && widthStyles));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -1370,6 +1379,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
         if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
             setShowToolbarDropZone(!!enableGrouping &&
                 !!draggingColumn &&
+                draggingColumn.columnDef.enableGrouping !== false &&
                 !grouping.includes(draggingColumn.id));
         }
     }, [enableGrouping, draggingColumn, grouping]);
@@ -2436,11 +2446,11 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
-const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
+const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
     const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({ isDetailPanel: true, row, table })
+        ? muiTableBodyRowProps({ isDetailPanel: true, row, staticRowIndex: rowIndex, table })
         : muiTableBodyRowProps;
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
@@ -2466,7 +2476,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
     const { getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({ row, table })
+        ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
         : muiTableBodyRowProps;
     const handleDragEnter = (_e) => {
         if (enableRowOrdering && draggingRow) {
@@ -2518,13 +2528,13 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                     (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React.createElement(MRT_TableBodyCell, Object.assign({}, props)));
             }),
             virtualPaddingRight ? (React.createElement("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null),
-        renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, table: table, virtualRow: virtualRow }))));
+        renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))));
 };
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a, _b, _c;
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
+    var _a, _b, _c, _d;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
     const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2587,17 +2597,18 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                 : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
             ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
             : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (React.createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
-        React.createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: { display: layoutMode === 'grid' ? 'grid' : 'table-cell' } },
-            React.createElement(Typography, { sx: {
-                    color: 'text.secondary',
-                    fontStyle: 'italic',
-                    maxWidth: `min(100vw, ${(_c = (_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 360}px)`,
-                    py: '2rem',
-                    textAlign: 'center',
-                    width: '100%',
-                } }, globalFilter || columnFilters.length
-                ? localization.noResultsFound
-                : localization.noRecordsToDisplay)))) : (React.createElement(React.Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+        React.createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+            } }, (_b = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _b !== void 0 ? _b : (React.createElement(Typography, { sx: {
+                color: 'text.secondary',
+                fontStyle: 'italic',
+                maxWidth: `min(100vw, ${(_d = (_c = tablePaperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 360}px)`,
+                py: '2rem',
+                textAlign: 'center',
+                width: '100%',
+            } }, globalFilter || columnFilters.length
+            ? localization.noResultsFound
+            : localization.noRecordsToDisplay))))) : (React.createElement(React.Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
         const row = rowVirtualizer
             ? rows[rowOrVirtualRow.index]
             : rowOrVirtualRow;