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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Kevin Vandy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -87,7 +87,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 - [x] Theming (Respects your Material UI Theme)
 - [x] Toolbars (Add your own action buttons)
 - [x] Tree Data / Expanding Sub-rows
-- [x] Virtualization (react-virtual)
+- [x] Virtualization (@tanstack/react-virtual)
 
 ## Getting Started
 
@@ -189,4 +189,6 @@ _Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-exa
 
 PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!
 
-Read the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/main/CONTRIBUTING.md) to learn how to run this project locally.
+Read the [Contributing Guide](https://github.com/KevinVandy/material-react-table/blob/main/CONTRIBUTING.md) to learn how to run this project locally.
+
+<!-- Use the FORCE, Luke! -->

package/dist/cjs/index.js

@@ -2071,12 +2071,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["default"].createElement(TableHead__default["default"], 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["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
@@ -2323,20 +2323,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();
@@ -2943,7 +2945,7 @@ const MRT_TableBodyRow = ({ measureElement, numRows, row, rowIndex, table, virtu
                 }
             } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: styles.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'
                             ? `${styles.lighten(theme.palette.background.default, 0.12)}`
@@ -3112,12 +3114,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["default"].createElement(Table__default["default"], 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["default"].createElement(Table__default["default"], 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["default"].createElement(MRT_TableHead, { table: table }),
@@ -3127,7 +3129,7 @@ const MRT_Table = ({ table }) => {
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.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] = React.useState(0);
     const tableContainerProps = muiTableContainerProps instanceof Function
@@ -3151,7 +3153,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)
@@ -3370,7 +3372,7 @@ const MRT_TableRoot = (props) => {
         }
     }, [table.getState().isFullScreen]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Dialog__default["default"], { PaperComponent: Box__default["default"], TransitionComponent: Grow__default["default"], disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
+        React__default["default"].createElement(Dialog__default["default"], { PaperComponent: Box__default["default"], TransitionComponent: !props.enableRowVirtualization ? Grow__default["default"] : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),
         !table.getState().isFullScreen && (React__default["default"].createElement(MRT_TablePaper, { table: table })),
         editingRow && props.editingMode === 'modal' && (React__default["default"].createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
@@ -3477,8 +3479,10 @@ const MaterialReactTable = (_a) => {
     const _sortingFns = React.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), []);
     const _defaultDisplayColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), []);
-    if (rest.enableRowVirtualization)
+    if (rest.enableRowVirtualization) {
         layoutMode = 'grid';
+        enableStickyHeader = true;
+    }
     return (React__default["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)));
 };