material-react-table 1.4.0-beta.3 → 1.4.0

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

@@ -468,6 +468,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
     globalFilterModeOptions?: MRT_FilterOption[] | null;
     icons?: Partial<MRT_Icons>;
     initialState?: Partial<MRT_TableState<TData>>;
+    /**
+     * Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
+     */
     layoutMode?: 'semantic' | 'grid';
     /**
      * Pass in either a locale imported from `material-react-table/locales/*` or a custom locale object.

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

@@ -1973,12 +1973,12 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
 };
 
 const MRT_TableHead = ({ table }) => {
-    const { getHeaderGroups, getState, options: { enableRowVirtualization, enableStickyHeader, layoutMode, muiTableHeadProps, }, } = table;
+    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, } = table;
     const { isFullScreen } = getState();
     const tableHeadProps = muiTableHeadProps instanceof Function
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
-    const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
+    const stickyHeader = enableStickyHeader || isFullScreen;
     return (React__default.createElement(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
             ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
             : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React__default.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
@@ -2225,20 +2225,22 @@ class Virtualizer {
             clearTimeout(this.isScrollingTimeoutId);
             this.isScrollingTimeoutId = null;
           }
+          const onIsScrollingChange = isScrolling => {
+            if (this.isScrolling !== isScrolling) {
+              this.isScrolling = isScrolling;
+              this.notify();
+            }
+          };
+          this.scrollAdjustments = 0;
           if (this.scrollOffset !== offset) {
             this.scrollOffset = offset;
-            this.isScrolling = true;
-            this.scrollAdjustments = 0;
-            this.isScrollingTimeoutId = setTimeout(() => {
-              this.isScrollingTimeoutId = null;
-              this.isScrolling = false;
-              this.notify();
-            }, this.options.scrollingDelay);
-          } else {
-            this.isScrolling = false;
-            this.scrollAdjustments = 0;
+            onIsScrollingChange(true);
           }
           this.calculateRange();
+          this.isScrollingTimeoutId = setTimeout(() => {
+            this.isScrollingTimeoutId = null;
+            onIsScrollingChange(false);
+          }, this.options.scrollingDelay);
         }));
       } else if (!this.isScrolling) {
         this.calculateRange();
@@ -2845,7 +2847,7 @@ const MRT_TableBodyRow = ({ measureElement, numRows, row, rowIndex, table, virtu
                 }
             } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', 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, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
-                    : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', '&:hover td': {
+                    : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${lighten(theme.palette.background.default, 0.12)}`
@@ -3014,12 +3016,12 @@ const MRT_TableFooter = ({ table }) => {
 };
 
 const MRT_Table = ({ table }) => {
-    const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
+    const { getState, options: { enableColumnResizing, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
     const { isFullScreen } = getState();
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
         : muiTableProps;
-    return (React__default.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+    return (React__default.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: enableColumnResizing ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React__default.createElement(MRT_TableHead, { table: table }),
@@ -3029,7 +3031,7 @@ const MRT_Table = ({ table }) => {
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const MRT_TableContainer = ({ table }) => {
-    const { getState, options: { enableStickyHeader, enableRowVirtualization, muiTableContainerProps, }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
+    const { getState, options: { enableStickyHeader, muiTableContainerProps }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
     const tableContainerProps = muiTableContainerProps instanceof Function
@@ -3053,7 +3055,7 @@ const MRT_TableContainer = ({ table }) => {
                     tableContainerProps.ref.current = node;
                 }
             }
-        }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader || enableRowVirtualization
+        }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
                 : undefined, overflow: 'auto' }, ((tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) instanceof Function
             ? tableContainerProps.sx(theme)
@@ -3272,7 +3274,7 @@ const MRT_TableRoot = (props) => {
         }
     }, [table.getState().isFullScreen]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
+        React__default.createElement(Dialog, { PaperComponent: Box, TransitionComponent: !props.enableRowVirtualization ? Grow : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React__default.createElement(MRT_TablePaper, { table: table })),
         !table.getState().isFullScreen && (React__default.createElement(MRT_TablePaper, { table: table })),
         editingRow && props.editingMode === 'modal' && (React__default.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
@@ -3379,8 +3381,10 @@ const MaterialReactTable = (_a) => {
     const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), []);
     const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), []);
-    if (rest.enableRowVirtualization)
+    if (rest.enableRowVirtualization) {
         layoutMode = 'grid';
+        enableStickyHeader = true;
+    }
     return (React__default.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, 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: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };