@dtjoy/dt-design 1.1.2 → 1.1.5

package/lib/table/components/VirtualTable.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _VirtualTableBody = require("./VirtualTableBody");
+/**
+ * Same as `rc-component/table` but we modify trigger children update logic instead.
+ */
+var RcVirtualTable = (0, _VirtualTableBody.genVirtualTable)(function (prev, next) {
+  var _ref = prev,
+    prevRenderTimes = _ref._renderTimes;
+  var _ref2 = next,
+    nextRenderTimes = _ref2._renderTimes;
+  return prevRenderTimes !== nextRenderTimes;
+});
+var _default = exports.default = RcVirtualTable;

package/lib/table/components/VirtualTableBody/BodyGrid.js

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _context = require("../../../_util/context");
+var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));
+var React = _interopRequireWildcard(require("react"));
+var _TableContext = _interopRequireWildcard(require("../../shared/context/TableContext"));
+var _useFlattenRecords = _interopRequireDefault(require("../../features/virtual/useFlattenRecords"));
+var _BodyLine = _interopRequireDefault(require("./BodyLine"));
+var _context2 = require("./context");
+var _excluded = ["align", "offset"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 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 : String(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 = {}; 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; }
+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; }
+var ALIGN_MAP = {
+  start: 'top',
+  end: 'bottom',
+  nearest: 'auto'
+};
+var Grid = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var data = props.data,
+    onScroll = props.onScroll;
+  var _useContext = (0, _context.useContext)(_TableContext.default, ['flattenColumns', 'onColumnResize', 'getRowKey', 'prefixCls', 'expandedKeys', 'childrenColumnName', 'scrollX', 'direction']),
+    flattenColumns = _useContext.flattenColumns,
+    onColumnResize = _useContext.onColumnResize,
+    getRowKey = _useContext.getRowKey,
+    expandedKeys = _useContext.expandedKeys,
+    prefixCls = _useContext.prefixCls,
+    childrenColumnName = _useContext.childrenColumnName,
+    scrollX = _useContext.scrollX,
+    direction = _useContext.direction;
+  var _useContext2 = (0, _context.useContext)(_context2.StaticContext),
+    sticky = _useContext2.sticky,
+    scrollY = _useContext2.scrollY,
+    listItemHeight = _useContext2.listItemHeight,
+    getComponent = _useContext2.getComponent,
+    onTablePropScroll = _useContext2.onScroll;
+
+  // =========================== Ref ============================
+  var listRef = React.useRef(null);
+
+  // =========================== Data ===========================
+  var flattenData = (0, _useFlattenRecords.default)(data, childrenColumnName, expandedKeys, getRowKey);
+
+  // ========================== Column ==========================
+  var columnsWidth = React.useMemo(function () {
+    var total = 0;
+    return flattenColumns.map(function (_ref) {
+      var width = _ref.width,
+        minWidth = _ref.minWidth,
+        key = _ref.key;
+      var finalWidth = Math.max(width || 0, minWidth || 0);
+      total += finalWidth;
+      return [key, finalWidth, total];
+    });
+  }, [flattenColumns]);
+  var columnsOffset = React.useMemo(function () {
+    return columnsWidth.map(function (colWidth) {
+      return colWidth[2];
+    });
+  }, [columnsWidth]);
+  React.useEffect(function () {
+    columnsWidth.forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        width = _ref3[1];
+      onColumnResize(key, width);
+    });
+  }, [columnsWidth]);
+
+  // =========================== Ref ============================
+  React.useImperativeHandle(ref, function () {
+    var _listRef$current2;
+    var obj = {
+      scrollTo: function scrollTo(config) {
+        var _ref4, _listRef$current;
+        var align = config.align,
+          offset = config.offset,
+          restConfig = _objectWithoutProperties(config, _excluded);
+        var virtualAlign = (_ref4 = align && ALIGN_MAP[align]) !== null && _ref4 !== void 0 ? _ref4 : offset ? 'top' : 'auto';
+        (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollTo(_objectSpread(_objectSpread({}, restConfig), {}, {
+          offset: offset,
+          align: virtualAlign
+        }));
+      },
+      nativeElement: (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.nativeElement
+    };
+    Object.defineProperty(obj, 'scrollLeft', {
+      get: function get() {
+        var _listRef$current3;
+        return ((_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.getScrollInfo().x) || 0;
+      },
+      set: function set(value) {
+        var _listRef$current4;
+        (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 || _listRef$current4.scrollTo({
+          left: value
+        });
+      }
+    });
+
+    // https://github.com/ant-design/ant-design/issues/54734
+    Object.defineProperty(obj, 'scrollTop', {
+      get: function get() {
+        var _listRef$current5;
+        return ((_listRef$current5 = listRef.current) === null || _listRef$current5 === void 0 ? void 0 : _listRef$current5.getScrollInfo().y) || 0;
+      },
+      set: function set(value) {
+        var _listRef$current6;
+        (_listRef$current6 = listRef.current) === null || _listRef$current6 === void 0 || _listRef$current6.scrollTo({
+          top: value
+        });
+      }
+    });
+    return obj;
+  });
+
+  // ======================= Col/Row Span =======================
+  var getRowSpan = function getRowSpan(column, index) {
+    var _flattenData$index;
+    var record = (_flattenData$index = flattenData[index]) === null || _flattenData$index === void 0 ? void 0 : _flattenData$index.record;
+    var onCell = column.onCell;
+    if (onCell) {
+      var _cellProps$rowSpan;
+      var cellProps = onCell(record, index);
+      return (_cellProps$rowSpan = cellProps === null || cellProps === void 0 ? void 0 : cellProps.rowSpan) !== null && _cellProps$rowSpan !== void 0 ? _cellProps$rowSpan : 1;
+    }
+    return 1;
+  };
+  var extraRender = function extraRender(info) {
+    var start = info.start,
+      end = info.end,
+      getSize = info.getSize,
+      offsetY = info.offsetY;
+
+    // Do nothing if no data
+    if (end < 0) {
+      return null;
+    }
+
+    // Find first rowSpan column
+    var firstRowSpanColumns = flattenColumns.filter(
+    // rowSpan is 0
+    function (column) {
+      return getRowSpan(column, start) === 0;
+    });
+    var startIndex = start;
+    var _loop = function _loop(i) {
+      firstRowSpanColumns = firstRowSpanColumns.filter(function (column) {
+        return getRowSpan(column, i) === 0;
+      });
+      if (!firstRowSpanColumns.length) {
+        startIndex = i;
+        return 1; // break
+      }
+    };
+    for (var i = start; i >= 0; i -= 1) {
+      if (_loop(i)) break;
+    }
+
+    // Find last rowSpan column
+    var lastRowSpanColumns = flattenColumns.filter(
+    // rowSpan is not 1
+    function (column) {
+      return getRowSpan(column, end) !== 1;
+    });
+    var endIndex = end;
+    var _loop2 = function _loop2(_i) {
+      lastRowSpanColumns = lastRowSpanColumns.filter(function (column) {
+        return getRowSpan(column, _i) !== 1;
+      });
+      if (!lastRowSpanColumns.length) {
+        endIndex = Math.max(_i - 1, end);
+        return 1; // break
+      }
+    };
+    for (var _i = end; _i < flattenData.length; _i += 1) {
+      if (_loop2(_i)) break;
+    }
+
+    // Collect the line who has rowSpan
+    var spanLines = [];
+    var _loop3 = function _loop3(_i2) {
+      var item = flattenData[_i2];
+
+      // This code will never reach, just incase
+      if (!item) {
+        return 1; // continue
+      }
+      if (flattenColumns.some(function (column) {
+        return getRowSpan(column, _i2) > 1;
+      })) {
+        spanLines.push(_i2);
+      }
+    };
+    for (var _i2 = startIndex; _i2 <= endIndex; _i2 += 1) {
+      if (_loop3(_i2)) continue;
+    }
+
+    // Patch extra line on the page
+    var nodes = spanLines.map(function (index) {
+      var item = flattenData[index];
+      var rowKey = getRowKey(item.record, index);
+      var getHeight = function getHeight(rowSpan) {
+        var endItemIndex = index + rowSpan - 1;
+        var endItem = flattenData[endItemIndex];
+        if (!endItem || !endItem.record) {
+          // clamp 到当前可用的最后一行，或退化为默认高度
+          var safeEndIndex = Math.min(endItemIndex, flattenData.length - 1);
+          var safeEndItem = flattenData[safeEndIndex];
+          var _endItemKey = getRowKey(safeEndItem.record, safeEndIndex);
+          var _sizeInfo = getSize(rowKey, _endItemKey);
+          return _sizeInfo.bottom - _sizeInfo.top;
+        }
+        var endItemKey = getRowKey(endItem.record, endItemIndex);
+        var sizeInfo = getSize(rowKey, endItemKey);
+        return sizeInfo.bottom - sizeInfo.top;
+      };
+      var sizeInfo = getSize(rowKey);
+      return /*#__PURE__*/React.createElement(_BodyLine.default, {
+        key: index,
+        data: item,
+        rowKey: rowKey,
+        index: index,
+        style: {
+          top: -offsetY + sizeInfo.top
+        },
+        extra: true,
+        getHeight: getHeight
+      });
+    });
+    return nodes;
+  };
+
+  // ========================= Context ==========================
+  var gridContext = React.useMemo(function () {
+    return {
+      columnsOffset: columnsOffset
+    };
+  }, [columnsOffset]);
+
+  // ========================== Render ==========================
+  var tblPrefixCls = "".concat(prefixCls, "-tbody");
+
+  // default 'div' in rc-virtual-list
+  var wrapperComponent = getComponent(['body', 'wrapper']);
+
+  // ========================== Sticky Scroll Bar ==========================
+  var horizontalScrollBarStyle = {};
+  if (sticky) {
+    horizontalScrollBarStyle.position = 'sticky';
+    horizontalScrollBarStyle.bottom = 0;
+    if (_typeof(sticky) === 'object' && sticky.offsetScroll) {
+      horizontalScrollBarStyle.bottom = sticky.offsetScroll;
+    }
+  }
+  return /*#__PURE__*/React.createElement(_context2.GridContext.Provider, {
+    value: gridContext
+  }, /*#__PURE__*/React.createElement(_rcVirtualList.default, {
+    fullHeight: false,
+    ref: listRef,
+    prefixCls: "".concat(tblPrefixCls, "-virtual"),
+    styles: {
+      horizontalScrollBar: horizontalScrollBarStyle
+    },
+    className: tblPrefixCls,
+    height: scrollY,
+    itemHeight: listItemHeight || 24,
+    data: flattenData,
+    itemKey: function itemKey(item) {
+      return getRowKey(item.record);
+    },
+    component: wrapperComponent,
+    scrollWidth: scrollX,
+    direction: direction,
+    onVirtualScroll: function onVirtualScroll(_ref5) {
+      var _listRef$current7;
+      var x = _ref5.x;
+      onScroll({
+        currentTarget: (_listRef$current7 = listRef.current) === null || _listRef$current7 === void 0 ? void 0 : _listRef$current7.nativeElement,
+        scrollLeft: x
+      });
+    },
+    onScroll: onTablePropScroll,
+    extraRender: extraRender
+  }, function (item, index, itemProps) {
+    var rowKey = getRowKey(item.record, index);
+    return /*#__PURE__*/React.createElement(_BodyLine.default, {
+      data: item,
+      rowKey: rowKey,
+      index: index,
+      style: itemProps.style
+    });
+  }));
+});
+var ResponseGrid = (0, _TableContext.responseImmutable)(Grid);
+if (process.env.NODE_ENV !== 'production') {
+  ResponseGrid.displayName = 'ResponseGrid';
+}
+var _default = exports.default = ResponseGrid;

package/lib/table/components/VirtualTableBody/BodyLine.js

@@ -0,0 +1,125 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _context = require("../../../_util/context");
+var _clsx3 = require("clsx");
+var React = _interopRequireWildcard(require("react"));
+var _Cell = _interopRequireDefault(require("../Cell"));
+var _TableContext = _interopRequireWildcard(require("../../shared/context/TableContext"));
+var _useRowInfo = _interopRequireDefault(require("../../shared/hooks/useRowInfo"));
+var _VirtualCell = _interopRequireDefault(require("./VirtualCell"));
+var _context2 = require("./context");
+var _expandUtil = require("../../features/expand/expandUtil");
+var _excluded = ["data", "index", "className", "rowKey", "style", "extra", "getHeight"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 : String(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 = {}; 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 BodyLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames$body, _styles$body;
+  var data = props.data,
+    index = props.index,
+    className = props.className,
+    rowKey = props.rowKey,
+    style = props.style,
+    extra = props.extra,
+    getHeight = props.getHeight,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var record = data.record,
+    indent = data.indent,
+    renderIndex = data.index;
+  var _useContext = (0, _context.useContext)(_TableContext.default, ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX', 'classNames', 'styles']),
+    scrollX = _useContext.scrollX,
+    flattenColumns = _useContext.flattenColumns,
+    prefixCls = _useContext.prefixCls,
+    fixColumn = _useContext.fixColumn,
+    componentWidth = _useContext.componentWidth,
+    classNames = _useContext.classNames,
+    styles = _useContext.styles;
+  var _useContext2 = (0, _context.useContext)(_context2.StaticContext, ['getComponent']),
+    getComponent = _useContext2.getComponent;
+  var rowInfo = (0, _useRowInfo.default)(record, rowKey, index, indent);
+  var RowComponent = getComponent(['body', 'row'], 'div');
+  var cellComponent = getComponent(['body', 'cell'], 'div');
+
+  // ========================== Expand ==========================
+  var rowSupportExpand = rowInfo.rowSupportExpand,
+    expanded = rowInfo.expanded,
+    rowProps = rowInfo.rowProps,
+    expandedRowRender = rowInfo.expandedRowRender,
+    expandedRowClassName = rowInfo.expandedRowClassName;
+  var expandedClsName = (0, _expandUtil.computedExpandedClassName)(expandedRowClassName, record, index, indent);
+  var expandRowNode = null;
+  if (rowSupportExpand && expanded) {
+    var expandContent = expandedRowRender(record, index, indent + 1, expanded);
+    var additionalProps = {};
+    if (fixColumn) {
+      additionalProps = {
+        style: _defineProperty({}, '--virtual-width', "".concat(componentWidth, "px"))
+      };
+    }
+    var rowCellCls = "".concat(prefixCls, "-expanded-row-cell");
+    expandRowNode = /*#__PURE__*/React.createElement(RowComponent, {
+      className: (0, _clsx3.clsx)("".concat(prefixCls, "-expanded-row"), "".concat(prefixCls, "-expanded-row-level-").concat(indent + 1), expandedClsName)
+    }, /*#__PURE__*/React.createElement(_Cell.default, {
+      component: cellComponent,
+      prefixCls: prefixCls,
+      className: (0, _clsx3.clsx)(rowCellCls, _defineProperty({}, "".concat(rowCellCls, "-fixed"), fixColumn)),
+      additionalProps: additionalProps
+    }, expandContent));
+  }
+
+  // ========================== Render ==========================
+  var rowStyle = _objectSpread(_objectSpread({}, style), {}, {
+    width: scrollX
+  });
+  if (extra) {
+    rowStyle.position = 'absolute';
+    rowStyle.pointerEvents = 'none';
+  }
+  var rowNode = /*#__PURE__*/React.createElement(RowComponent, _extends({}, rowProps, restProps, {
+    "data-row-key": rowKey,
+    ref: rowSupportExpand ? null : ref,
+    className: (0, _clsx3.clsx)(className, "".concat(prefixCls, "-row"), rowProps === null || rowProps === void 0 ? void 0 : rowProps.className, classNames === null || classNames === void 0 || (_classNames$body = classNames.body) === null || _classNames$body === void 0 ? void 0 : _classNames$body.row, _defineProperty(_defineProperty({}, expandedClsName, indent >= 1), "".concat(prefixCls, "-row-extra"), extra)),
+    style: _objectSpread(_objectSpread(_objectSpread({}, rowStyle), rowProps === null || rowProps === void 0 ? void 0 : rowProps.style), styles === null || styles === void 0 || (_styles$body = styles.body) === null || _styles$body === void 0 ? void 0 : _styles$body.row)
+  }), flattenColumns.map(function (column, colIndex) {
+    var _classNames$body2, _styles$body2;
+    return /*#__PURE__*/React.createElement(_VirtualCell.default, {
+      key: column.key != null ? String(column.key) : "cell-".concat(colIndex),
+      className: classNames === null || classNames === void 0 || (_classNames$body2 = classNames.body) === null || _classNames$body2 === void 0 ? void 0 : _classNames$body2.cell,
+      style: styles === null || styles === void 0 || (_styles$body2 = styles.body) === null || _styles$body2 === void 0 ? void 0 : _styles$body2.cell,
+      component: cellComponent,
+      rowInfo: rowInfo,
+      column: column,
+      colIndex: colIndex,
+      indent: indent,
+      index: index,
+      renderIndex: renderIndex,
+      record: record,
+      inverse: extra,
+      getHeight: getHeight
+    });
+  }));
+  if (rowSupportExpand) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, rowNode, expandRowNode);
+  }
+  return rowNode;
+});
+var ResponseBodyLine = (0, _TableContext.responseImmutable)(BodyLine);
+if (process.env.NODE_ENV !== 'production') {
+  ResponseBodyLine.displayName = 'BodyLine';
+}
+var _default = exports.default = ResponseBodyLine;

package/lib/table/components/VirtualTableBody/VirtualCell.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getColumnWidth = getColumnWidth;
+var _context = require("../../../_util/context");
+var _clsx = require("clsx");
+var React = _interopRequireWildcard(require("react"));
+var _BodyRow = require("../Body/BodyRow");
+var _Cell = _interopRequireDefault(require("../Cell"));
+var _context2 = require("./context");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 : String(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); }
+/**
+ * Return the width of the column by `colSpan`.
+ * When `colSpan` is `0` will be trade as `1`.
+ */
+function getColumnWidth(colIndex, colSpan, columnsOffset) {
+  var mergedColSpan = colSpan || 1;
+  return columnsOffset[colIndex + mergedColSpan] - (columnsOffset[colIndex] || 0);
+}
+var VirtualCell = function VirtualCell(props) {
+  var rowInfo = props.rowInfo,
+    column = props.column,
+    colIndex = props.colIndex,
+    indent = props.indent,
+    index = props.index,
+    component = props.component,
+    renderIndex = props.renderIndex,
+    record = props.record,
+    style = props.style,
+    className = props.className,
+    inverse = props.inverse,
+    getHeight = props.getHeight;
+  var render = column.render,
+    dataIndex = column.dataIndex,
+    columnClassName = column.className,
+    colWidth = column.width;
+  var _useContext = (0, _context.useContext)(_context2.GridContext, ['columnsOffset']),
+    columnsOffset = _useContext.columnsOffset;
+
+  // TODO: support `expandableRowOffset`
+  var _getCellProps = (0, _BodyRow.getCellProps)(rowInfo, column, colIndex, indent, index),
+    key = _getCellProps.key,
+    fixedInfo = _getCellProps.fixedInfo,
+    appendCellNode = _getCellProps.appendCellNode,
+    additionalCellProps = _getCellProps.additionalCellProps;
+  var cellStyle = additionalCellProps.style,
+    _additionalCellProps$ = additionalCellProps.colSpan,
+    colSpan = _additionalCellProps$ === void 0 ? 1 : _additionalCellProps$,
+    _additionalCellProps$2 = additionalCellProps.rowSpan,
+    rowSpan = _additionalCellProps$2 === void 0 ? 1 : _additionalCellProps$2;
+
+  // ========================= ColWidth =========================
+  // column width
+  var startColIndex = colIndex - 1;
+  var concatColWidth = getColumnWidth(startColIndex, colSpan, columnsOffset);
+
+  // margin offset
+  var marginOffset = colSpan > 1 ? colWidth - concatColWidth : 0;
+
+  // ========================== Style ===========================
+  var mergedStyle = _objectSpread(_objectSpread(_objectSpread({}, cellStyle), style), {}, {
+    flex: "0 0 ".concat(concatColWidth, "px"),
+    width: "".concat(concatColWidth, "px"),
+    marginRight: marginOffset,
+    pointerEvents: 'auto'
+  });
+
+  // When `colSpan` or `rowSpan` is `0`, should skip render.
+  var needHide = React.useMemo(function () {
+    if (inverse) {
+      return rowSpan <= 1;
+    } else {
+      return colSpan === 0 || rowSpan === 0 || rowSpan > 1;
+    }
+  }, [rowSpan, colSpan, inverse]);
+
+  // 0 rowSpan or colSpan should not render
+  if (needHide) {
+    mergedStyle.visibility = 'hidden';
+  } else if (inverse) {
+    mergedStyle.height = getHeight === null || getHeight === void 0 ? void 0 : getHeight(rowSpan);
+  }
+  var mergedRender = needHide ? function () {
+    return null;
+  } : render;
+
+  // ========================== Render ==========================
+  var cellSpan = {};
+
+  // Virtual should reset `colSpan` & `rowSpan`
+  if (rowSpan === 0 || colSpan === 0) {
+    cellSpan.rowSpan = 1;
+    cellSpan.colSpan = 1;
+  }
+  return /*#__PURE__*/React.createElement(_Cell.default, _extends({
+    className: (0, _clsx.clsx)(columnClassName, className),
+    ellipsis: column.ellipsis,
+    align: column.align,
+    scope: column.rowScope,
+    component: component,
+    prefixCls: rowInfo.prefixCls,
+    key: key,
+    record: record,
+    index: index,
+    renderIndex: renderIndex,
+    dataIndex: dataIndex,
+    render: mergedRender,
+    shouldCellUpdate: column.shouldCellUpdate
+  }, fixedInfo, {
+    appendNode: appendCellNode,
+    additionalProps: _objectSpread(_objectSpread({}, additionalCellProps), {}, {
+      style: mergedStyle
+    }, cellSpan)
+  }));
+};
+var _default = exports.default = VirtualCell;

package/lib/table/components/VirtualTableBody/context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StaticContext = exports.GridContext = void 0;
+var _context = require("../../../_util/context");
+var StaticContext = exports.StaticContext = (0, _context.createContext)();
+var GridContext = exports.GridContext = (0, _context.createContext)();