material-react-table 0.8.15 → 0.9.2

package/dist/material-react-table.cjs.development.js

@@ -193,7 +193,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       _tableInstance$option = tableInstance.options,
       ExpandMoreIcon = _tableInstance$option.icons.ExpandMoreIcon,
       localization = _tableInstance$option.localization,
-      onRowExpandChange = _tableInstance$option.onRowExpandChange,
+      onMrtRowExpandChange = _tableInstance$option.onMrtRowExpandChange,
       renderDetailPanel = _tableInstance$option.renderDetailPanel;
 
   var _getState = getState(),
@@ -201,7 +201,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
 
   var handleToggleExpand = function handleToggleExpand(event) {
     row.toggleExpanded();
-    onRowExpandChange == null ? void 0 : onRowExpandChange({
+    onMrtRowExpandChange == null ? void 0 : onMrtRowExpandChange({
       event: event,
       row: row,
       tableInstance: tableInstance
@@ -3421,7 +3421,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
+      onMrtToggleColumnVisibility = _tableInstance$option.onMrtToggleColumnVisibility,
       setColumnOrder = tableInstance.setColumnOrder;
 
   var _getState = getState(),
@@ -3468,7 +3468,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       column.toggleVisibility();
     }
 
-    onToggleColumnVisibility == null ? void 0 : onToggleColumnVisibility({
+    onMrtToggleColumnVisibility == null ? void 0 : onMrtToggleColumnVisibility({
       column: column,
       columnVisibility: columnVisibility,
       tableInstance: tableInstance
@@ -3565,7 +3565,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     if (columnOrder.length > 0 && !columns.some(function (col) {
       return col.columnDefType === 'group';
     })) {
-      return [].concat(getLeftLeafColumns(), [].concat(new Set(columnOrder)).map(function (colId) {
+      return [].concat(getLeftLeafColumns(), Array.from(new Set(columnOrder)).map(function (colId) {
         return getCenterLeafColumns().find(function (col) {
           return (col == null ? void 0 : col.id) === colId;
         });
@@ -3656,7 +3656,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       SortIcon = _tableInstance$option2.SortIcon,
       RestartAltIcon = _tableInstance$option2.RestartAltIcon,
       VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       setShowFilters = tableInstance.setShowFilters;
   var column = header.column;
@@ -3724,7 +3724,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       var _document$getElementB, _header$muiTableHeadC, _header$muiTableHeadC2;
 
       return (_document$getElementB = document.getElementById( // @ts-ignore
-      (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + idPrefix + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
+      (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + tableId + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
     }, 200);
     setAnchorEl(null);
   };
@@ -3937,7 +3937,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       CancelIcon = _tableInstance$option2.CancelIcon,
       SaveIcon = _tableInstance$option2.SaveIcon,
       localization = _tableInstance$option.localization,
-      onEditSubmit = _tableInstance$option.onEditSubmit,
+      onMrtEditRowSubmit = _tableInstance$option.onMrtEditRowSubmit,
       setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
   var _getState = getState(),
@@ -3951,7 +3951,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   };
 
   var handleSave = function handleSave() {
-    onEditSubmit == null ? void 0 : onEditSubmit({
+    onMrtEditRowSubmit == null ? void 0 : onMrtEditRowSubmit({
       row: currentEditingRow != null ? currentEditingRow : row,
       tableInstance: tableInstance
     });
@@ -4063,8 +4063,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
       muiSelectCheckboxProps = _tableInstance$option.muiSelectCheckboxProps,
-      onSelectChange = _tableInstance$option.onSelectChange,
-      onSelectAllChange = _tableInstance$option.onSelectAllChange,
+      onMrtSelectRowChange = _tableInstance$option.onMrtSelectRowChange,
+      onMrtSelectAllChange = _tableInstance$option.onMrtSelectAllChange,
       selectAllMode = _tableInstance$option.selectAllMode;
 
   var _getState = getState(),
@@ -4078,14 +4078,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
         tableInstance.getToggleAllPageRowsSelectedHandler()(event);
       }
 
-      onSelectAllChange == null ? void 0 : onSelectAllChange({
+      onMrtSelectAllChange == null ? void 0 : onMrtSelectAllChange({
         event: event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         tableInstance: tableInstance
       });
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
-      onSelectChange == null ? void 0 : onSelectChange({
+      onMrtSelectRowChange == null ? void 0 : onMrtSelectRowChange({
         event: event,
         row: row,
         selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
@@ -5104,14 +5104,14 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _tableInstance$option2.FullscreenExitIcon,
       FullscreenIcon = _tableInstance$option2.FullscreenIcon,
       localization = _tableInstance$option.localization,
-      onToggleFullScreen = _tableInstance$option.onToggleFullScreen,
+      onMrtToggleFullScreen = _tableInstance$option.onMrtToggleFullScreen,
       setIsFullScreen = tableInstance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
   var handleToggleFullScreen = function handleToggleFullScreen(event) {
-    onToggleFullScreen == null ? void 0 : onToggleFullScreen({
+    onMrtToggleFullScreen == null ? void 0 : onMrtToggleFullScreen({
       event: event,
       isFullScreen: !isFullScreen,
       tableInstance: tableInstance
@@ -5169,14 +5169,14 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _tableInstance$option2.DensityMediumIcon,
       DensitySmallIcon = _tableInstance$option2.DensitySmallIcon,
       localization = _tableInstance$option.localization,
-      onToggleDensePadding = _tableInstance$option.onToggleDensePadding,
+      onMrtToggleDensePadding = _tableInstance$option.onMrtToggleDensePadding,
       setIsDensePadding = tableInstance.setIsDensePadding;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
   var handleToggleDensePadding = function handleToggleDensePadding(event) {
-    onToggleDensePadding == null ? void 0 : onToggleDensePadding({
+    onMrtToggleDensePadding == null ? void 0 : onMrtToggleDensePadding({
       event: event,
       isDensePadding: !isDensePadding,
       tableInstance: tableInstance
@@ -5204,14 +5204,14 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _tableInstance$option2.FilterListIcon,
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       localization = _tableInstance$option.localization,
-      onToggleShowFilters = _tableInstance$option.onToggleShowFilters,
+      onMrtToggleShowFilters = _tableInstance$option.onMrtToggleShowFilters,
       setShowFilters = tableInstance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
   var handleToggleShowFilters = function handleToggleShowFilters(event) {
-    onToggleShowFilters == null ? void 0 : onToggleShowFilters({
+    onMrtToggleShowFilters == null ? void 0 : onMrtToggleShowFilters({
       event: event,
       showFilters: !showFilters,
       tableInstance: tableInstance
@@ -5238,10 +5238,10 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
       _tableInstance$option2 = _tableInstance$option.icons,
       SearchIcon = _tableInstance$option2.SearchIcon,
       SearchOffIcon = _tableInstance$option2.SearchOffIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onToggleShowGlobalFilter = _tableInstance$option.onToggleShowGlobalFilter,
+      onMrtToggleShowGlobalFilter = _tableInstance$option.onMrtToggleShowGlobalFilter,
       setShowGlobalFilter = tableInstance.setShowGlobalFilter;
 
   var _getState = getState(),
@@ -5252,7 +5252,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }) : muiSearchTextFieldProps;
 
   var handleToggleSearch = function handleToggleSearch(event) {
-    onToggleShowGlobalFilter == null ? void 0 : onToggleShowGlobalFilter({
+    onMrtToggleShowGlobalFilter == null ? void 0 : onMrtToggleShowGlobalFilter({
       event: event,
       showGlobalFilter: !showGlobalFilter,
       tableInstance: tableInstance
@@ -5261,7 +5261,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
 
-      return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + idPrefix + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
+      return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + tableId + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
     }, 200);
   };
 
@@ -5281,10 +5281,10 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
       _tableInstance$option2 = _tableInstance$option.icons,
       SearchIcon = _tableInstance$option2.SearchIcon,
       CloseIcon = _tableInstance$option2.CloseIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
+      onMrtGlobalFilterValueChange = _tableInstance$option.onMrtGlobalFilterValueChange;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -5302,7 +5302,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
+    onMrtGlobalFilterValueChange == null ? void 0 : onMrtGlobalFilterValueChange({
       event: event,
       tableInstance: tableInstance
     });
@@ -5324,7 +5324,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     "in": showGlobalFilter,
     orientation: "horizontal"
   }, React__default.createElement(material.TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-search-text-field",
+    id: "mrt-" + tableId + "-search-text-field",
     placeholder: localization.search,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
@@ -5379,6 +5379,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       enableFullScreenToggle = _tableInstance$option.enableFullScreenToggle,
       enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enableHiding = _tableInstance$option.enableHiding,
+      positionGlobalFilter = _tableInstance$option.positionGlobalFilter,
       renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
   return React__default.createElement(material.Box, {
     sx: {
@@ -5393,7 +5394,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
     MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
     tableInstance: tableInstance
-  })) != null ? _renderToolbarInterna : React__default.createElement(React__default.Fragment, null, enableGlobalFilter && React__default.createElement(MRT_SearchTextField, {
+  })) != null ? _renderToolbarInterna : React__default.createElement(React__default.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_SearchTextField, {
     tableInstance: tableInstance
   }), enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
@@ -5518,7 +5519,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
-  var tableInstance = _ref.tableInstance;
+  var alignTo = _ref.alignTo,
+      tableInstance = _ref.tableInstance;
   var muiLinearProgressProps = tableInstance.options.muiLinearProgressProps,
       getState = tableInstance.getState;
 
@@ -5532,10 +5534,19 @@ var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
   return React__default.createElement(material.Collapse, {
     "in": isLoading || showProgressBars,
     mountOnEnter: true,
-    unmountOnExit: true
+    unmountOnExit: true,
+    sx: {
+      bottom: alignTo === 'bottom' ? 0 : undefined,
+      position: 'absolute',
+      top: alignTo === 'top' ? 0 : undefined,
+      width: '100%'
+    }
   }, React__default.createElement(material.LinearProgress, Object.assign({
     "aria-label": "Loading",
-    "aria-busy": "true"
+    "aria-busy": "true",
+    sx: {
+      position: 'relative'
+    }
   }, linearProgressProps)));
 };
 
@@ -5559,25 +5570,28 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var tableInstance = _ref2.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
+      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enablePagination = _tableInstance$option.enablePagination,
       enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       muiTableToolbarTopProps = _tableInstance$option.muiTableToolbarTopProps,
       positionPagination = _tableInstance$option.positionPagination,
+      positionGlobalFilter = _tableInstance$option.positionGlobalFilter,
       positionToolbarActions = _tableInstance$option.positionToolbarActions,
       positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
       renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
 
   var _getState = getState(),
-      isFullScreen = _getState.isFullScreen;
+      isFullScreen = _getState.isFullScreen,
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var isMobile = material.useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
     tableInstance: tableInstance
   }) : muiTableToolbarTopProps;
-  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarCustomActions || showGlobalFilter);
   return React__default.createElement(material.Toolbar, Object.assign({
-    id: "mrt-" + idPrefix + "-toolbar-top",
+    id: "mrt-" + tableId + "-toolbar-top",
     variant: "dense"
   }, toolbarProps, {
     sx: function sx(theme) {
@@ -5599,15 +5613,18 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       position: stackAlertBanner ? 'relative' : 'absolute',
       right: 0,
       top: 0,
-      width: 'calc(100% - 1rem)'
+      width: renderToolbarCustomActions ? '100%' : undefined
     }
-  }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
+  }, enableGlobalFilter && positionGlobalFilter === 'left' && React__default.createElement(MRT_SearchTextField, {
+    tableInstance: tableInstance
+  }), (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
     tableInstance: tableInstance
   })) != null ? _renderToolbarCustomA : React__default.createElement("span", null), enableToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   })), React__default.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })), React__default.createElement(MRT_LinearProgressBar, {
+    alignTo: "bottom",
     tableInstance: tableInstance
   }));
 };
@@ -5617,7 +5634,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       enablePagination = _tableInstance$option.enablePagination,
       muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
       positionPagination = _tableInstance$option.positionPagination,
@@ -5634,7 +5651,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   }) : muiTableToolbarBottomProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'bottom' && !!renderToolbarCustomActions && positionToolbarActions === 'bottom';
   return React__default.createElement(material.Toolbar, Object.assign({
-    id: "mrt-" + idPrefix + "-toolbar-bottom",
+    id: "mrt-" + tableId + "-toolbar-bottom",
     variant: "dense"
   }, toolbarProps, {
     sx: function sx(theme) {
@@ -5642,11 +5659,12 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
         theme: theme
       }), {
         bottom: isFullScreen ? '0' : undefined,
-        position: isFullScreen ? 'fixed' : undefined,
-        boxShadow: "-3px 0 6px " + material.alpha(theme.palette.common.black, 0.1)
+        boxShadow: "-3px 0 6px " + material.alpha(theme.palette.common.black, 0.1),
+        position: isFullScreen ? 'fixed' : 'relative'
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React__default.createElement(MRT_LinearProgressBar, {
+    alignTo: 'top',
     tableInstance: tableInstance
   }), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, {
     tableInstance: tableInstance
@@ -5677,7 +5695,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       _tableInstance$option2 = _tableInstance$option.icons,
       FilterListIcon = _tableInstance$option2.FilterListIcon,
       CloseIcon = _tableInstance$option2.CloseIcon,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       localization = _tableInstance$option.localization,
       muiTableHeadCellFilterTextFieldProps = _tableInstance$option.muiTableHeadCellFilterTextFieldProps,
       setCurrentFilterFns = tableInstance.setCurrentFilterFns;
@@ -5755,7 +5773,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }));
   }
 
-  var filterId = "mrt-" + idPrefix + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
+  var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
   var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var isSelectFilter = !!columnDef.filterSelectOptions;
   var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
@@ -5958,6 +5976,7 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
       opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
       p: '2px',
       transition: 'all 0.2s ease-in-out',
+      transform: 'scale(0.66)',
       '&:hover': {
         backgroundColor: 'transparent',
         opacity: 0.8
@@ -6313,11 +6332,11 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       enableEditing = _tableInstance$option.enableEditing,
       muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
-      onCellEditBlur = _tableInstance$option.onCellEditBlur,
-      onCellEditChange = _tableInstance$option.onCellEditChange,
+      onMrtCellEditBlur = _tableInstance$option.onMrtCellEditBlur,
+      onMrtCellEditChange = _tableInstance$option.onMrtCellEditChange,
       setCurrentEditingCell = tableInstance.setCurrentEditingCell,
       setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
@@ -6331,12 +6350,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var handleChange = function handleChange(event) {
     setValue(event.target.value);
-    columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
+    columnDef.onMrtCellEditChange == null ? void 0 : columnDef.onMrtCellEditChange({
       event: event,
       cell: cell,
       tableInstance: tableInstance
     });
-    onCellEditChange == null ? void 0 : onCellEditChange({
+    onMrtCellEditChange == null ? void 0 : onMrtCellEditChange({
       event: event,
       cell: cell,
       tableInstance: tableInstance
@@ -6351,12 +6370,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     }
 
     setCurrentEditingCell(null);
-    columnDef.onCellEditBlur == null ? void 0 : columnDef.onCellEditBlur({
+    columnDef.onMrtCellEditBlur == null ? void 0 : columnDef.onMrtCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
     });
-    onCellEditBlur == null ? void 0 : onCellEditBlur({
+    onMrtCellEditBlur == null ? void 0 : onMrtCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
@@ -6382,7 +6401,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   }
 
   return React__default.createElement(material.TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id,
+    id: "mrt-" + tableId + "-edit-cell-text-field-" + cell.id,
     margin: "dense",
     onBlur: handleBlur,
     onChange: handleChange,
@@ -6471,10 +6490,10 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
       enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
       enableEditing = _tableInstance$option.enableEditing,
-      idPrefix = _tableInstance$option.idPrefix,
+      tableId = _tableInstance$option.tableId,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
-      onCellClick = _tableInstance$option.onCellClick,
+      onMrtCellClick = _tableInstance$option.onMrtCellClick,
       setColumnOrder = tableInstance.setColumnOrder,
       setCurrentEditingCell = tableInstance.setCurrentEditingCell;
 
@@ -6520,7 +6539,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     if ((enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false && editingMode === 'cell') {
       setCurrentEditingCell(cell);
       setTimeout(function () {
-        var textField = document.getElementById("mrt-" + idPrefix + "-edit-cell-text-field-" + cell.id);
+        var textField = document.getElementById("mrt-" + tableId + "-edit-cell-text-field-" + cell.id);
 
         if (textField) {
           textField.focus();
@@ -6544,7 +6563,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   return React__default.createElement(material.TableCell, Object.assign({
     onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick({
+      return onMrtCellClick == null ? void 0 : onMrtCellClick({
         event: event,
         cell: cell,
         tableInstance: tableInstance
@@ -6567,7 +6586,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
-          backgroundColor: enableHover ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
+          backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     },
@@ -6605,7 +6624,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       _tableInstance$option = tableInstance.options,
       muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
       muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
-      onDetailPanelClick = _tableInstance$option.onDetailPanelClick,
+      onMrtDetailPanelClick = _tableInstance$option.onMrtDetailPanelClick,
       renderDetailPanel = _tableInstance$option.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -6618,7 +6637,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
     colSpan: getVisibleFlatColumns().length + 10,
     onClick: function onClick(event) {
-      return onDetailPanelClick == null ? void 0 : onDetailPanelClick({
+      return onMrtDetailPanelClick == null ? void 0 : onMrtDetailPanelClick({
         event: event,
         row: row,
         tableInstance: tableInstance
@@ -6642,9 +6661,10 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
 var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var row = _ref.row,
       tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
+  var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
+      _tableInstance$option = tableInstance.options,
       muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
-      onRowClick = _tableInstance$option.onRowClick,
+      onMrtRowClick = _tableInstance$option.onMrtRowClick,
       renderDetailPanel = _tableInstance$option.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
@@ -6653,7 +6673,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
     hover: true,
     onClick: function onClick(event) {
-      return onRowClick == null ? void 0 : onRowClick({
+      return onMrtRowClick == null ? void 0 : onMrtRowClick({
         event: event,
         row: row,
         tableInstance: tableInstance
@@ -6666,7 +6686,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
         backgroundColor: material.lighten(theme.palette.background["default"], 0.06),
         transition: 'all 0.2s ease-in-out',
         '&:hover td': {
-          backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
+          backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + material.lighten(theme.palette.background["default"], 0.12) : "" + material.darken(theme.palette.background["default"], 0.05) : undefined
         }
       }, tableRowProps == null ? void 0 : tableRowProps.sx);
     }
@@ -6683,24 +6703,540 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   }));
 };
 
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose$2(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.useLayoutEffect : React__default.useEffect;
+
+function useRect(nodeRef, initialRect) {
+  if (initialRect === void 0) {
+    initialRect = {
+      width: 0,
+      height: 0
+    };
+  }
+
+  var _React$useState = React__default.useState(nodeRef.current),
+      element = _React$useState[0],
+      setElement = _React$useState[1];
+
+  var _React$useReducer = React__default.useReducer(rectReducer, initialRect),
+      rect = _React$useReducer[0],
+      dispatch = _React$useReducer[1];
+
+  var initialRectSet = React__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.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.useRef({
+    scrollOffset: 0,
+    measurements: []
+  });
+
+  var _React$useState = React__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.useCallback(function (offset) {
+    if (parentRef.current) {
+      parentRef.current[scrollKey] = offset;
+    }
+  }, [parentRef, scrollKey]);
+  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
+  scrollToFn = React__default.useCallback(function (offset) {
+    resolvedScrollToFn(offset, defaultScrollToFn);
+  }, [defaultScrollToFn, resolvedScrollToFn]);
+
+  var _React$useState2 = React__default.useState({}),
+      measuredCache = _React$useState2[0],
+      setMeasuredCache = _React$useState2[1];
+
+  var measure = React__default.useCallback(function () {
+    return setMeasuredCache({});
+  }, []);
+  var pendingMeasuredCacheIndexesRef = React__default.useRef([]);
+  var measurements = React__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.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.useMemo(function () {
+    return rangeExtractor({
+      start: start,
+      end: end,
+      overscan: overscan,
+      size: measurements.length
+    });
+  }, [start, end, overscan, measurements.length, rangeExtractor]);
+  var measureSizeRef = React__default.useRef(measureSize);
+  measureSizeRef.current = measureSize;
+  var virtualItems = React__default.useMemo(function () {
+    var virtualItems = [];
+
+    var _loop = function _loop(k, len) {
+      var i = indexes[k];
+      var measurement = measurements[i];
+
+      var item = _extends$1(_extends$1({}, 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$1(_extends$1({}, 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.useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (mountedRef.current) {
+      setMeasuredCache({});
+    }
+
+    mountedRef.current = true;
+  }, [estimateSize]);
+  var scrollToOffset = React__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.useCallback(function (index, _temp2) {
+    var _ref3 = _temp2 === void 0 ? {} : _temp2,
+        _ref3$align = _ref3.align,
+        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
+        rest = _objectWithoutPropertiesLoose$2(_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$1({
+      align: align
+    }, rest));
+  }, [scrollToOffset, size]);
+  var scrollToIndex = React__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
+  };
+}
+
 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__default.createElement(material.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__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
+    style: {
+      height: paddingTop + "px"
+    }
+  })), (enableRowVirtualization ? virtualRows : rows).map(function (rowOrVirtualRow) {
+    var row = enableRowVirtualization ? rows[rowOrVirtualRow.index] : rowOrVirtualRow;
     return React__default.createElement(MRT_TableBodyRow, {
       key: row.id,
       row: row,
       tableInstance: tableInstance
     });
-  }));
+  }), enableRowVirtualization && paddingBottom > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
+    style: {
+      height: paddingBottom + "px"
+    }
+  })));
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
@@ -6794,7 +7330,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,
@@ -6808,20 +7345,21 @@ var MRT_Table = function MRT_Table(_ref) {
   }, tableProps), enableTableHead && React__default.createElement(MRT_TableHead, {
     tableInstance: tableInstance
   }), React__default.createElement(MRT_TableBody, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }), enableTableFooter && React__default.createElement(MRT_TableFooter, {
     tableInstance: tableInstance
   }));
 };
 
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      idPrefix = _tableInstance$option.idPrefix,
-      muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
+      muiTableContainerProps = _tableInstance$option.muiTableContainerProps,
+      tableId = _tableInstance$option.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -6833,14 +7371,16 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
     tableInstance: tableInstance
   }) : muiTableContainerProps;
-  useIsomorphicLayoutEffect$1(function () {
+  useIsomorphicLayoutEffect$2(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
 
-    var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + idPrefix + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
-    var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + idPrefix + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
+    var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + tableId + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
+    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__default.useRef(null);
   return React__default.createElement(material.TableContainer, Object.assign({}, tableContainerProps, {
+    ref: tableContainerRef,
     sx: _extends({
       maxWidth: '100%',
       maxHeight: enableStickyHeader ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 2000px)" : undefined,
@@ -6850,6 +7390,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
   }), React__default.createElement(MRT_Table, {
+    tableContainerRef: tableContainerRef,
     tableInstance: tableInstance
   }));
 };
@@ -6907,15 +7448,15 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 var MRT_TableRoot = function MRT_TableRoot(props) {
   var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4;
 
-  var _useState = React.useState(props.idPrefix),
-      idPrefix = _useState[0],
+  var _useState = React.useState(props.tableId),
+      tableId = _useState[0],
       setIdPrefix = _useState[1];
 
   React.useEffect(function () {
-    var _props$idPrefix;
+    var _props$tableId;
 
-    return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
-  }, [props.idPrefix]);
+    return setIdPrefix((_props$tableId = props.tableId) != null ? _props$tableId : Math.random().toString(36).substring(2, 9));
+  }, [props.tableId]);
   var showActionColumn = props.enableRowActions || props.enableEditing && props.editingMode === 'row';
   var showExpandColumn = props.enableExpanding || props.enableGrouping;
   var initialState = React.useMemo(function () {
@@ -6926,7 +7467,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return c.id;
     })).filter(Boolean) : [];
 
-    if (!props.enablePersistentState || !props.idPrefix) {
+    if (!props.enablePersistentState || !props.tableId) {
       return initState;
     }
 
@@ -6938,7 +7479,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return initState;
     }
 
-    var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + idPrefix + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + idPrefix + "-table-state") : '{}';
+    var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + tableId + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + tableId + "-table-state") : '{}';
 
     if (storedState) {
       var parsedState = JSON.parse(storedState);
@@ -7004,7 +7545,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         getSubRows: function getSubRows(row) {
           return row == null ? void 0 : row.subRows;
         },
-        idPrefix: idPrefix,
+        tableId: tableId,
         initialState: initialState
       })
     );
@@ -7128,12 +7669,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return;
     }
 
-    if (!props.idPrefix && "development" !== 'production') {
-      console.warn('a unique idPrefix prop is required for persistent table state to work');
+    if (!props.tableId && "development" !== 'production') {
+      console.warn('a unique tableId prop is required for persistent table state to work');
       return;
     }
 
-    var itemArgs = ["mrt-" + idPrefix + "-table-state", JSON.stringify(tableInstance.getState())];
+    var itemArgs = ["mrt-" + tableId + "-table-state", JSON.stringify(tableInstance.getState())];
 
     if (props.persistentStateMode === 'localStorage') {
       var _localStorage;
@@ -7144,7 +7685,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
       (_sessionStorage = sessionStorage).setItem.apply(_sessionStorage, itemArgs);
     }
-  }, [props.enablePersistentState, props.idPrefix, props.persistentStateMode, tableInstance]);
+  }, [props.enablePersistentState, props.tableId, props.persistentStateMode, tableInstance]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
     PaperComponent: material.Box,
     TransitionComponent: material.Grow,
@@ -7163,7 +7704,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -7229,6 +7770,8 @@ var MaterialReactTable = (function (_ref) {
       positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
       _ref$positionPaginati = _ref.positionPagination,
       positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
+      _ref$positionGlobalFi = _ref.positionGlobalFilter,
+      positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
       _ref$positionToolbarA = _ref.positionToolbarActions,
       positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
       _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
@@ -7268,6 +7811,7 @@ var MaterialReactTable = (function (_ref) {
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     persistentStateMode: persistentStateMode,
     positionActionsColumn: positionActionsColumn,
+    positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,
     positionToolbarAlertBanner: positionToolbarAlertBanner,