@luminati-io/uikit 3.7.9 → 3.7.10-beta.0

package/dist/umd/uikit.development.js

@@ -39922,7 +39922,7 @@ __webpack_require__.r(__webpack_exports__);
 /*jslint react:true*/
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 
-var _excluded = ["columns", "data", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "ExpandHandleComp", "noDataText", "loadingText", "isLoading", "onPageChange", "manualPagination", "totalCount", "paginateExpandedRows", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps", "selectedRowIds", "canOrderColumns", "rowActions", "columnSort", "onColumnSortChanged", "isCellEditable", "onStartEdit", "draggableRows", "onRowDragStart", "onRowDragEnd", "hoverActions", "hoverActionsDirection"];
+var _excluded = ["columns", "data", "pageSize", "pageSizes", "children", "stateManager", "hooks", "NoDataComp", "LoadingComp", "ExpandHandleComp", "noDataText", "loadingText", "isLoading", "onPageChange", "manualPagination", "totalCount", "paginateExpandedRows", "getHeaderProps", "getColumnProps", "getRowProps", "getCellProps", "getFooterProps", "selectedRowIds", "canOrderColumns", "rowActions", "columnSort", "onColumnSortChanged", "isCellEditable", "onStartEdit", "draggableRows", "onRowDragStart", "onRowDragEnd", "hoverActions", "hoverActionsDirection", "virtualized"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -40013,6 +40013,7 @@ var Provider = function Provider(props) {
     onRowDragEnd = props.onRowDragEnd,
     hoverActions = props.hoverActions,
     hoverActionsDirection = props.hoverActionsDirection,
+    virtualized = props.virtualized,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -40090,7 +40091,8 @@ var Provider = function Provider(props) {
     onRowDragStart: onRowDragStart,
     onRowDragEnd: onRowDragEnd,
     hoverActions: hoverActions,
-    hoverActionsDirection: hoverActionsDirection
+    hoverActionsDirection: hoverActionsDirection,
+    virtualized: virtualized
   });
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableContext.Provider, {
     value: value
@@ -40120,7 +40122,8 @@ Provider.defaultProps = {
     return column.canEdit;
   },
   draggableRows: false,
-  hoverActionsDirection: 'row'
+  hoverActionsDirection: 'row',
+  virtualized: false
 };
 Provider.propTypes = {
   columns: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
@@ -40184,7 +40187,8 @@ Provider.propTypes = {
   onRowDragStart: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   onRowDragEnd: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
   hoverActions: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)), (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func)]),
-  hoverActionsDirection: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['row', 'column'])
+  hoverActionsDirection: prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(['row', 'column']),
+  virtualized: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 var calcPageCount = function calcPageCount(totalCount, pageSize) {
   return Math.ceil(totalCount / pageSize);
@@ -40529,6 +40533,101 @@ var searchColumn = function searchColumn(search) {
 
 /***/ }),
 
+/***/ "./src/table/dnd.js":
+/*!**************************!*\
+  !*** ./src/table/dnd.js ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DraggableWrapper: () => (/* binding */ DraggableWrapper),
+/* harmony export */   DroppableBody: () => (/* binding */ DroppableBody)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-beautiful-dnd */ "./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js");
+/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
+/* harmony import */ var _row_hover_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./row_hover_actions */ "./src/table/row_hover_actions.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
+
+
+var useDraggableRowProps = function useDraggableRowProps(row, dndIndex) {
+  var _rowProps$draggable;
+  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_1__.useTableContext)(),
+    getRowProps = _useTableContext.getRowProps,
+    draggableRows = _useTableContext.draggableRows,
+    prepareRow = _useTableContext.prepareRow;
+  prepareRow(row);
+  var rowProps = row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row));
+  var draggable = (_rowProps$draggable = rowProps === null || rowProps === void 0 ? void 0 : rowProps.draggable) !== null && _rowProps$draggable !== void 0 ? _rowProps$draggable : true;
+  return {
+    key: row.id,
+    draggableId: row.id,
+    index: dndIndex,
+    isDragDisabled: !draggableRows || !draggable
+  };
+};
+var DraggableWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo(function (props) {
+  var render = props.render,
+    row = props.row,
+    index = props.index;
+  var draggableProps = useDraggableRowProps(row, index);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_3__.Draggable, draggableProps, function (provided) {
+    return render(_objectSpread(_objectSpread({}, provided.draggableProps), {}, {
+      provided: provided,
+      ref: provided.innerRef
+    }), provided.dragHandleProps);
+  });
+});
+DraggableWrapper.displayName = 'DraggableWrapper';
+var DroppableBody = function DroppableBody(props) {
+  var _props$rows = props.rows,
+    rows = _props$rows === void 0 ? [] : _props$rows,
+    droppableProps = props.droppableProps,
+    renderRow = props.renderRow;
+  var _useRowHoverActions = (0,_row_hover_actions__WEBPACK_IMPORTED_MODULE_2__.useRowHoverActions)(),
+    renderHoverActions = _useRowHoverActions.renderHoverActions,
+    rowHoverEvents = _useRowHoverActions.rowHoverEvents;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_3__.Droppable, droppableProps, function (provided) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _extends({
+      ref: provided.innerRef
+    }, provided.droppableProps), rows.map(function (row, index) {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(DraggableWrapper, {
+        key: row.id,
+        row: row,
+        index: index,
+        render: function render(wrapperProps, dragHandleProps) {
+          return renderRow({
+            row: row,
+            index: index,
+            wrapperProps: _objectSpread(_objectSpread(_objectSpread({}, wrapperProps), rowHoverEvents), {}, {
+              onPointerEnter: function onPointerEnter(e) {
+                return rowHoverEvents.onPointerEnter(e, row, dragHandleProps);
+              }
+            })
+          });
+        }
+      });
+    }), provided.placeholder), renderHoverActions());
+  });
+};
+
+/***/ }),
+
 /***/ "./src/table/editable_columns.js":
 /*!***************************************!*\
   !*** ./src/table/editable_columns.js ***!
@@ -41976,25 +42075,28 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-beautiful-dnd */ "./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js");
 /* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
 /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
 /* harmony import */ var _table_cell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./table_cell */ "./src/table/table_cell.js");
-/* harmony import */ var _row_hover_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./row_hover_actions */ "./src/table/row_hover_actions.js");
-/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
 // LICENSE_CODE ZON
 
 
 /*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["provided", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 
 
 
 
-
-
-
 var preventOnClickClass = 'tableCell--preventOnClick';
 var renderRow = function renderRow(opt) {
   var className = opt.className,
@@ -42004,7 +42106,7 @@ var renderRow = function renderRow(opt) {
     rowDensity = opt.rowDensity,
     isLast = opt.isLast,
     renderRowSubComponent = opt.renderRowSubComponent,
-    dndIndex = opt.dndIndex;
+    wrapperProps = opt.wrapperProps;
   var isExpanded = row.isExpanded,
     isPinned = row.isPinned,
     original = row.original;
@@ -42034,15 +42136,13 @@ var renderRow = function renderRow(opt) {
     var wrapperKey = "".concat(rowProps.key || row.id, "_wrapper");
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowWrapper, {
       key: wrapperKey,
-      dndIndex: dndIndex,
-      row: row
+      wrapperProps: wrapperProps
     }, tableRow);
   }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
     key: "".concat(rowProps.key, "_fragment")
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowWrapper, {
-    dndIndex: dndIndex,
-    row: row
+    wrapperProps: wrapperProps
   }, tableRow, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TableRow, _extends({}, rowProps, {
     key: "".concat(rowProps.key, "_subcomponent"),
     className: (0,_util__WEBPACK_IMPORTED_MODULE_3__.classNames)(className, {
@@ -42066,43 +42166,26 @@ var TableRow = styled_components__WEBPACK_IMPORTED_MODULE_1___default().div.with
     white_spaced: '72'
   }[props.$rowDensity] || '32';
 }, _table_cell__WEBPACK_IMPORTED_MODULE_4__.TableCellContent, _theme__WEBPACK_IMPORTED_MODULE_2__["default"].color.gray_2);
-var useDraggableRowProps = function useDraggableRowProps(row, dndIndex) {
-  var _rowProps$draggable;
-  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_6__.useTableContext)(),
-    getRowProps = _useTableContext.getRowProps,
-    draggableRows = _useTableContext.draggableRows;
-  var rowProps = row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row));
-  var draggable = (_rowProps$draggable = rowProps === null || rowProps === void 0 ? void 0 : rowProps.draggable) !== null && _rowProps$draggable !== void 0 ? _rowProps$draggable : true;
-  return {
-    key: row.id,
-    draggableId: row.id,
-    index: dndIndex,
-    isDragDisabled: !draggableRows || !draggable
-  };
-};
-var RowWrapper = function RowWrapper(props) {
+var RowWrapper = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo(function (props) {
+  var _provided$draggablePr;
   var children = props.children,
-    dndIndex = props.dndIndex,
-    row = props.row;
-  var _useRowHoverActions = (0,_row_hover_actions__WEBPACK_IMPORTED_MODULE_5__.useRowHoverActions)(row),
-    renderHoverActions = _useRowHoverActions.renderHoverActions,
-    setRowRef = _useRowHoverActions.setRowRef,
-    hoverProps = _useRowHoverActions.hoverProps;
-  var handleWrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (rowElment, cb) {
-    setRowRef(rowElment);
-    cb(rowElment);
-  }, []);
-  var draggableProps = useDraggableRowProps(row, dndIndex);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_7__.Draggable, draggableProps, function (provided) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _extends({}, provided.draggableProps, hoverProps, {
-      ref: function ref(element) {
-        return handleWrapperRef(element, provided.innerRef);
-      }
-    }), children, renderHoverActions({
-      dragHandleProps: provided.dragHandleProps
-    }));
+    _props$wrapperProps = props.wrapperProps,
+    wrapperProps = _props$wrapperProps === void 0 ? {} : _props$wrapperProps;
+  var _wrapperProps$provide = wrapperProps.provided,
+    provided = _wrapperProps$provide === void 0 ? {} : _wrapperProps$provide,
+    _wrapperProps$style = wrapperProps.style,
+    style = _wrapperProps$style === void 0 ? {} : _wrapperProps$style,
+    rest = _objectWithoutProperties(wrapperProps, _excluded);
+  var _wrapperProps = _objectSpread(_objectSpread(_objectSpread({}, rest), provided.draggableProps), {}, {
+    style: _objectSpread(_objectSpread({}, style), (_provided$draggablePr = provided.draggableProps) === null || _provided$draggablePr === void 0 ? void 0 : _provided$draggablePr.style)
   });
-};
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _wrapperProps, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", _extends({
+    style: {
+      visibility: 'hidden'
+    }
+  }, provided.dragHandleProps)));
+});
+RowWrapper.displayName = 'RowWrapper';
 
 /***/ }),
 
@@ -42129,7 +42212,13 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["visible", "dragHandleProps", "row"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -42155,7 +42244,9 @@ var RowHoverActions = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forward
     getRowProps = _useTableContext.getRowProps,
     draggableRows = _useTableContext.draggableRows,
     contextHoverActions = _useTableContext.hoverActions,
-    hoverActionsDirection = _useTableContext.hoverActionsDirection;
+    hoverActionsDirection = _useTableContext.hoverActionsDirection,
+    prepareRow = _useTableContext.prepareRow;
+  prepareRow(row);
   var _row$getRowProps = row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row)),
     draggable = _row$getRowProps.draggable;
   var hoverActions = typeof contextHoverActions == 'function' ? contextHoverActions(row) : contextHoverActions;
@@ -42185,13 +42276,13 @@ var HoverActionsList = styled_components__WEBPACK_IMPORTED_MODULE_1___default().
 }, _theme__WEBPACK_IMPORTED_MODULE_2__["default"].spacing['02'], function (props) {
   return props.$visible ? 'visible' : 'hidden';
 });
-var useRowHoverActions = function useRowHoverActions(row) {
+var useRowHoverActions = function useRowHoverActions() {
   var _useTableContext2 = (0,_context__WEBPACK_IMPORTED_MODULE_4__.useTableContext)(),
     isDraggingRow = _useTableContext2.isDraggingRow;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
-    rowRef = _useState2[0],
-    setRowRef = _useState2[1];
+    hoveredRow = _useState2[0],
+    setHoveredRow = _useState2[1];
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),
     _useState4 = _slicedToArray(_useState3, 2),
     hoverActionsRef = _useState4[0],
@@ -42200,7 +42291,7 @@ var useRowHoverActions = function useRowHoverActions(row) {
     _useState6 = _slicedToArray(_useState5, 2),
     visibleHoverActions = _useState6[0],
     setVisibleHoverActions = _useState6[1];
-  var _usePopper = (0,react_popper__WEBPACK_IMPORTED_MODULE_5__.usePopper)(rowRef, hoverActionsRef, {
+  var _usePopper = (0,react_popper__WEBPACK_IMPORTED_MODULE_5__.usePopper)(hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.ref, hoverActionsRef, {
       modifiers: [{
         name: 'flip',
         enabled: true,
@@ -42213,31 +42304,47 @@ var useRowHoverActions = function useRowHoverActions(row) {
     styles = _usePopper.styles,
     attributes = _usePopper.attributes,
     update = _usePopper.update;
-  var onPointerEnter = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+  var _onPointerEnter = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     if (typeof update == 'function') update();
     !isDraggingRow && setVisibleHoverActions(true);
   }, [isDraggingRow, update]);
   var onPointerLeave = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
     return setVisibleHoverActions(false);
   }, []);
-  var hoverProps = {
-    onPointerEnter: onPointerEnter,
-    onPointerLeave: onPointerLeave
-  };
-  var renderHoverActions = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
-    var extraProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowHoverActions, _extends({
+  var rowHoverEvents = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return {
+      onPointerEnter: function onPointerEnter(e, row, dragHandleProps) {
+        setHoveredRow({
+          row: row,
+          ref: e.currentTarget,
+          dragHandleProps: dragHandleProps
+        });
+        _onPointerEnter();
+      },
+      onPointerLeave: onPointerLeave
+    };
+  }, [_onPointerEnter, onPointerLeave]);
+  var popperProps = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
+    return _objectSpread(_objectSpread({
+      onPointerEnter: _onPointerEnter,
+      onPointerLeave: onPointerLeave
+    }, attributes.popper), {}, {
+      style: _objectSpread(_objectSpread({}, styles.popper), {}, {
+        zIndex: 9999
+      }),
       visible: visibleHoverActions,
-      row: row,
-      ref: setHoverActionsRef
-    }, hoverProps, {
-      style: styles.popper
-    }, attributes.popper, extraProps));
-  }, [row, visibleHoverActions, styles, attributes, hoverProps]);
+      row: hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.row,
+      ref: setHoverActionsRef,
+      dragHandleProps: hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.dragHandleProps
+    });
+  }, [_onPointerEnter, onPointerLeave, attributes, styles, isDraggingRow, visibleHoverActions, setHoverActionsRef, hoveredRow]);
+  var renderHoverActions = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    if (!(hoveredRow !== null && hoveredRow !== void 0 && hoveredRow.row) || !(hoveredRow !== null && hoveredRow !== void 0 && hoveredRow.ref)) return null;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowHoverActions, popperProps);
+  }, [hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.row, popperProps]);
   return {
     renderHoverActions: renderHoverActions,
-    setRowRef: setRowRef,
-    hoverProps: hoverProps
+    rowHoverEvents: rowHoverEvents
   };
 };
 
@@ -42872,14 +42979,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! styled-components */ "styled-components");
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-beautiful-dnd */ "./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js");
-/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
-/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
-/* harmony import */ var _footer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./footer */ "./src/table/footer.js");
-/* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./header */ "./src/table/header.js");
-/* harmony import */ var _render_row__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./render_row */ "./src/table/render_row.js");
-/* harmony import */ var _sticky_header__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./sticky_header */ "./src/table/sticky_header.js");
+/* harmony import */ var react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! react-beautiful-dnd */ "./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js");
+/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-virtualized */ "react-virtualized");
+/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_virtualized__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../util */ "./src/util/index.js");
+/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
+/* harmony import */ var _footer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./footer */ "./src/table/footer.js");
+/* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./header */ "./src/table/header.js");
+/* harmony import */ var _render_row__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./render_row */ "./src/table/render_row.js");
+/* harmony import */ var _sticky_header__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./sticky_header */ "./src/table/sticky_header.js");
+/* harmony import */ var _virtualized_body__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./virtualized_body */ "./src/table/virtualized_body.js");
+/* harmony import */ var _dnd__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./dnd */ "./src/table/dnd.js");
 // LICENSE_CODE ZON
 
 
@@ -42893,6 +43004,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
@@ -42906,27 +43023,31 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
+
+
 var Table = function Table(props) {
-  var context = (0,_context__WEBPACK_IMPORTED_MODULE_6__.useTableContext)();
+  var context = (0,_context__WEBPACK_IMPORTED_MODULE_7__.useTableContext)();
   // not under context
-  if (context === _context__WEBPACK_IMPORTED_MODULE_6__.defaultContextValue) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_context__WEBPACK_IMPORTED_MODULE_6__["default"], props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(InnerTable, props));
+  if (context === _context__WEBPACK_IMPORTED_MODULE_7__.defaultContextValue) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_context__WEBPACK_IMPORTED_MODULE_7__["default"], props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(InnerTable, props));
   }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(InnerTable, props);
 };
 Table.displayName = 'Table';
-Table.propTypes = lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_1___default()(_context__WEBPACK_IMPORTED_MODULE_6__["default"].propTypes);
+Table.propTypes = lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_1___default()(_context__WEBPACK_IMPORTED_MODULE_7__["default"].propTypes);
 var InnerTable = function InnerTable(props) {
-  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_6__.useTableContext)(),
+  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_7__.useTableContext)(),
     getTableProps = _useTableContext.getTableProps,
     context = _objectWithoutProperties(_useTableContext, _excluded);
-  var className = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(props.className, context.className);
-  var rowDensity = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(props.rowDensity, context.rowDensity);
-  var onRowClick = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(props.onRowClick, context.onRowClick);
-  var stickyHeader = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(props.stickyHeader, context.stickyHeader);
-  var scrollTarget = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(props.scrollTarget, context.scrollTarget);
-  var scrollable = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(props.scrollable, context.scrollable);
-  var scrollHeight = (0,_util__WEBPACK_IMPORTED_MODULE_5__.firstDefined)(props.scrollHeight, context.scrollHeight);
+  var className = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.className, context.className);
+  var rowDensity = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.rowDensity, context.rowDensity);
+  var onRowClick = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.onRowClick, context.onRowClick);
+  var stickyHeader = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.stickyHeader, context.stickyHeader);
+  var scrollTarget = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.scrollTarget, context.scrollTarget);
+  var scrollable = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.scrollable, context.scrollable);
+  var virtualized = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.virtualized, context.virtualized);
+  var scrollHeight = (0,_util__WEBPACK_IMPORTED_MODULE_6__.firstDefined)(props.scrollHeight, context.scrollHeight);
   var offsetTop = lodash_isObject__WEBPACK_IMPORTED_MODULE_0___default()(stickyHeader) && stickyHeader.offsetTop || 0;
   var wrapperRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
   var tableRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();
@@ -42939,23 +43060,29 @@ var InnerTable = function InnerTable(props) {
   var headStyle = scrollable ? {
     overflow: 'hidden'
   } : undefined;
-  var bodyStyle = scrollable ? {
-    overflow: 'auto',
-    maxHeight: scrollHeight
-  } : undefined;
+  var bodyStyle = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {
+    if (virtualized) return {
+      maxHeight: scrollHeight
+    };
+    if (scrollable) return {
+      overflow: 'auto',
+      maxHeight: scrollHeight
+    };
+  }, [virtualized, scrollable]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableWrapper, _extends({
     ref: wrapperRef
-  }, (0,_util__WEBPACK_IMPORTED_MODULE_5__.getCommonProps)(props), {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.classNames)(className, {
+  }, (0,_util__WEBPACK_IMPORTED_MODULE_6__.getCommonProps)(props), {
+    $virtualized: virtualized,
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.classNames)(className, {
       container: true
     }, className)
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(StyledTable, _extends({
     ref: tableRef
   }, getTableProps(), {
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.classNames)(className, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.classNames)(className, {
       table: true
     })
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_header__WEBPACK_IMPORTED_MODULE_8__.TableHeader, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_header__WEBPACK_IMPORTED_MODULE_9__.TableHeader, {
     ref: headerRef,
     className: className,
     style: headStyle
@@ -42965,12 +43092,12 @@ var InnerTable = function InnerTable(props) {
     onRowClick: onRowClick,
     style: bodyStyle,
     onScroll: onScroll
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_footer__WEBPACK_IMPORTED_MODULE_7__.TableFooter, {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_footer__WEBPACK_IMPORTED_MODULE_8__.TableFooter, {
     ref: footerRef,
     rowDensity: rowDensity,
     className: className,
     style: headStyle
-  }), !!stickyHeader && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_sticky_header__WEBPACK_IMPORTED_MODULE_10__.StickyHeader, {
+  }), !!stickyHeader && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(_sticky_header__WEBPACK_IMPORTED_MODULE_11__.StickyHeader, {
     offsetTop: offsetTop,
     onRowClick: onRowClick,
     rowDensity: rowDensity,
@@ -42984,7 +43111,9 @@ InnerTable.displayName = 'InnerTable';
 var TableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "TableWrapper",
   componentId: "sc-ebeoik-0"
-})(["width:100%;border:1px solid ", ";border-radius:4px;overflow-x:auto;", ""], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].color.gray_3, _theme__WEBPACK_IMPORTED_MODULE_4__["default"].scrollbars.thin);
+})(["width:100%;border:1px solid ", ";border-radius:4px;overflow-x:", ";", ""], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].color.gray_3, function (props) {
+  return props.$virtualized ? 'unset' : 'auto';
+}, _theme__WEBPACK_IMPORTED_MODULE_5__["default"].scrollbars.thin);
 var StyledTable = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "StyledTable",
   componentId: "sc-ebeoik-1"
@@ -42994,7 +43123,7 @@ var TableBody = function TableBody(props) {
     rowDensity = props.rowDensity,
     onRowClick = props.onRowClick,
     onScroll = props.onScroll;
-  var _useTableContext2 = (0,_context__WEBPACK_IMPORTED_MODULE_6__.useTableContext)(),
+  var _useTableContext2 = (0,_context__WEBPACK_IMPORTED_MODULE_7__.useTableContext)(),
     getTableBodyProps = _useTableContext2.getTableBodyProps,
     prepareRow = _useTableContext2.prepareRow,
     page = _useTableContext2.page,
@@ -43009,23 +43138,39 @@ var TableBody = function TableBody(props) {
     onRowDragStart = _useTableContext2.onRowDragStart,
     onRowDragEnd = _useTableContext2.onRowDragEnd,
     rowsById = _useTableContext2.rowsById;
+  var rows = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {
+    return [].concat(_toConsumableArray(pinnedRows), _toConsumableArray(page.filter(function (row) {
+      return !row.isPinned;
+    })));
+  }, [pinnedRows, page]);
+  var _renderRow = function _renderRow(_ref) {
+    var row = _ref.row,
+      index = _ref.index,
+      wrapperProps = _ref.wrapperProps;
+    prepareRow(row);
+    return (0,_render_row__WEBPACK_IMPORTED_MODULE_10__.renderRow)({
+      row: row,
+      rowDensity: rowDensity,
+      onRowClick: onRowClick,
+      isLast: !row.isPinned && index == rows.length - 1,
+      showExpand: !row.isPinned && row.canExpand,
+      className: className,
+      getRowProps: getRowProps,
+      renderRowSubComponent: renderRowSubComponent,
+      wrapperProps: wrapperProps
+    });
+  };
+  var cache = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)(new react_virtualized__WEBPACK_IMPORTED_MODULE_4__.CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 30
+  }));
   var body = function () {
-    if (isLoading) return (0,_util__WEBPACK_IMPORTED_MODULE_5__.flexRender)(LoadingComp);
-    if (!page.length) return (0,_util__WEBPACK_IMPORTED_MODULE_5__.flexRender)(NoDataComp);
-    return page.map(function (row, i) {
-      prepareRow(row);
-      if (row.isPinned) return null;
-      return (0,_render_row__WEBPACK_IMPORTED_MODULE_9__.renderRow)({
-        row: row,
-        rowDensity: rowDensity,
-        onRowClick: onRowClick,
-        isLast: i == page.length - 1,
-        showExpand: row.canExpand,
-        className: className,
-        getRowProps: getRowProps,
-        renderRowSubComponent: renderRowSubComponent,
-        dndIndex: i
-      });
+    if (isLoading) return (0,_util__WEBPACK_IMPORTED_MODULE_6__.flexRender)(LoadingComp);
+    if (!rows.length) return (0,_util__WEBPACK_IMPORTED_MODULE_6__.flexRender)(NoDataComp);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(Body, {
+      rows: rows,
+      renderRow: _renderRow,
+      measurerCache: cache
     });
   }();
   var bodyProps = getTableBodyProps();
@@ -43033,66 +43178,57 @@ var TableBody = function TableBody(props) {
   var onDragStart = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (e) {
     setIsDraggingRow(true);
     var context = {
-      page: page
+      page: rows
     };
     onRowDragStart === null || onRowDragStart === void 0 || onRowDragStart(e, rowsById[e.draggableId], context);
-  }, [page]);
+  }, [rows]);
   var onDragEnd = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(function (e) {
-    var _page$e$destination$i, _e$destination;
+    var _rows$e$destination$i, _e$destination, _rowsById$destRowId;
     setIsDraggingRow(false);
-    var destRowId = (_page$e$destination$i = page[(_e$destination = e.destination) === null || _e$destination === void 0 ? void 0 : _e$destination.index]) === null || _page$e$destination$i === void 0 ? void 0 : _page$e$destination$i.id;
+    var destRowId = (_rows$e$destination$i = rows[(_e$destination = e.destination) === null || _e$destination === void 0 ? void 0 : _e$destination.index]) === null || _rows$e$destination$i === void 0 ? void 0 : _rows$e$destination$i.id;
     var context = {
-      previousPage: page
+      previousPage: rows
     };
-    onRowDragEnd === null || onRowDragEnd === void 0 || onRowDragEnd(e, rowsById[e.draggableId], rowsById[destRowId], context);
-  }, [page]);
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_11__.DragDropContext, {
+    var originRow = rowsById[e.draggableId];
+    var destRow = ((_rowsById$destRowId = rowsById[destRowId]) === null || _rowsById$destRowId === void 0 ? void 0 : _rowsById$destRowId.isPinned) == (originRow === null || originRow === void 0 ? void 0 : originRow.isPinned) ? rowsById[destRowId] : undefined;
+    var event = destRow ? e : _objectSpread(_objectSpread({}, e), {}, {
+      destination: null,
+      combine: null
+    });
+    cache.current.clearAll();
+    onRowDragEnd === null || onRowDragEnd === void 0 || onRowDragEnd(event, originRow, destRow, context);
+  }, [rows, cache.current]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_14__.DragDropContext, {
     onDragStart: onDragStart,
     onDragEnd: onDragEnd
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(TableBodyRowGroup, _extends({
     "data-rowgroup-type": "body"
   }, bodyProps, {
     style: style,
-    className: (0,_util__WEBPACK_IMPORTED_MODULE_5__.classNames)(className, {
+    className: (0,_util__WEBPACK_IMPORTED_MODULE_6__.classNames)(className, {
       tableBody: true
     }),
     onScroll: onScroll
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(DroppableBodyRowGroup, {
-    id: "table-body-pinned-rows",
-    type: "PINNED_ROWS"
-  }, pinnedRows.map(function (row, i) {
-    prepareRow(row);
-    return (0,_render_row__WEBPACK_IMPORTED_MODULE_9__.renderRow)({
-      row: row,
-      rowDensity: rowDensity,
-      onRowClick: onRowClick,
-      className: className,
-      getRowProps: getRowProps,
-      renderRowSubComponent: renderRowSubComponent,
-      dndIndex: i
-    });
-  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(DroppableBodyRowGroup, {
-    id: "table-body-rows",
-    type: "ROWS"
-  }, body)));
+  }), body));
 };
-var DroppableBodyRowGroup = function DroppableBodyRowGroup(props) {
-  var children = props.children,
-    id = props.id,
-    type = props.type;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_11__.Droppable, {
-    droppableId: id,
-    type: type
-  }, function (provided) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement("div", _extends({
-      ref: provided.innerRef
-    }, provided.droppableProps), children, provided.placeholder);
-  });
+var Body = function Body(props) {
+  var _useTableContext3 = (0,_context__WEBPACK_IMPORTED_MODULE_7__.useTableContext)(),
+    virtualized = _useTableContext3.virtualized;
+  var droppableProps = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {
+    return {
+      droppableId: 'table-body-rows',
+      type: 'ROWS'
+    };
+  }, []);
+  var BodyComp = virtualized ? _virtualized_body__WEBPACK_IMPORTED_MODULE_12__.VirtualizedBody : _dnd__WEBPACK_IMPORTED_MODULE_13__.DroppableBody;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(BodyComp, _extends({}, props, {
+    droppableProps: droppableProps
+  }));
 };
 var TableBodyRowGroup = styled_components__WEBPACK_IMPORTED_MODULE_3___default().div.withConfig({
   displayName: "TableBodyRowGroup",
   componentId: "sc-ebeoik-2"
-})(["", ""], _theme__WEBPACK_IMPORTED_MODULE_4__["default"].scrollbars.thin);
+})(["", ""], _theme__WEBPACK_IMPORTED_MODULE_5__["default"].scrollbars.thin);
 
 /***/ }),
 
@@ -43216,6 +43352,190 @@ var EditableCellContent = styled_components__WEBPACK_IMPORTED_MODULE_1___default
 
 /***/ }),
 
+/***/ "./src/table/virtualized_body.js":
+/*!***************************************!*\
+  !*** ./src/table/virtualized_body.js ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   VirtualizedBody: () => (/* binding */ VirtualizedBody)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-beautiful-dnd */ "./node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js");
+/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-virtualized */ "react-virtualized");
+/* harmony import */ var react_virtualized__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_virtualized__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ "styled-components");
+/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../theme */ "./src/theme.js");
+/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./context */ "./src/table/context.js");
+/* harmony import */ var _dnd__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./dnd */ "./src/table/dnd.js");
+/* harmony import */ var _row_hover_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./row_hover_actions */ "./src/table/row_hover_actions.js");
+// LICENSE_CODE ZON
+
+
+/*jslint react:true*/
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
+
+
+
+
+
+
+var RowRenderer = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo(function (props) {
+  var row = props.row,
+    cache = props.cache,
+    renderRow = props.renderRow,
+    index = props.index,
+    style = props.style,
+    parent = props.parent,
+    rowHoverEvents = props.rowHoverEvents;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_1__.CellMeasurer, {
+    cache: cache.current,
+    parent: parent,
+    columnIndex: 0,
+    rowIndex: index
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_dnd__WEBPACK_IMPORTED_MODULE_5__.DraggableWrapper, {
+    key: row.id,
+    row: row,
+    index: index,
+    render: function render(wrapperProps, dragHandleProps) {
+      return renderRow({
+        row: row,
+        index: index,
+        wrapperProps: _objectSpread(_objectSpread(_objectSpread({}, wrapperProps), rowHoverEvents), {}, {
+          onPointerEnter: function onPointerEnter(e) {
+            return rowHoverEvents.onPointerEnter(e, row, dragHandleProps);
+          },
+          style: style
+        })
+      });
+    }
+  }));
+});
+RowRenderer.displayName = 'RowRenderer';
+var rowRenderer = function rowRenderer(rows, cache, renderRow, rowHoverEvents) {
+  var RendererWrapper = function RendererWrapper(_ref) {
+    var key = _ref.key,
+      index = _ref.index,
+      style = _ref.style,
+      parent = _ref.parent;
+    var row = rows[index];
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(RowRenderer, {
+      key: key,
+      row: row,
+      index: index,
+      style: style,
+      parent: parent,
+      cache: cache,
+      renderRow: renderRow,
+      rowHoverEvents: rowHoverEvents
+    });
+  };
+  return RendererWrapper;
+};
+var renderClone = function renderClone(rows, renderRow) {
+  return function (provided, snapshot, rubric) {
+    var row = rows[rubric.source.index];
+    var wrapperProps = {
+      provided: provided,
+      ref: provided.innerRef
+    };
+    return renderRow({
+      row: row,
+      index: rubric.source.index,
+      wrapperProps: wrapperProps
+    });
+  };
+};
+var listRefHandler = function listRefHandler(droppableProvided, setListRef) {
+  return function (ref) {
+    var _ref$Grid;
+    if (!ref) return;
+    var element = ref === null || ref === void 0 || (_ref$Grid = ref.Grid) === null || _ref$Grid === void 0 ? void 0 : _ref$Grid._scrollingContainer;
+    if (element instanceof window.HTMLElement) {
+      setListRef(element === null || element === void 0 ? void 0 : element.firstChild);
+      droppableProvided.innerRef(element);
+    }
+  };
+};
+var VirtualizedBodyComp = function VirtualizedBodyComp(props) {
+  var rows = props.rows,
+    measurerCache = props.measurerCache,
+    renderRow = props.renderRow,
+    droppableProps = props.droppableProps;
+  var _useTableContext = (0,_context__WEBPACK_IMPORTED_MODULE_4__.useTableContext)(),
+    maxHeight = _useTableContext.scrollHeight;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    listRef = _useState2[0],
+    setListRef = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _height = _useState4[0],
+    setHeight = _useState4[1];
+  var _useRowHoverActions = (0,_row_hover_actions__WEBPACK_IMPORTED_MODULE_6__.useRowHoverActions)(),
+    renderHoverActions = _useRowHoverActions.renderHoverActions,
+    rowHoverEvents = _useRowHoverActions.rowHoverEvents;
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (listRef) listRef.style.overflow = 'unset';
+    setHeight(rows.reduce(function (acc, row, index) {
+      return acc += measurerCache.current.getHeight(index, 0);
+    }, 0));
+  }, [listRef, rows]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_7__.Droppable, _extends({}, droppableProps, {
+    mode: "virtual",
+    renderClone: renderClone(rows, renderRow)
+  }), function (provided) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      style: {
+        height: _height,
+        maxHeight: maxHeight,
+        width: '100%'
+      }
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_virtualized__WEBPACK_IMPORTED_MODULE_1__.AutoSizer, null, function (_ref2) {
+      var width = _ref2.width,
+        height = _ref2.height;
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(StyledList, {
+        width: width,
+        height: height,
+        overscanRowCount: 7,
+        estimatedRowSize: 30,
+        rowHeight: measurerCache.current.rowHeight,
+        rowCount: rows.length,
+        deferredMeasurementCache: measurerCache.current,
+        ref: listRefHandler(provided, setListRef),
+        rowRenderer: rowRenderer(rows, measurerCache, renderRow, rowHoverEvents)
+      });
+    })), renderHoverActions());
+  });
+};
+var VirtualizedBody = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().memo(VirtualizedBodyComp);
+VirtualizedBody.displayName = 'VirtualizedBody';
+var StyledList = styled_components__WEBPACK_IMPORTED_MODULE_2___default()(react_virtualized__WEBPACK_IMPORTED_MODULE_1__.List).withConfig({
+  displayName: "StyledList",
+  componentId: "sc-1mdy9tq-0"
+})(["", ""], _theme__WEBPACK_IMPORTED_MODULE_3__["default"].scrollbars.thin);
+
+/***/ }),
+
 /***/ "./src/tag/base.js":
 /*!*************************!*\
   !*** ./src/tag/base.js ***!