material-react-table 0.9.1 → 0.9.2

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

@@ -5,6 +5,7 @@ import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, But
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useVirtual } from 'react-virtual';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -2951,23 +2952,47 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var tableInstance = _ref.tableInstance,
+      tableContainerRef = _ref.tableContainerRef;
   var getPaginationRowModel = tableInstance.getPaginationRowModel,
       getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
+      getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enablePagination = _tableInstance$option.enablePagination,
+      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
       muiTableBodyProps = _tableInstance$option.muiTableBodyProps;
-  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     tableInstance: tableInstance
   }) : muiTableBodyProps;
-  return React.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
+  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+  var rowVirtualizer = useVirtual({
+    overscan: isDensePadding ? 15 : 5,
+    size: rows.length,
+    parentRef: tableContainerRef
+  });
+  var virtualRows = rowVirtualizer.virtualItems;
+  var paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  var paddingBottom = virtualRows.length > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
+  return React.createElement(TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React.createElement("tr", null, React.createElement("td", {
+    style: {
+      height: paddingTop + "px"
+    }
+  })), (enableRowVirtualization ? virtualRows : rows).map(function (rowOrVirtualRow) {
+    var row = enableRowVirtualization ? rows[rowOrVirtualRow.index] : rowOrVirtualRow;
     return React.createElement(MRT_TableBodyRow, {
       key: row.id,
       row: row,
       tableInstance: tableInstance
     });
-  }));
+  }), enableRowVirtualization && paddingBottom > 0 && React.createElement("tr", null, React.createElement("td", {
+    style: {
+      height: paddingBottom + "px"
+    }
+  })));
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
@@ -3061,7 +3086,8 @@ var MRT_TableFooter = function MRT_TableFooter(_ref) {
 };
 
 var MRT_Table = function MRT_Table(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var tableContainerRef = _ref.tableContainerRef,
+      tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
       enableTableFooter = _tableInstance$option.enableTableFooter,
@@ -3075,6 +3101,7 @@ var MRT_Table = function MRT_Table(_ref) {
   }, tableProps), enableTableHead && React.createElement(MRT_TableHead, {
     tableInstance: tableInstance
   }), React.createElement(MRT_TableBody, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }), enableTableFooter && React.createElement(MRT_TableFooter, {
     tableInstance: tableInstance
@@ -3087,8 +3114,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      tableId = _tableInstance$option.tableId,
-      muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
+      muiTableContainerProps = _tableInstance$option.muiTableContainerProps,
+      tableId = _tableInstance$option.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -3107,7 +3134,9 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + tableId + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
+  var tableContainerRef = React.useRef(null);
   return React.createElement(TableContainer, Object.assign({}, tableContainerProps, {
+    ref: tableContainerRef,
     sx: _extends({
       maxWidth: '100%',
       maxHeight: enableStickyHeader ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 2000px)" : undefined,
@@ -3117,6 +3146,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
   }), React.createElement(MRT_Table, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }));
 };