material-react-table 0.39.0 → 0.40.2

package/dist/cjs/MaterialReactTable.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, DragEvent, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions } from 'react-virtual';
+import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
 import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_Localization } from './localization';
@@ -505,9 +505,18 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
+    tableInstanceRef?: MutableRefObject<MRT_TableInstance<TData> | null>;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<VirtualizerOptions<HTMLDivElement>>);
+    virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterModes, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterModes, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+export declare type Virtualizer = {
+    virtualItems: VirtualItem[];
+    totalSize: number;
+    scrollToOffset: (index: number, options?: any | undefined) => void;
+    scrollToIndex: (index: number, options?: any | undefined) => void;
+    measure: () => void;
+};
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default _default;

package/dist/cjs/index.js

@@ -623,7 +623,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
         }
     };
     const handleDragEnter = (_e) => {
-        if (!isDragging) {
+        if (!isDragging && columnDef.enableColumnOrdering !== false) {
             setHoveredColumn(column);
         }
     };
@@ -1183,11 +1183,13 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
 const MRT_ToolbarDropZone = ({ table }) => {
     var _a, _b;
     const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
-    const { draggingColumn, hoveredColumn } = getState();
+    const { draggingColumn, hoveredColumn, grouping } = getState();
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React__default["default"].createElement(material.Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping && !!draggingColumn },
+    return (React__default["default"].createElement(material.Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
+            !!draggingColumn &&
+            !grouping.includes(draggingColumn.id) },
         React__default["default"].createElement(material.Box, { sx: (theme) => ({
                 alignItems: 'center',
                 backgroundColor: material.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
@@ -1634,7 +1636,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
     var _a, _b, _c, _d;
     const theme = material.useTheme();
     const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
-    const { density, draggingColumn, hoveredColumn, showColumnFilters } = getState();
+    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -1750,11 +1752,14 @@ const MRT_TableHeadCell = ({ header, table }) => {
                 column.getCanSort() && (React__default["default"].createElement(MRT_TableHeadCellSortLabel, { header: header, table: table })),
                 column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
             columnDefType !== 'group' && (React__default["default"].createElement(material.Box, { sx: { whiteSpace: 'nowrap' } },
-                ((enableColumnDragging &&
-                    columnDef.enableColumnDragging !== false) ||
-                    (enableColumnOrdering &&
-                        columnDef.enableColumnOrdering !== false) ||
-                    (enableGrouping && columnDef.enableGrouping !== false)) && (React__default["default"].createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: tableHeadCellRef })),
+                enableColumnDragging !== false &&
+                    columnDef.enableColumnDragging !== false &&
+                    (enableColumnDragging ||
+                        (enableColumnOrdering &&
+                            columnDef.enableColumnOrdering !== false) ||
+                        (enableGrouping &&
+                            columnDef.enableGrouping !== false &&
+                            !grouping.includes(column.id))) && (React__default["default"].createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: tableHeadCellRef })),
                 (enableColumnActions || columnDef.enableColumnActions) &&
                     columnDef.enableColumnActions !== false && (React__default["default"].createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
             column.getCanResize() && (React__default["default"].createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
@@ -1937,7 +1942,9 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
                 column.getSize() / 3)
         : 100), [isLoading, showSkeletons]);
-    const handleDoubleClick = (_event) => {
+    const handleDoubleClick = (event) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
         if ((enableEditing || columnDef.enableEditing) &&
             columnDef.enableEditing !== false &&
             editingMode === 'cell') {
@@ -1961,7 +1968,9 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     const getTotalRight = () => {
         return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
     };
-    const handleDragEnter = (_e) => {
+    const handleDragEnter = (e) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
         }
@@ -1987,7 +1996,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                 : undefined,
         }
         : undefined;
-    return (React__default["default"].createElement(material.TableCell, Object.assign({ onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter }, tableCellProps, { sx: (theme) => {
+    return (React__default["default"].createElement(material.TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => {
             var _a;
             return (Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned()
                     ? material.alpha(material.lighten(theme.palette.background.default, 0.04), 0.95)
@@ -2104,7 +2113,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
 };
 
 const MRT_TableBody = ({ table, tableContainerRef }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, }, } = table;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, virtualizerInstanceRef, }, } = table;
     const { globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2132,10 +2141,15 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             : getRowModel().rows,
         globalFilter,
     ]);
-    const rowVirtualizer = enableRowVirtualization
+    const virtualizer = enableRowVirtualization
         ? reactVirtual.useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
         : {};
-    // const rowVirtualizer: Virtualizer = enableRowVirtualization
+    React.useEffect(() => {
+        if (virtualizerInstanceRef) {
+            virtualizerInstanceRef.current = virtualizer;
+        }
+    }, [virtualizer]);
+    // const virtualizer: Virtualizer = enableRowVirtualization
     //   ? useVirtualizer({
     //       count: rows.length,
     //       estimateSize: () => (density === 'compact' ? 25 : 50),
@@ -2144,24 +2158,22 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
     //       ...vProps,
     //     })
     //   : ({} as any);
-    const virtualRows = enableRowVirtualization
-        ? rowVirtualizer.virtualItems
-        : [];
+    const virtualRows = enableRowVirtualization ? virtualizer.virtualItems : [];
     // const virtualRows = enableRowVirtualization
-    //   ? rowVirtualizer.getVirtualItems()
+    //   ? virtualizer.getVirtualItems()
     //   : [];
     let paddingTop = 0;
     let paddingBottom = 0;
     if (enableRowVirtualization) {
         paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
         paddingBottom = !!virtualRows.length
-            ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+            ? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
             : 0;
     }
     // if (enableRowVirtualization) {
     //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
     //   paddingBottom = !!virtualRows.length
-    //     ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+    //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
     //     : 0;
     // }
     return (React__default["default"].createElement(material.TableBody, Object.assign({}, tableBodyProps),
@@ -2443,6 +2455,11 @@ const MRT_TableRoot = (props) => {
             tableContainerRef,
             topToolbarRef,
         }, setColumnFilterFns: (_w = props.onFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setDensity: (_x = props.onDensityChange) !== null && _x !== void 0 ? _x : setDensity, setDraggingColumn: (_y = props.onDraggingColumnChange) !== null && _y !== void 0 ? _y : setDraggingColumn, setDraggingRow: (_z = props.onDraggingRowChange) !== null && _z !== void 0 ? _z : setDraggingRow, setEditingCell: (_0 = props.onEditingCellChange) !== null && _0 !== void 0 ? _0 : setEditingCell, setEditingRow: (_1 = props.onEditingRowChange) !== null && _1 !== void 0 ? _1 : setEditingRow, setGlobalFilterFn: (_2 = props.onGlobalFilterFnChange) !== null && _2 !== void 0 ? _2 : setGlobalFilterFn, setHoveredColumn: (_3 = props.onHoveredColumnChange) !== null && _3 !== void 0 ? _3 : setHoveredColumn, setHoveredRow: (_4 = props.onHoveredRowChange) !== null && _4 !== void 0 ? _4 : setHoveredRow, setIsFullScreen: (_5 = props.onIsFullScreenChange) !== null && _5 !== void 0 ? _5 : setIsFullScreen, setShowAlertBanner: (_6 = props.onShowAlertBannerChange) !== null && _6 !== void 0 ? _6 : setShowAlertBanner, setShowFilters: (_7 = props.onShowFiltersChange) !== null && _7 !== void 0 ? _7 : setShowFilters, setShowGlobalFilter: (_8 = props.onShowGlobalFilterChange) !== null && _8 !== void 0 ? _8 : setShowGlobalFilter });
+    React.useEffect(() => {
+        if (props.tableInstanceRef) {
+            props.tableInstanceRef.current = table;
+        }
+    }, [table]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),
@@ -2451,8 +2468,8 @@ const MRT_TableRoot = (props) => {
 };
 
 var MaterialReactTable = (_a) => {
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilterModes = false, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterModes = false, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilterModes", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterModes", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
-    return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilterModes: enableColumnFilterModes, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterModes: enableGlobalFilterModes, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
 };
 
 exports.MRT_CopyButton = MRT_CopyButton;