material-react-table 0.33.6 → 0.35.0

package/dist/cjs/index.js

@@ -1,11 +1,12 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var reactTable = require('@tanstack/react-table');
 var iconsMaterial = require('@mui/icons-material');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var material = require('@mui/material');
-var reactVirtual = require('@tanstack/react-virtual');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -428,7 +429,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
         label)))));
 };
 
-const MRT_ColumnPinningButtons = ({ column, table }) => {
+const MRT_ColumnPinningButtons = ({ column, table, }) => {
     const { options: { icons: { PushPinIcon }, localization, }, } = table;
     const handlePinColumn = (pinDirection) => {
         column.pin(pinDirection);
@@ -566,7 +567,7 @@ const getDefaultColumnFilterFn = (columnDef) => {
     return 'fuzzy';
 };
 
-const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCurrentHoveredColumn, column, isSubMenu, table, }) => {
+const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
     var _a;
     const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
@@ -586,7 +587,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
             column.toggleVisibility();
         }
     };
-    const menuItemRef = React__default["default"].useRef(null);
+    const menuItemRef = React.useRef(null);
     const [isDragging, setIsDragging] = React.useState(false);
     const handleDragStart = (e) => {
         setIsDragging(true);
@@ -594,14 +595,14 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
     };
     const handleDragEnd = (_e) => {
         setIsDragging(false);
-        setCurrentHoveredColumn(null);
-        if (currentHoveredColumn) {
-            setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+        setHoveredColumn(null);
+        if (hoveredColumn) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
         }
     };
     const handleDragEnter = (_e) => {
         if (!isDragging) {
-            setCurrentHoveredColumn(column);
+            setHoveredColumn(column);
         }
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -612,7 +613,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
                 opacity: isDragging ? 0.5 : 1,
                 outline: isDragging
                     ? `1px dashed ${theme.palette.divider}`
-                    : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                         ? `2px dashed ${theme.palette.primary.main}`
                         : 'none',
                 pl: `${(column.depth + 0.5) * 2}rem`,
@@ -642,7 +643,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCur
                         React__default["default"].createElement(material.Switch, null)), disabled: (isSubMenu && switchChecked) ||
                         !column.getCanHide() ||
                         column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default["default"].createElement(material.Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
-        _a.map((c, i) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, currentHoveredColumn: currentHoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setCurrentHoveredColumn: setCurrentHoveredColumn, table: table })))));
+        _a.map((c, i) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
 const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) => {
@@ -672,7 +673,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) =
         getLeftLeafColumns(),
         getRightLeafColumns(),
     ]);
-    const [currentHoveredColumn, setCurrentHoveredColumn] = React.useState(null);
+    const [hoveredColumn, setHoveredColumn] = React.useState(null);
     return (React__default["default"].createElement(material.Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
@@ -687,7 +688,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) =
             !isSubMenu && enablePinning && (React__default["default"].createElement(material.Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
             React__default["default"].createElement(material.Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll)),
         React__default["default"].createElement(material.Divider, null),
-        allColumns.map((column, index) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, currentHoveredColumn: currentHoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setCurrentHoveredColumn: setCurrentHoveredColumn, table: table })))));
+        allColumns.map((column, index) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
 };
 
 const commonMenuItemStyles = {
@@ -880,16 +881,20 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
 };
 
 const MRT_EditActionButtons = ({ row, table }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditRowSubmit, }, setCurrentEditingRow, } = table;
-    const { currentEditingRow } = getState();
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditRowSubmit, }, setEditingRow, } = table;
+    const { editingRow } = getState();
     const handleCancel = () => {
-        var _a;
-        row._valuesCache = (_a = row.original) !== null && _a !== void 0 ? _a : {};
-        setCurrentEditingRow(null);
+        row._valuesCache = Object.assign({}, row.original);
+        setEditingRow(null);
     };
     const handleSave = () => {
-        onEditRowSubmit === null || onEditRowSubmit === void 0 ? void 0 : onEditRowSubmit({ row: currentEditingRow !== null && currentEditingRow !== void 0 ? currentEditingRow : row, table });
-        setCurrentEditingRow(null);
+        var _a;
+        onEditRowSubmit === null || onEditRowSubmit === void 0 ? void 0 : onEditRowSubmit({
+            row: editingRow !== null && editingRow !== void 0 ? editingRow : row,
+            table,
+            values: (_a = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _a !== void 0 ? _a : Object.assign({}, row.original),
+        });
+        setEditingRow(null);
     };
     return (React__default["default"].createElement(material.Box, { sx: { display: 'flex', gap: '0.75rem' } },
         React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.cancel },
@@ -911,8 +916,8 @@ const commonIconButtonStyles = {
     },
 };
 const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
-    const { getState, options: { enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setCurrentEditingRow, } = table;
-    const { currentEditingRow } = getState();
+    const { getState, options: { enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
+    const { editingRow } = getState();
     const [anchorEl, setAnchorEl] = React.useState(null);
     const handleOpenRowActionMenu = (event) => {
         event.stopPropagation();
@@ -920,10 +925,10 @@ const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
         setAnchorEl(event.currentTarget);
     };
     const handleStartEditMode = () => {
-        setCurrentEditingRow(Object.assign({}, row));
+        setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ row, table }))) : row.id === (currentEditingRow === null || currentEditingRow === void 0 ? void 0 : currentEditingRow.id) ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default["default"].createElement(material.Tooltip, { placement: "right", arrow: true, title: localization.edit },
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions({ row, table }))) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React__default["default"].createElement(material.Tooltip, { placement: "right", arrow: true, title: localization.edit },
         React__default["default"].createElement(material.IconButton, { sx: commonIconButtonStyles, onClick: handleStartEditMode },
             React__default["default"].createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
@@ -956,7 +961,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
                 : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
 };
 
-const MRT_GlobalFilterTextField = ({ table }) => {
+const MRT_GlobalFilterTextField = ({ table, }) => {
     var _a;
     const { getState, setGlobalFilter, options: { enableGlobalFilterChangeMode, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, tableId, }, } = table;
     const { globalFilter, showGlobalFilter } = getState();
@@ -1141,11 +1146,6 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
             display: 'flex',
             zIndex: 3,
         } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
-        MRT_FullScreenToggleButton,
-        MRT_ShowHideColumnsButton,
-        MRT_ToggleDensePaddingButton,
-        MRT_ToggleFiltersButton,
-        MRT_ToggleGlobalFilterButton,
         table,
     })) !== null && _a !== void 0 ? _a : (React__default["default"].createElement(React__default["default"].Fragment, null,
         enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
@@ -1158,15 +1158,15 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
 
 const MRT_ToolbarDropZone = ({ table }) => {
     var _a, _b;
-    const { getState, options: { enableGrouping, localization }, setCurrentHoveredColumn, } = table;
-    const { currentDraggingColumn, currentHoveredColumn } = getState();
+    const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
+    const { draggingColumn, hoveredColumn } = getState();
     const handleDragEnter = (_event) => {
-        setCurrentHoveredColumn({ id: 'drop-zone' });
+        setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React__default["default"].createElement(material.Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping && !!currentDraggingColumn },
+    return (React__default["default"].createElement(material.Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping && !!draggingColumn },
         React__default["default"].createElement(material.Box, { sx: (theme) => ({
                 alignItems: 'center',
-                backgroundColor: material.alpha(theme.palette.info.main, (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
+                backgroundColor: material.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
                 border: `dashed ${theme.palette.info.main} 2px`,
                 display: 'flex',
                 justifyContent: 'center',
@@ -1175,7 +1175,7 @@ const MRT_ToolbarDropZone = ({ table }) => {
                 width: 'calc(100% - 4px)',
                 zIndex: 2,
             }), onDragEnter: handleDragEnter },
-            React__default["default"].createElement(material.Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
+            React__default["default"].createElement(material.Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
 };
 
 const commonToolbarStyles = ({ theme }) => ({
@@ -1505,9 +1505,9 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
-    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps, onColumnDrop, }, setColumnOrder, setCurrentDraggingColumn, setCurrentHoveredColumn, } = table;
+    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps, onColumnDrop, }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
-    const { currentHoveredColumn, currentDraggingColumn, columnOrder } = getState();
+    const { hoveredColumn, draggingColumn, columnOrder } = getState();
     const mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function
         ? muiTableHeadCellDragHandleProps({ column, table })
         : muiTableHeadCellDragHandleProps;
@@ -1516,25 +1516,25 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
         : columnDef.muiTableHeadCellDragHandleProps;
     const iconButtonProps = Object.assign(Object.assign({}, mIconButtonProps), mcIconButtonProps);
     const handleDragStart = (e) => {
-        setCurrentDraggingColumn(column);
+        setDraggingColumn(column);
         e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
     };
     const handleDragEnd = (event) => {
         onColumnDrop === null || onColumnDrop === void 0 ? void 0 : onColumnDrop({
             event,
             draggedColumn: column,
-            targetColumn: currentHoveredColumn,
+            targetColumn: hoveredColumn,
         });
-        if ((currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+        if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             column.toggleGrouping();
         }
         else if (enableColumnOrdering &&
-            currentHoveredColumn &&
-            (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id)) {
-            setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+            hoveredColumn &&
+            (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
         }
-        setCurrentDraggingColumn(null);
-        setCurrentHoveredColumn(null);
+        setDraggingColumn(null);
+        setHoveredColumn(null);
     };
     return (React__default["default"].createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
@@ -1592,8 +1592,8 @@ const MRT_TableHeadCellSortLabel = ({ header, table }) => {
 const MRT_TableHeadCell = ({ header, table }) => {
     var _a, _b, _c, _d;
     const theme = material.useTheme();
-    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setCurrentHoveredColumn, } = table;
-    const { density, currentDraggingColumn, currentHoveredColumn, showColumnFilters, } = getState();
+    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
+    const { density, draggingColumn, hoveredColumn, showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -1615,16 +1615,16 @@ const MRT_TableHeadCell = ({ header, table }) => {
         return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
     };
     const handleDragEnter = (_e) => {
-        if (enableGrouping && (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
-            setCurrentHoveredColumn(null);
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
         }
-        if (enableColumnOrdering && currentDraggingColumn) {
-            setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        if (enableColumnOrdering && draggingColumn) {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
-        : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : undefined;
     const draggingBorders = draggingBorder
@@ -1652,8 +1652,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         ? `-4px 0 4px -2px ${material.alpha(theme.palette.common.black, 0.1)}`
                         : undefined, fontWeight: 'bold', left: column.getIsPinned() === 'left'
                     ? `${column.getStart('left')}px`
-                    : undefined, overflow: 'visible', opacity: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id ||
-                    (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    : undefined, overflow: 'visible', opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                     ? 0.5
                     : 1, p: density === 'compact'
                     ? '0.5rem'
@@ -1675,7 +1674,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         ? '0.25'
                         : density === 'comfortable'
                             ? '.75rem'
-                            : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+                            : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
                     ? 3
                     : column.getIsPinned() && columnDefType !== 'group'
                         ? 2
@@ -1739,29 +1738,522 @@ const MRT_TableHead = ({ table }) => {
     return (React__default["default"].createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
+
+var rectChanged = function rectChanged(a, b) {
+  if (a === void 0) {
+    a = {};
+  }
+
+  if (b === void 0) {
+    b = {};
+  }
+
+  return props.some(function (prop) {
+    return a[prop] !== b[prop];
+  });
+};
+
+var observedNodes = /*#__PURE__*/new Map();
+var rafId;
+
+var run = function run() {
+  var changedStates = [];
+  observedNodes.forEach(function (state, node) {
+    var newRect = node.getBoundingClientRect();
+
+    if (rectChanged(newRect, state.rect)) {
+      state.rect = newRect;
+      changedStates.push(state);
+    }
+  });
+  changedStates.forEach(function (state) {
+    state.callbacks.forEach(function (cb) {
+      return cb(state.rect);
+    });
+  });
+  rafId = window.requestAnimationFrame(run);
+};
+
+function observeRect(node, cb) {
+  return {
+    observe: function observe() {
+      var wasEmpty = observedNodes.size === 0;
+
+      if (observedNodes.has(node)) {
+        observedNodes.get(node).callbacks.push(cb);
+      } else {
+        observedNodes.set(node, {
+          rect: undefined,
+          hasRectChanged: false,
+          callbacks: [cb]
+        });
+      }
+
+      if (wasEmpty) run();
+    },
+    unobserve: function unobserve() {
+      var state = observedNodes.get(node);
+
+      if (state) {
+        // Remove the callback
+        var index = state.callbacks.indexOf(cb);
+        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
+
+        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
+
+        if (!observedNodes.size) cancelAnimationFrame(rafId);
+      }
+    }
+  };
+}
+
+var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default["default"].useLayoutEffect : React__default["default"].useEffect;
+
+function useRect(nodeRef, initialRect) {
+  if (initialRect === void 0) {
+    initialRect = {
+      width: 0,
+      height: 0
+    };
+  }
+
+  var _React$useState = React__default["default"].useState(nodeRef.current),
+      element = _React$useState[0],
+      setElement = _React$useState[1];
+
+  var _React$useReducer = React__default["default"].useReducer(rectReducer, initialRect),
+      rect = _React$useReducer[0],
+      dispatch = _React$useReducer[1];
+
+  var initialRectSet = React__default["default"].useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (nodeRef.current !== element) {
+      setElement(nodeRef.current);
+    }
+  });
+  useIsomorphicLayoutEffect$1(function () {
+    if (element && !initialRectSet.current) {
+      initialRectSet.current = true;
+
+      var _rect = element.getBoundingClientRect();
+
+      dispatch({
+        rect: _rect
+      });
+    }
+  }, [element]);
+  React__default["default"].useEffect(function () {
+    if (!element) {
+      return;
+    }
+
+    var observer = observeRect(element, function (rect) {
+      dispatch({
+        rect: rect
+      });
+    });
+    observer.observe();
+    return function () {
+      observer.unobserve();
+    };
+  }, [element]);
+  return rect;
+}
+
+function rectReducer(state, action) {
+  var rect = action.rect;
+
+  if (state.height !== rect.height || state.width !== rect.width) {
+    return rect;
+  }
+
+  return state;
+}
+
+var defaultEstimateSize = function defaultEstimateSize() {
+  return 50;
+};
+
+var defaultKeyExtractor = function defaultKeyExtractor(index) {
+  return index;
+};
+
+var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
+  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
+  return el[key];
+};
+
+var defaultRangeExtractor = function defaultRangeExtractor(range) {
+  var start = Math.max(range.start - range.overscan, 0);
+  var end = Math.min(range.end + range.overscan, range.size - 1);
+  var arr = [];
+
+  for (var i = start; i <= end; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+function useVirtual(_ref) {
+  var _measurements;
+
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 0 : _ref$size,
+      _ref$estimateSize = _ref.estimateSize,
+      estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
+      _ref$overscan = _ref.overscan,
+      overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
+      _ref$paddingStart = _ref.paddingStart,
+      paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
+      _ref$paddingEnd = _ref.paddingEnd,
+      paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
+      parentRef = _ref.parentRef,
+      horizontal = _ref.horizontal,
+      scrollToFn = _ref.scrollToFn,
+      useObserver = _ref.useObserver,
+      initialRect = _ref.initialRect,
+      onScrollElement = _ref.onScrollElement,
+      scrollOffsetFn = _ref.scrollOffsetFn,
+      _ref$keyExtractor = _ref.keyExtractor,
+      keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
+      _ref$measureSize = _ref.measureSize,
+      measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
+      _ref$rangeExtractor = _ref.rangeExtractor,
+      rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
+  var sizeKey = horizontal ? 'width' : 'height';
+  var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
+  var latestRef = React__default["default"].useRef({
+    scrollOffset: 0,
+    measurements: []
+  });
+
+  var _React$useState = React__default["default"].useState(0),
+      scrollOffset = _React$useState[0],
+      setScrollOffset = _React$useState[1];
+
+  latestRef.current.scrollOffset = scrollOffset;
+  var useMeasureParent = useObserver || useRect;
+
+  var _useMeasureParent = useMeasureParent(parentRef, initialRect),
+      outerSize = _useMeasureParent[sizeKey];
+
+  latestRef.current.outerSize = outerSize;
+  var defaultScrollToFn = React__default["default"].useCallback(function (offset) {
+    if (parentRef.current) {
+      parentRef.current[scrollKey] = offset;
+    }
+  }, [parentRef, scrollKey]);
+  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
+  scrollToFn = React__default["default"].useCallback(function (offset) {
+    resolvedScrollToFn(offset, defaultScrollToFn);
+  }, [defaultScrollToFn, resolvedScrollToFn]);
+
+  var _React$useState2 = React__default["default"].useState({}),
+      measuredCache = _React$useState2[0],
+      setMeasuredCache = _React$useState2[1];
+
+  var measure = React__default["default"].useCallback(function () {
+    return setMeasuredCache({});
+  }, []);
+  var pendingMeasuredCacheIndexesRef = React__default["default"].useRef([]);
+  var measurements = React__default["default"].useMemo(function () {
+    var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
+    pendingMeasuredCacheIndexesRef.current = [];
+    var measurements = latestRef.current.measurements.slice(0, min);
+
+    for (var i = min; i < size; i++) {
+      var key = keyExtractor(i);
+      var measuredSize = measuredCache[key];
+
+      var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+
+      var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
+
+      var _end = _start + _size;
+
+      measurements[i] = {
+        index: i,
+        start: _start,
+        size: _size,
+        end: _end,
+        key: key
+      };
+    }
+
+    return measurements;
+  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
+  var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
+  latestRef.current.measurements = measurements;
+  latestRef.current.totalSize = totalSize;
+  var element = onScrollElement ? onScrollElement.current : parentRef.current;
+  var scrollOffsetFnRef = React__default["default"].useRef(scrollOffsetFn);
+  scrollOffsetFnRef.current = scrollOffsetFn;
+  useIsomorphicLayoutEffect$1(function () {
+    if (!element) {
+      setScrollOffset(0);
+      return;
+    }
+
+    var onScroll = function onScroll(event) {
+      var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
+      setScrollOffset(offset);
+    };
+
+    onScroll();
+    element.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true
+    });
+    return function () {
+      element.removeEventListener('scroll', onScroll);
+    };
+  }, [element, scrollKey]);
+
+  var _calculateRange = calculateRange(latestRef.current),
+      start = _calculateRange.start,
+      end = _calculateRange.end;
+
+  var indexes = React__default["default"].useMemo(function () {
+    return rangeExtractor({
+      start: start,
+      end: end,
+      overscan: overscan,
+      size: measurements.length
+    });
+  }, [start, end, overscan, measurements.length, rangeExtractor]);
+  var measureSizeRef = React__default["default"].useRef(measureSize);
+  measureSizeRef.current = measureSize;
+  var virtualItems = React__default["default"].useMemo(function () {
+    var virtualItems = [];
+
+    var _loop = function _loop(k, len) {
+      var i = indexes[k];
+      var measurement = measurements[i];
+
+      var item = _extends(_extends({}, measurement), {}, {
+        measureRef: function measureRef(el) {
+          if (el) {
+            var measuredSize = measureSizeRef.current(el, horizontal);
+
+            if (measuredSize !== item.size) {
+              var _scrollOffset = latestRef.current.scrollOffset;
+
+              if (item.start < _scrollOffset) {
+                defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
+              }
+
+              pendingMeasuredCacheIndexesRef.current.push(i);
+              setMeasuredCache(function (old) {
+                var _extends2;
+
+                return _extends(_extends({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
+              });
+            }
+          }
+        }
+      });
+
+      virtualItems.push(item);
+    };
+
+    for (var k = 0, len = indexes.length; k < len; k++) {
+      _loop(k);
+    }
+
+    return virtualItems;
+  }, [indexes, defaultScrollToFn, horizontal, measurements]);
+  var mountedRef = React__default["default"].useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (mountedRef.current) {
+      setMeasuredCache({});
+    }
+
+    mountedRef.current = true;
+  }, [estimateSize]);
+  var scrollToOffset = React__default["default"].useCallback(function (toOffset, _temp) {
+    var _ref2 = _temp === void 0 ? {} : _temp,
+        _ref2$align = _ref2.align,
+        align = _ref2$align === void 0 ? 'start' : _ref2$align;
+
+    var _latestRef$current = latestRef.current,
+        scrollOffset = _latestRef$current.scrollOffset,
+        outerSize = _latestRef$current.outerSize;
+
+    if (align === 'auto') {
+      if (toOffset <= scrollOffset) {
+        align = 'start';
+      } else if (toOffset >= scrollOffset + outerSize) {
+        align = 'end';
+      } else {
+        align = 'start';
+      }
+    }
+
+    if (align === 'start') {
+      scrollToFn(toOffset);
+    } else if (align === 'end') {
+      scrollToFn(toOffset - outerSize);
+    } else if (align === 'center') {
+      scrollToFn(toOffset - outerSize / 2);
+    }
+  }, [scrollToFn]);
+  var tryScrollToIndex = React__default["default"].useCallback(function (index, _temp2) {
+    var _ref3 = _temp2 === void 0 ? {} : _temp2,
+        _ref3$align = _ref3.align,
+        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
+        rest = _objectWithoutPropertiesLoose(_ref3, ["align"]);
+
+    var _latestRef$current2 = latestRef.current,
+        measurements = _latestRef$current2.measurements,
+        scrollOffset = _latestRef$current2.scrollOffset,
+        outerSize = _latestRef$current2.outerSize;
+    var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
+
+    if (!measurement) {
+      return;
+    }
+
+    if (align === 'auto') {
+      if (measurement.end >= scrollOffset + outerSize) {
+        align = 'end';
+      } else if (measurement.start <= scrollOffset) {
+        align = 'start';
+      } else {
+        return;
+      }
+    }
+
+    var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
+    scrollToOffset(toOffset, _extends({
+      align: align
+    }, rest));
+  }, [scrollToOffset, size]);
+  var scrollToIndex = React__default["default"].useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // We do a double request here because of
+    // dynamic sizes which can cause offset shift
+    // and end up in the wrong spot. Unfortunately,
+    // we can't know about those dynamic sizes until
+    // we try and render them. So double down!
+    tryScrollToIndex.apply(void 0, args);
+    requestAnimationFrame(function () {
+      tryScrollToIndex.apply(void 0, args);
+    });
+  }, [tryScrollToIndex]);
+  return {
+    virtualItems: virtualItems,
+    totalSize: totalSize,
+    scrollToOffset: scrollToOffset,
+    scrollToIndex: scrollToIndex,
+    measure: measure
+  };
+}
+
+var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
+  while (low <= high) {
+    var middle = (low + high) / 2 | 0;
+    var currentValue = getCurrentValue(middle);
+
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+function calculateRange(_ref4) {
+  var measurements = _ref4.measurements,
+      outerSize = _ref4.outerSize,
+      scrollOffset = _ref4.scrollOffset;
+  var size = measurements.length - 1;
+
+  var getOffset = function getOffset(index) {
+    return measurements[index].start;
+  };
+
+  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
+  var end = start;
+
+  while (end < size && measurements[end].end < scrollOffset + outerSize) {
+    end++;
+  }
+
+  return {
+    start: start,
+    end: end
+  };
+}
+
 const MRT_EditCellTextField = ({ cell, table }) => {
     var _a;
-    const { getState, options: { tableId, enableEditing, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setCurrentEditingCell, setCurrentEditingRow, } = table;
+    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    const [value, setValue] = React.useState(cell.getValue());
+    const { editingRow } = getState();
+    const [value, setValue] = React.useState(() => cell.getValue());
     const handleChange = (event) => {
         var _a;
         setValue(event.target.value);
-        (_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table });
-        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table });
+        (_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
+        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table, value });
     };
     const handleBlur = (event) => {
         var _a;
-        if (getState().currentEditingRow) {
+        if (editingRow) {
             if (!row._valuesCache)
                 row._valuesCache = {};
             row._valuesCache[column.id] = value;
-            setCurrentEditingRow(Object.assign({}, getState().currentEditingRow));
+            setEditingRow(Object.assign({}, editingRow));
         }
-        setCurrentEditingCell(null);
-        (_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table });
-        onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table });
+        setEditingCell(null);
+        (_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
+        onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table, value });
     };
     const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
         ? muiTableBodyCellEditTextFieldProps({ cell, table })
@@ -1773,10 +2265,10 @@ const MRT_EditCellTextField = ({ cell, table }) => {
         })
         : columnDef.muiTableBodyCellEditTextFieldProps;
     const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
-    if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
+    if (columnDef.Edit) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
     }
-    return (React__default["default"].createElement(material.TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "dense", onBlur: handleBlur, onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps)));
+    return (React__default["default"].createElement(material.TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onBlur: handleBlur, onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps)));
 };
 
 const MRT_CopyButton = ({ cell, children, table }) => {
@@ -1812,16 +2304,16 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
         : muiTableBodyRowDragHandleProps;
     const handleDragStart = (e) => {
         e.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        table.setCurrentDraggingRow(cell.row);
+        table.setDraggingRow(cell.row);
     };
     const handleDragEnd = (event) => {
         onRowDrop === null || onRowDrop === void 0 ? void 0 : onRowDrop({
             event,
-            draggedRow: table.getState().currentDraggingRow,
-            targetRow: table.getState().currentHoveredRow,
+            draggedRow: table.getState().draggingRow,
+            targetRow: table.getState().hoveredRow,
         });
-        table.setCurrentDraggingRow(null);
-        table.setCurrentHoveredRow(null);
+        table.setDraggingRow(null);
+        table.setHoveredRow(null);
     };
     return (React__default["default"].createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
@@ -1829,8 +2321,8 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
 const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     var _a, _b, _c, _d, _f, _g, _h, _j;
     const theme = material.useTheme();
-    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, tableId, }, setCurrentEditingCell, setCurrentHoveredColumn, } = table;
-    const { currentDraggingColumn, currentEditingCell, currentEditingRow, currentHoveredColumn, density, isLoading, showSkeletons, } = getState();
+    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, tableId, }, setEditingCell, setHoveredColumn, } = table;
+    const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -1845,8 +2337,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
         (editingMode === 'table' ||
-            (currentEditingRow === null || currentEditingRow === void 0 ? void 0 : currentEditingRow.id) === row.id ||
-            (currentEditingCell === null || currentEditingCell === void 0 ? void 0 : currentEditingCell.id) === cell.id);
+            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
+            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id);
     const [skeletonWidth, setSkeletonWidth] = React.useState(0);
     React.useEffect(() => setSkeletonWidth(isLoading || showSkeletons
         ? columnDefType === 'display'
@@ -1858,7 +2350,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         if ((enableEditing || columnDef.enableEditing) &&
             columnDef.enableEditing !== false &&
             editingMode === 'cell') {
-            setCurrentEditingCell(cell);
+            setEditingCell(cell);
             setTimeout(() => {
                 const textField = document.getElementById(`mrt-${tableId}-edit-cell-text-field-${cell.id}`);
                 if (textField) {
@@ -1879,16 +2371,16 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
     };
     const handleDragEnter = (_e) => {
-        if (enableGrouping && (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
-            setCurrentHoveredColumn(null);
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
         }
-        if (enableColumnOrdering && currentDraggingColumn) {
-            setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        if (enableColumnOrdering && draggingColumn) {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
-        : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : undefined;
     const draggingBorders = draggingBorder
@@ -1914,8 +2406,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                         ? `-4px 0 4px -2px ${material.alpha(theme.palette.common.black, 0.1)}`
                         : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text', left: column.getIsPinned() === 'left'
                     ? `${column.getStart('left')}px`
-                    : undefined, opacity: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id ||
-                    (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    : undefined, opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                     ? 0.5
                     : 1, overflow: 'hidden', p: density === 'compact'
                     ? columnDefType === 'display'
@@ -1934,7 +2425,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                             : density === 'comfortable'
                                 ? 0.75
                                 : 1.25)}rem`
-                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
                     ? 2
                     : column.getIsPinned()
                         ? 1
@@ -1980,20 +2471,20 @@ const MRT_TableDetailPanel = ({ row, table }) => {
 const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
     var _a, _b;
     const theme = material.useTheme();
-    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel }, setCurrentHoveredRow, } = table;
-    const { currentDraggingRow, currentHoveredRow } = getState();
+    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel }, setHoveredRow, } = table;
+    const { draggingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
         : muiTableBodyRowProps;
     const handleDragEnter = (_e) => {
-        if (enableRowOrdering && currentDraggingRow) {
-            setCurrentHoveredRow(row);
+        if (enableRowOrdering && draggingRow) {
+            setHoveredRow(row);
         }
     };
     const rowRef = React.useRef(null);
-    const draggingBorder = (currentDraggingRow === null || currentDraggingRow === void 0 ? void 0 : currentDraggingRow.id) === row.id
+    const draggingBorder = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id
         ? `1px dashed ${theme.palette.text.secondary}`
-        : (currentHoveredRow === null || currentHoveredRow === void 0 ? void 0 : currentHoveredRow.id) === row.id
+        : (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
             ? `2px dashed ${theme.palette.primary.main}`
             : undefined;
     const draggingBorders = draggingBorder
@@ -2002,10 +2493,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
         }
         : undefined;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: rowRef }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), opacity: (currentDraggingRow === null || currentDraggingRow === void 0 ? void 0 : currentDraggingRow.id) === row.id ||
-                    (currentHoveredRow === null || currentHoveredRow === void 0 ? void 0 : currentHoveredRow.id) === row.id
-                    ? 0.5
-                    : 1, transition: 'all 0.2s ease-in-out', '&:hover td': {
+        React__default["default"].createElement(material.TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: rowRef }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), 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, transition: 'all 0.2s ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${material.lighten(theme.palette.background.default, 0.12)}`
@@ -2019,7 +2507,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
 
 const MRT_TableBody = ({ table, tableContainerRef }) => {
     const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, }, } = table;
-    const { density, globalFilter, pagination, sorting } = getState();
+    const { globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
@@ -2047,19 +2535,37 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
         globalFilter,
     ]);
     const rowVirtualizer = enableRowVirtualization
-        ? reactVirtual.useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => (density === 'compact' ? 20 : 50), getScrollElement: () => tableContainerRef.current, overscan: 10 }, vProps))
+        ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
         : {};
+    // const rowVirtualizer: Virtualizer = enableRowVirtualization
+    //   ? useVirtualizer({
+    //       count: rows.length,
+    //       estimateSize: () => (density === 'compact' ? 25 : 50),
+    //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
+    //       overscan: 15,
+    //       ...vProps,
+    //     })
+    //   : ({} as any);
     const virtualRows = enableRowVirtualization
-        ? rowVirtualizer.getVirtualItems()
+        ? rowVirtualizer.virtualItems
         : [];
+    // const virtualRows = enableRowVirtualization
+    //   ? rowVirtualizer.getVirtualItems()
+    //   : [];
     let paddingTop = 0;
     let paddingBottom = 0;
     if (enableRowVirtualization) {
         paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
         paddingBottom = !!virtualRows.length
-            ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+            ? rowVirtualizer.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
+    //     : 0;
+    // }
     return (React__default["default"].createElement(material.TableBody, Object.assign({}, tableBodyProps),
         enableRowVirtualization && paddingTop > 0 && (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", { style: { height: `${paddingTop}px` } }))),
@@ -2194,7 +2700,7 @@ const MRT_TablePaper = ({ table }) => {
 };
 
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
     const [tableId, setIdPrefix] = React.useState(props.tableId);
     React.useEffect(() => { var _a; return setIdPrefix((_a = props.tableId) !== null && _a !== void 0 ? _a : Math.random().toString(36).substring(2, 9)); }, [props.tableId]);
     const initialState = React.useMemo(() => {
@@ -2202,31 +2708,34 @@ const MRT_TableRoot = (props) => {
         const initState = (_a = props.initialState) !== null && _a !== void 0 ? _a : {};
         initState.columnOrder =
             (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(props);
+        initState.columnFilterFns = Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            return ({
+                [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
+                    ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
+                    : (_m = (_f = col.filterFn) !== null && _f !== void 0 ? _f : (_g = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _g === void 0 ? void 0 : _g[(_l = (_j = (_h = col.id) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : (_k = col.accessorKey) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '']) !== null && _m !== void 0 ? _m : getDefaultColumnFilterFn(col),
+            });
+        }));
+        initState.globalFilterFn =
+            props.globalFilterFn instanceof String
+                ? props.globalFilterFn
+                : 'fuzzy';
         return initState;
     }, []);
-    const [columnOrder, setColumnOrder] = React.useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
-    const [currentDraggingColumn, setCurrentDraggingColumn] = React.useState((_b = initialState.currentDraggingColumn) !== null && _b !== void 0 ? _b : null);
-    const [currentDraggingRow, setCurrentDraggingRow] = React.useState((_c = initialState.currentDraggingRow) !== null && _c !== void 0 ? _c : null);
-    const [currentEditingCell, setCurrentEditingCell] = React.useState((_d = initialState.currentEditingCell) !== null && _d !== void 0 ? _d : null);
-    const [currentEditingRow, setCurrentEditingRow] = React.useState((_e = initialState.currentEditingRow) !== null && _e !== void 0 ? _e : null);
-    const [currentHoveredColumn, setCurrentHoveredColumn] = React.useState((_f = initialState.currentHoveredColumn) !== null && _f !== void 0 ? _f : null);
-    const [currentHoveredRow, setCurrentHoveredRow] = React.useState((_g = initialState.currentHoveredRow) !== null && _g !== void 0 ? _g : null);
-    const [density, setDensity] = React.useState((_h = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _h !== void 0 ? _h : 'comfortable');
-    const [isFullScreen, setIsFullScreen] = React.useState((_j = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _j !== void 0 ? _j : false);
-    const [showAlertBanner, setShowAlertBanner] = React.useState((_l = (_k = props.initialState) === null || _k === void 0 ? void 0 : _k.showAlertBanner) !== null && _l !== void 0 ? _l : false);
-    const [showColumnFilters, setShowFilters] = React.useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _m !== void 0 ? _m : false);
-    const [showGlobalFilter, setShowGlobalFilter] = React.useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _o !== void 0 ? _o : false);
-    const [columnFilterFns, setColumnFilterFns] = React.useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return ({
-            [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
-                ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
-                : (_m = (_f = col.filterFn) !== null && _f !== void 0 ? _f : (_g = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _g === void 0 ? void 0 : _g[(_l = (_j = (_h = col.id) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : (_k = col.accessorKey) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '']) !== null && _m !== void 0 ? _m : getDefaultColumnFilterFn(col),
-        });
-    })));
-    const [globalFilterFn, setGlobalFilterFn] = React.useState(props.globalFilterFn instanceof String
-        ? props.globalFilterFn
-        : 'fuzzy');
+    const [columnFilterFns, setColumnFilterFns] = React.useState((_a = initialState.columnFilterFns) !== null && _a !== void 0 ? _a : {});
+    const [columnOrder, setColumnOrder] = React.useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
+    const [density, setDensity] = React.useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = React.useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
+    const [draggingRow, setDraggingRow] = React.useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
+    const [editingCell, setEditingCell] = React.useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
+    const [editingRow, setEditingRow] = React.useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
+    const [globalFilterFn, setGlobalFilterFn] = React.useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
+    const [hoveredColumn, setHoveredColumn] = React.useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
+    const [hoveredRow, setHoveredRow] = React.useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
+    const [isFullScreen, setIsFullScreen] = React.useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
+    const [showAlertBanner, setShowAlertBanner] = React.useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
+    const [showColumnFilters, setShowFilters] = React.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showGlobalFilter, setShowGlobalFilter] = React.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const displayColumns = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
@@ -2253,8 +2762,6 @@ const MRT_TableRoot = (props) => {
         props.enableRowSelection,
         props.enableSelectAll,
         props.localization,
-        props.muiTableBodyCellProps,
-        props.muiTableHeadCellProps,
         props.positionActionsColumn,
     ]);
     const columnDefs = React.useMemo(() => prepareColumns([...displayColumns, ...props.columns], columnFilterFns, props.filterFns, props.sortingFns), [columnFilterFns, displayColumns, props.columns]);
@@ -2273,26 +2780,24 @@ const MRT_TableRoot = (props) => {
                 });
             })))
             : props.data;
-    }, [props.data, (_p = props.state) === null || _p === void 0 ? void 0 : _p.isLoading, (_q = props.state) === null || _q === void 0 ? void 0 : _q.showSkeletons]);
+    }, [props.data, (_r = props.state) === null || _r === void 0 ? void 0 : _r.isLoading, (_s = props.state) === null || _s === void 0 ? void 0 : _s.showSkeletons]);
     //@ts-ignore
     const table = Object.assign(Object.assign({}, reactTable.useReactTable(Object.assign(Object.assign({ getCoreRowModel: reactTable.getCoreRowModel(), getExpandedRowModel: reactTable.getExpandedRowModel(), getFacetedRowModel: reactTable.getFacetedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel(), getGroupedRowModel: reactTable.getGroupedRowModel(), getPaginationRowModel: reactTable.getPaginationRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), onColumnOrderChange: setColumnOrder, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: 
-        //@ts-ignore
-        (_r = props.filterFns[globalFilterFn]) !== null && _r !== void 0 ? _r : props.filterFns.fuzzy, initialState, state: Object.assign({ columnOrder,
-            currentDraggingColumn,
-            currentDraggingRow,
-            currentEditingCell,
-            currentEditingRow,
-            columnFilterFns,
-            globalFilterFn,
-            currentHoveredColumn,
-            currentHoveredRow,
+        columns: columnDefs, data, globalFilterFn: (_u = (_t = props.filterFns) === null || _t === void 0 ? void 0 : _t[globalFilterFn]) !== null && _u !== void 0 ? _u : (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+            columnOrder,
             density,
+            draggingColumn,
+            draggingRow,
+            editingCell,
+            editingRow,
+            globalFilterFn,
+            hoveredColumn,
+            hoveredRow,
             isFullScreen,
             showAlertBanner,
             showColumnFilters,
-            showGlobalFilter }, props.state), tableId }))), { setCurrentDraggingColumn: (_s = props.onCurrentDraggingColumnChange) !== null && _s !== void 0 ? _s : setCurrentDraggingColumn, setCurrentDraggingRow: (_t = props.onCurrentDraggingRowChange) !== null && _t !== void 0 ? _t : setCurrentDraggingRow, setCurrentEditingCell: (_u = props.onCurrentEditingCellChange) !== null && _u !== void 0 ? _u : setCurrentEditingCell, setCurrentEditingRow: (_v = props.onCurrentEditingRowChange) !== null && _v !== void 0 ? _v : setCurrentEditingRow, setColumnFilterFns: (_w = props.onCurrentFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setGlobalFilterFn: (_x = props.onCurrentGlobalFilterFnChange) !== null && _x !== void 0 ? _x : setGlobalFilterFn, setCurrentHoveredColumn: (_y = props.onCurrentHoveredColumnChange) !== null && _y !== void 0 ? _y : setCurrentHoveredColumn, setCurrentHoveredRow: (_z = props.onCurrentHoveredRowChange) !== null && _z !== void 0 ? _z : setCurrentHoveredRow, setDensity: (_0 = props.onDensityChange) !== null && _0 !== void 0 ? _0 : setDensity, setIsFullScreen: (_1 = props.onIsFullScreenChange) !== null && _1 !== void 0 ? _1 : setIsFullScreen, setShowAlertBanner: (_2 = props.onShowAlertBannerChange) !== null && _2 !== void 0 ? _2 : setShowAlertBanner, setShowFilters: (_3 = props.onShowFiltersChange) !== null && _3 !== void 0 ? _3 : setShowFilters, setShowGlobalFilter: (_4 = props.onShowGlobalFilterChange) !== null && _4 !== void 0 ? _4 : setShowGlobalFilter });
+            showGlobalFilter }, props.state), tableId }))), { 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 });
     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 })),
@@ -2304,5 +2809,11 @@ var MaterialReactTable = (_a) => {
     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, enableColumnFilterChangeMode: enableColumnFilterChangeMode, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterChangeMode: enableGlobalFilterChangeMode, 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)));
 };
 
-module.exports = MaterialReactTable;
+exports.MRT_FullScreenToggleButton = MRT_FullScreenToggleButton;
+exports.MRT_GlobalFilterTextField = MRT_GlobalFilterTextField;
+exports.MRT_ShowHideColumnsButton = MRT_ShowHideColumnsButton;
+exports.MRT_ToggleDensePaddingButton = MRT_ToggleDensePaddingButton;
+exports.MRT_ToggleFiltersButton = MRT_ToggleFiltersButton;
+exports.MRT_ToggleGlobalFilterButton = MRT_ToggleGlobalFilterButton;
+exports["default"] = MaterialReactTable;
 //# sourceMappingURL=index.js.map