rc-table - npm Package Compare versions

Comparing version 7.32.3 to 7.33.0-alpha.0

es/Body/BodyRow.d.ts

 import * as React from 'react';
-import type { CustomizeComponent, GetComponentProps, GetRowKey, Key } from '../interface';
+import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface';
+import useRowInfo from '../hooks/useRowInfo';
 export interface BodyRowProps<RecordType> {
@@ -9,13 +10,15 @@ record: RecordType;
     style?: React.CSSProperties;
-    expandedKeys: Set<Key>;
     rowComponent: CustomizeComponent;
     cellComponent: CustomizeComponent;
     scopeCellComponent: CustomizeComponent;
-    onRow: GetComponentProps<RecordType>;
-    rowExpandable: (record: RecordType) => boolean;
     indent?: number;
     rowKey: React.Key;
     getRowKey: GetRowKey<RecordType>;
-    childrenColumnName: string;
 }
+export declare function getCellProps<RecordType>(rowInfo: ReturnType<typeof useRowInfo<RecordType>>, column: ColumnType<RecordType>, colIndex: number, indent: number, index: number): {
+    key: React.Key;
+    fixedInfo: import("../utils/fixUtil").FixedInfo;
+    appendCellNode: React.ReactNode;
+    additionalCellProps: React.TdHTMLAttributes<HTMLElement>;
+};
 declare function BodyRow<RecordType extends {
@@ -22,0 +25,0 @@ children?: readonly RecordType[];

es/Body/BodyRow.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { responseImmutable, useContext } from '@rc-component/context';
 import classNames from 'classnames';
 import * as React from 'react';
 import Cell from "../Cell";
-import TableContext from "../context/TableContext";
+import { responseImmutable } from "../context/TableContext";
 import devRenderTimes from "../hooks/useRenderTimes";
-import { getColumnsKey } from "../utils/valueUtil";
 import ExpandedRow from "./ExpandedRow";
+import useRowInfo from "../hooks/useRowInfo";
+// ==================================================================================
+// ==                                 getCellProps                                 ==
+// ==================================================================================
+export function getCellProps(rowInfo, column, colIndex, indent, index) {
+  var record = rowInfo.record,
+    prefixCls = rowInfo.prefixCls,
+    columnsKey = rowInfo.columnsKey,
+    fixedInfoList = rowInfo.fixedInfoList,
+    expandIconColumnIndex = rowInfo.expandIconColumnIndex,
+    nestExpandable = rowInfo.nestExpandable,
+    indentSize = rowInfo.indentSize,
+    expandIcon = rowInfo.expandIcon,
+    expanded = rowInfo.expanded,
+    hasNestChildren = rowInfo.hasNestChildren,
+    onTriggerExpand = rowInfo.onTriggerExpand;
+  var key = columnsKey[colIndex];
+  var fixedInfo = fixedInfoList[colIndex];
+
+  // ============= Used for nest expandable =============
+  var appendCellNode;
+  if (colIndex === (expandIconColumnIndex || 0) && nestExpandable) {
+    appendCellNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingLeft: "".concat(indentSize * indent, "px")
+      },
+      className: "".concat(prefixCls, "-row-indent indent-level-").concat(indent)
+    }), expandIcon({
+      prefixCls: prefixCls,
+      expanded: expanded,
+      expandable: hasNestChildren,
+      record: record,
+      onExpand: onTriggerExpand
+    }));
+  }
+  var additionalCellProps;
+  if (column.onCell) {
+    additionalCellProps = column.onCell(record, index);
+  }
+  return {
+    key: key,
+    fixedInfo: fixedInfo,
+    appendCellNode: appendCellNode,
+    additionalCellProps: additionalCellProps || {}
+  };
+}
+
+// ==================================================================================
+// ==                                 getCellProps                                 ==
+// ==================================================================================
 function BodyRow(props) {
@@ -22,5 +70,2 @@ if (process.env.NODE_ENV !== 'production') {
     rowKey = props.rowKey,
-    rowExpandable = props.rowExpandable,
-    expandedKeys = props.expandedKeys,
-    onRow = props.onRow,
     _props$indent = props.indent,
@@ -30,17 +75,11 @@ indent = _props$indent === void 0 ? 0 : _props$indent,
     cellComponent = props.cellComponent,
-    scopeCellComponent = props.scopeCellComponent,
-    childrenColumnName = props.childrenColumnName;
-  var _useContext = useContext(TableContext, ['prefixCls', 'fixedInfoList', 'flattenColumns', 'expandableType', 'expandRowByClick', 'onTriggerExpand', 'rowClassName', 'expandedRowClassName', 'indentSize', 'expandIcon', 'expandedRowRender', 'expandIconColumnIndex']),
-    prefixCls = _useContext.prefixCls,
-    fixedInfoList = _useContext.fixedInfoList,
-    flattenColumns = _useContext.flattenColumns,
-    expandableType = _useContext.expandableType,
-    expandRowByClick = _useContext.expandRowByClick,
-    onTriggerExpand = _useContext.onTriggerExpand,
-    rowClassName = _useContext.rowClassName,
-    expandedRowClassName = _useContext.expandedRowClassName,
-    indentSize = _useContext.indentSize,
-    expandIcon = _useContext.expandIcon,
-    expandedRowRender = _useContext.expandedRowRender,
-    expandIconColumnIndex = _useContext.expandIconColumnIndex;
+    scopeCellComponent = props.scopeCellComponent;
+  var rowInfo = useRowInfo(record, rowKey, index, indent);
+  var prefixCls = rowInfo.prefixCls,
+    flattenColumns = rowInfo.flattenColumns,
+    expandedRowClassName = rowInfo.expandedRowClassName,
+    expandedRowRender = rowInfo.expandedRowRender,
+    rowProps = rowInfo.rowProps,
+    expanded = rowInfo.expanded,
+    rowSupportExpand = rowInfo.rowSupportExpand;
   var _React$useState = React.useState(false),
@@ -53,3 +92,2 @@ _React$useState2 = _slicedToArray(_React$useState, 2),
   }
-  var expanded = expandedKeys && expandedKeys.has(rowKey);
   React.useEffect(function () {
@@ -60,41 +98,8 @@ if (expanded) {
   }, [expanded]);
-  var rowSupportExpand = expandableType === 'row' && (!rowExpandable || rowExpandable(record));
-  // Only when row is not expandable and `children` exist in record
-  var nestExpandable = expandableType === 'nest';
-  var hasNestChildren = childrenColumnName && record && record[childrenColumnName];
-  var mergedExpandable = rowSupportExpand || nestExpandable;
 
-  // ======================== Expandable =========================
-  var onExpandRef = React.useRef(onTriggerExpand);
-  onExpandRef.current = onTriggerExpand;
-  var onInternalTriggerExpand = function onInternalTriggerExpand() {
-    onExpandRef.current.apply(onExpandRef, arguments);
-  };
-
-  // =========================== onRow ===========================
-  var additionalProps = onRow === null || onRow === void 0 ? void 0 : onRow(record, index);
-  var onClick = function onClick(event) {
-    var _additionalProps$onCl;
-    if (expandRowByClick && mergedExpandable) {
-      onInternalTriggerExpand(record, event);
-    }
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-    additionalProps === null || additionalProps === void 0 ? void 0 : (_additionalProps$onCl = additionalProps.onClick) === null || _additionalProps$onCl === void 0 ? void 0 : _additionalProps$onCl.call.apply(_additionalProps$onCl, [additionalProps, event].concat(args));
-  };
-
   // ======================== Base tr row ========================
-  var computeRowClassName;
-  if (typeof rowClassName === 'string') {
-    computeRowClassName = rowClassName;
-  } else if (typeof rowClassName === 'function') {
-    computeRowClassName = rowClassName(record, index, indent);
-  }
-  var columnsKey = getColumnsKey(flattenColumns);
-  var baseRowNode = /*#__PURE__*/React.createElement(RowComponent, _extends({}, additionalProps, {
+  var baseRowNode = /*#__PURE__*/React.createElement(RowComponent, _extends({}, rowProps, {
     "data-row-key": rowKey,
-    className: classNames(className, "".concat(prefixCls, "-row"), "".concat(prefixCls, "-row-level-").concat(indent), computeRowClassName, additionalProps && additionalProps.className),
-    style: _objectSpread(_objectSpread({}, style), additionalProps ? additionalProps.style : null),
-    onClick: onClick
+    className: classNames(className, "".concat(prefixCls, "-row"), "".concat(prefixCls, "-row-level-").concat(indent), rowProps === null || rowProps === void 0 ? void 0 : rowProps.className),
+    style: _objectSpread(_objectSpread({}, style), rowProps === null || rowProps === void 0 ? void 0 : rowProps.style)
   }), flattenColumns.map(function (column, colIndex) {
@@ -104,25 +109,7 @@ var render = column.render,
       columnClassName = column.className;
-    var key = columnsKey[colIndex];
-    var fixedInfo = fixedInfoList[colIndex];
-
-    // ============= Used for nest expandable =============
-    var appendCellNode;
-    if (colIndex === (expandIconColumnIndex || 0) && nestExpandable) {
-      appendCellNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        style: {
-          paddingLeft: "".concat(indentSize * indent, "px")
-        },
-        className: "".concat(prefixCls, "-row-indent indent-level-").concat(indent)
-      }), expandIcon({
-        prefixCls: prefixCls,
-        expanded: expanded,
-        expandable: hasNestChildren,
-        record: record,
-        onExpand: onInternalTriggerExpand
-      }));
-    }
-    var additionalCellProps;
-    if (column.onCell) {
-      additionalCellProps = column.onCell(record, index);
-    }
+    var _getCellProps = getCellProps(rowInfo, column, colIndex, indent, index),
+      key = _getCellProps.key,
+      fixedInfo = _getCellProps.fixedInfo,
+      appendCellNode = _getCellProps.appendCellNode,
+      additionalCellProps = _getCellProps.additionalCellProps;
     return /*#__PURE__*/React.createElement(Cell, _extends({
@@ -141,4 +128,3 @@ className: columnClassName,
       render: render,
-      shouldCellUpdate: column.shouldCellUpdate,
-      expanded: appendCellNode && expanded
+      shouldCellUpdate: column.shouldCellUpdate
     }, fixedInfo, {
@@ -145,0 +131,0 @@ appendNode: appendCellNode,

es/Body/index.d.ts

 import * as React from 'react';
-import type { GetComponentProps, GetRowKey, Key } from '../interface';
 export interface BodyProps<RecordType> {
     data: readonly RecordType[];
-    getRowKey: GetRowKey<RecordType>;
     measureColumnWidth: boolean;
-    expandedKeys: Set<Key>;
-    onRow: GetComponentProps<RecordType>;
-    rowExpandable: (record: RecordType) => boolean;
     emptyNode: React.ReactNode;
-    childrenColumnName: string;
 }
@@ -13,0 +7,0 @@ declare function Body<RecordType>(props: BodyProps<RecordType>): React.JSX.Element;

es/Body/index.js

@@ -1,5 +0,5 @@
-import { responseImmutable, useContext } from '@rc-component/context';
+import { useContext } from '@rc-component/context';
 import * as React from 'react';
 import PerfContext from "../context/PerfContext";
-import TableContext from "../context/TableContext";
+import TableContext, { responseImmutable } from "../context/TableContext";
 import useFlattenRecords from "../hooks/useFlattenRecords";
@@ -16,14 +16,12 @@ import devRenderTimes from "../hooks/useRenderTimes";
   var data = props.data,
-    getRowKey = props.getRowKey,
     measureColumnWidth = props.measureColumnWidth,
-    expandedKeys = props.expandedKeys,
-    onRow = props.onRow,
-    rowExpandable = props.rowExpandable,
-    emptyNode = props.emptyNode,
-    childrenColumnName = props.childrenColumnName;
-  var _useContext = useContext(TableContext, ['prefixCls', 'getComponent', 'onColumnResize', 'flattenColumns']),
+    emptyNode = props.emptyNode;
+  var _useContext = useContext(TableContext, ['prefixCls', 'getComponent', 'onColumnResize', 'flattenColumns', 'getRowKey', 'expandedKeys', 'childrenColumnName']),
     prefixCls = _useContext.prefixCls,
     getComponent = _useContext.getComponent,
     onColumnResize = _useContext.onColumnResize,
-    flattenColumns = _useContext.flattenColumns;
+    flattenColumns = _useContext.flattenColumns,
+    getRowKey = _useContext.getRowKey,
+    expandedKeys = _useContext.expandedKeys,
+    childrenColumnName = _useContext.childrenColumnName;
   var flattenData = useFlattenRecords(data, childrenColumnName, expandedKeys, getRowKey);
@@ -57,7 +55,3 @@
         scopeCellComponent: thComponent,
-        expandedKeys: expandedKeys,
-        onRow: onRow,
         getRowKey: getRowKey,
-        rowExpandable: rowExpandable,
-        childrenColumnName: childrenColumnName,
         indent: indent
@@ -64,0 +58,0 @@ });

es/Cell/index.js

@@ -129,3 +129,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   }
-  var mergedStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, additionalProps.style), alignStyle), fixedStyle), legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.style);
+  var mergedStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fixedStyle), additionalProps.style), alignStyle), legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.style);
 
@@ -132,0 +132,0 @@ // >>>>> Children Node

es/Cell/useCellRender.js

 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import { useImmutableMark } from '@rc-component/context';
 import useMemo from "rc-util/es/hooks/useMemo";
@@ -11,2 +10,3 @@ import isEqual from "rc-util/es/isEqual";
 import { validateValue } from "../utils/valueUtil";
+import { useImmutableMark } from "../context/TableContext";
 function isRenderCell(data) {
@@ -13,0 +13,0 @@ return data && _typeof(data) === 'object' && !Array.isArray(data) && ! /*#__PURE__*/React.isValidElement(data);

es/context/TableContext.d.ts

@@ -1,3 +0,6 @@
-import type { ColumnsType, ColumnType, Direction, ExpandableType, ExpandedRowRender, GetComponent, RenderExpandIcon, RowClassName, TableLayout, TriggerEventHandler } from '../interface';
+/// <reference types="react" />
+import type { ColumnsType, ColumnType, Direction, ExpandableType, ExpandedRowRender, GetComponent, GetComponentProps, GetRowKey, RenderExpandIcon, RowClassName, TableLayout, TriggerEventHandler } from '../interface';
 import type { FixedInfo } from '../utils/fixUtil';
+declare const makeImmutable: <T extends import("react").ComponentType<any>>(Component: T, shouldTriggerRender?: import("@rc-component/context/lib/Immutable").CompareProps<T>) => T, responseImmutable: <T_1 extends import("react").ComponentType<any>>(Component: T_1, propsAreEqual?: import("@rc-component/context/lib/Immutable").CompareProps<T_1>) => T_1, useImmutableMark: () => number;
+export { makeImmutable, responseImmutable, useImmutableMark };
 export interface TableContextProps<RecordType = any> {
@@ -17,2 +20,3 @@ prefixCls: string;
     expandedRowClassName: RowClassName<RecordType>;
+    onRow?: GetComponentProps<RecordType>;
     tableLayout: TableLayout;
@@ -33,4 +37,8 @@ indentSize: number;
     onHover: (start: number, end: number) => void;
+    rowExpandable: (record: RecordType) => boolean;
+    expandedKeys: Set<React.Key>;
+    getRowKey: GetRowKey<RecordType>;
+    childrenColumnName: string;
 }
 declare const TableContext: import("@rc-component/context").SelectorContext<TableContextProps<any>>;
 export default TableContext;

es/context/TableContext.js

@@ -1,3 +0,8 @@
-import { createContext } from '@rc-component/context';
+import { createContext, createImmutable } from '@rc-component/context';
+var _createImmutable = createImmutable(),
+  makeImmutable = _createImmutable.makeImmutable,
+  responseImmutable = _createImmutable.responseImmutable,
+  useImmutableMark = _createImmutable.useImmutableMark;
+export { makeImmutable, responseImmutable, useImmutableMark };
 var TableContext = createContext();
 export default TableContext;

es/Footer/index.js

@@ -1,4 +0,4 @@
-import { responseImmutable, useContext } from '@rc-component/context';
+import { useContext } from '@rc-component/context';
 import * as React from 'react';
-import TableContext from "../context/TableContext";
+import TableContext, { responseImmutable } from "../context/TableContext";
 import devRenderTimes from "../hooks/useRenderTimes";
@@ -5,0 +5,0 @@ import Summary from "./Summary";

es/Header/Header.js

@@ -1,4 +0,4 @@
-import { responseImmutable, useContext } from '@rc-component/context';
+import { useContext } from '@rc-component/context';
 import * as React from 'react';
-import TableContext from "../context/TableContext";
+import TableContext, { responseImmutable } from "../context/TableContext";
 import devRenderTimes from "../hooks/useRenderTimes";
@@ -5,0 +5,0 @@ import HeaderRow from "./HeaderRow";

es/hooks/useFlattenRecords.d.ts

 import type { GetRowKey, Key } from '../interface';
+export interface FlattenData<RecordType> {
+    record: RecordType;
+    indent: number;
+    index: number;
+}
 /**
@@ -13,6 +18,2 @@ * flat tree data on expanded state
  */
-export default function useFlattenRecords<T>(data: any, childrenColumnName: string, expandedKeys: Set<Key>, getRowKey: GetRowKey<T>): {
-    record: T;
-    indent: number;
-    index: number;
-}[];
+export default function useFlattenRecords<T>(data: T[] | readonly T[], childrenColumnName: string, expandedKeys: Set<Key>, getRowKey: GetRowKey<T>): FlattenData<T>[];

es/hooks/useFlattenRecords.js

@@ -1,7 +0,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 // recursion (flat tree structure)
-function flatRecord(record, indent, childrenColumnName, expandedKeys, getRowKey, index) {
-  var arr = [];
-  arr.push({
+function fillRecords(list, record, indent, childrenColumnName, expandedKeys, getRowKey, index) {
+  list.push({
     record: record,
@@ -16,9 +14,6 @@ indent: indent,
     for (var i = 0; i < record[childrenColumnName].length; i += 1) {
-      var tempArr = flatRecord(record[childrenColumnName][i], indent + 1, childrenColumnName, expandedKeys, getRowKey, i);
-      arr.push.apply(arr, _toConsumableArray(tempArr));
+      fillRecords(list, record[childrenColumnName][i], indent + 1, childrenColumnName, expandedKeys, getRowKey, i);
     }
   }
-  return arr;
 }
-
 /**
@@ -38,13 +33,12 @@ * flat tree data on expanded state
     if (expandedKeys !== null && expandedKeys !== void 0 && expandedKeys.size) {
-      var temp = [];
+      var list = [];
 
       // collect flattened record
       for (var i = 0; i < (data === null || data === void 0 ? void 0 : data.length); i += 1) {
-        var _temp;
         var record = data[i];
 
         // using array.push or spread operator may cause "Maximum call stack size exceeded" exception if array size is big enough.
-        temp = (_temp = temp).concat.apply(_temp, _toConsumableArray(flatRecord(record, 0, childrenColumnName, expandedKeys, getRowKey, i)));
+        fillRecords(list, record, 0, childrenColumnName, expandedKeys, getRowKey, i);
       }
-      return temp;
+      return list;
     }
@@ -51,0 +45,0 @@ return data === null || data === void 0 ? void 0 : data.map(function (item, index) {

es/index.d.ts

 import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant';
 import { FooterComponents as Summary } from './Footer';
+import VirtualTable, { genVirtualTable } from './VirtualTable';
 import Column from './sugar/Column';
@@ -8,3 +9,3 @@ import ColumnGroup from './sugar/ColumnGroup';
 import { INTERNAL_COL_DEFINE } from './utils/legacyUtil';
-export { genTable, Summary, Column, ColumnGroup, TableProps, INTERNAL_COL_DEFINE, EXPAND_COLUMN, INTERNAL_HOOKS, };
+export { genTable, Summary, Column, ColumnGroup, type TableProps, INTERNAL_COL_DEFINE, EXPAND_COLUMN, INTERNAL_HOOKS, VirtualTable, genVirtualTable, };
 export default Table;

es/index.js

 import { EXPAND_COLUMN, INTERNAL_HOOKS } from "./constant";
 import { FooterComponents as Summary } from "./Footer";
+import VirtualTable, { genVirtualTable } from "./VirtualTable";
 import Column from "./sugar/Column";
@@ -7,3 +8,3 @@ import ColumnGroup from "./sugar/ColumnGroup";
 import { INTERNAL_COL_DEFINE } from "./utils/legacyUtil";
-export { genTable, Summary, Column, ColumnGroup, INTERNAL_COL_DEFINE, EXPAND_COLUMN, INTERNAL_HOOKS };
+export { genTable, Summary, Column, ColumnGroup, INTERNAL_COL_DEFINE, EXPAND_COLUMN, INTERNAL_HOOKS, VirtualTable, genVirtualTable };
 export default Table;

es/interface.d.ts

@@ -80,5 +80,9 @@ import type * as React from 'react';
 }
-export type GetComponentProps<DataType> = (data: DataType, index?: number) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
+export type GetComponentProps<DataType> = (data: DataType, index?: number) => React.HTMLAttributes<any> & React.TdHTMLAttributes<any>;
 type Component<P> = React.ComponentType<P> | React.ForwardRefExoticComponent<P> | React.FC<P> | keyof React.ReactHTML;
 export type CustomizeComponent = Component<any>;
+export type OnCustomizeScroll = (info: {
+    currentTarget?: HTMLElement;
+    scrollLeft?: number;
+}) => void;
 export type CustomizeScrollBody<RecordType> = (data: readonly RecordType[], info: {
@@ -89,6 +93,3 @@ scrollbarSize: number;
     }>;
-    onScroll: (info: {
-        currentTarget?: HTMLElement;
-        scrollLeft?: number;
-    }) => void;
+    onScroll: OnCustomizeScroll;
 }) => React.ReactNode;
@@ -95,0 +96,0 @@ export interface TableComponents<RecordType> {

es/Table.d.ts

@@ -33,2 +33,3 @@ /**
 import ColumnGroup from './sugar/ColumnGroup';
+export declare const DEFAULT_PREFIX = "rc-table";
 export interface TableProps<RecordType = unknown> extends Omit<LegacyExpandableProps<RecordType>, 'showExpandColumn'> {
@@ -78,2 +79,8 @@ prefixCls?: string;
      */
+    tailor?: boolean;
+    /**
+     * @private Internal usage, may remove by refactor.
+     *
+     * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
+     */
     internalRefs?: {
@@ -80,0 +87,0 @@ body: React.MutableRefObject<HTMLDivElement>;

es/Table.js

@@ -31,3 +31,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-import { makeImmutable } from '@rc-component/context';
 import classNames from 'classnames';
@@ -46,3 +45,3 @@ import ResizeObserver from 'rc-resize-observer';
 import { EXPAND_COLUMN, INTERNAL_HOOKS } from "./constant";
-import TableContext from "./context/TableContext";
+import TableContext, { makeImmutable } from "./context/TableContext";
 import FixedHolder from "./FixedHolder";
@@ -64,2 +63,3 @@ import Footer, { FooterComponents } from "./Footer";
 import { getColumnsKey, validateValue } from "./utils/valueUtil";
+export var DEFAULT_PREFIX = 'rc-table';
 
@@ -78,3 +78,3 @@ // Used for conditions cache
     rowKey: 'key',
-    prefixCls: 'rc-table',
+    prefixCls: DEFAULT_PREFIX,
     emptyText: defaultEmpty
@@ -104,5 +104,7 @@ }, tableProps);
     internalRefs = props.internalRefs,
+    tailor = props.tailor,
     sticky = props.sticky;
   var mergedData = data || EMPTY_DATA;
   var hasData = !!mergedData.length;
+  var useInternalHooks = internalHooks === INTERNAL_HOOKS;
 
@@ -133,2 +135,3 @@ // ===================== Warning ======================
   }, [rowKey]);
+  var customizeScrollBody = getComponent(['body']);
 
@@ -166,4 +169,5 @@ // ====================== Hover =======================
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
-      direction: direction
-    }), internalHooks === INTERNAL_HOOKS ? transformColumns : null),
+      direction: direction,
+      scrollWidth: useInternalHooks && tailor && typeof (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'number' ? scroll.x : null
+    }), useInternalHooks ? transformColumns : null),
     _useColumns2 = _slicedToArray(_useColumns, 2),
@@ -305,5 +309,6 @@ columns = _useColumns2[0],
     }
-    if (currentTarget) {
-      var scrollWidth = currentTarget.scrollWidth,
-        clientWidth = currentTarget.clientWidth;
+    var measureTarget = currentTarget || scrollHeaderRef.current;
+    if (measureTarget) {
+      var scrollWidth = measureTarget.scrollWidth,
+        clientWidth = measureTarget.clientWidth;
       // There is no space to scroll
@@ -366,6 +371,8 @@ if (scrollWidth === clientWidth) {
   React.useEffect(function () {
-    if (scrollBodyRef.current instanceof Element) {
-      setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);
-    } else {
-      setScrollbarSize(getTargetScrollBarSize(scrollBodyContainerRef.current).width);
+    if (!tailor || !useInternalHooks) {
+      if (scrollBodyRef.current instanceof Element) {
+        setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.current).width);
+      } else {
+        setScrollbarSize(getTargetScrollBarSize(scrollBodyContainerRef.current).width);
+      }
     }
@@ -377,3 +384,3 @@ setSupportSticky(isStyleSupport('position', 'sticky'));
   React.useEffect(function () {
-    if (internalHooks === INTERNAL_HOOKS && internalRefs) {
+    if (useInternalHooks && internalRefs) {
       internalRefs.body.current = scrollBodyRef.current;
@@ -443,8 +450,3 @@ }
     measureColumnWidth: fixHeader || horizonScroll || isSticky,
-    expandedKeys: mergedExpandedKeys,
-    rowExpandable: expandableConfig.rowExpandable,
-    getRowKey: getRowKey,
-    onRow: onRow,
-    emptyNode: emptyNode,
-    childrenColumnName: mergedChildrenColumnName
+    emptyNode: emptyNode
   });
@@ -461,6 +463,2 @@ var bodyColGroup = /*#__PURE__*/React.createElement(ColGroup, {
   }, caption) : undefined;
-  var customizeScrollBody = getComponent(['body']);
-  if (process.env.NODE_ENV !== 'production' && typeof customizeScrollBody === 'function' && hasData && !fixHeader) {
-    warning(false, '`components.body` with render props is only work on `scroll.y`.');
-  }
   var dataProps = pickAttrs(props, {
@@ -584,3 +582,2 @@ data: true
       // Body
-
       tableLayout: mergedTableLayout,
@@ -606,3 +603,8 @@ rowClassName: rowClassName,
       hoverEndRow: endRow,
-      onHover: onHover
+      onHover: onHover,
+      rowExpandable: expandableConfig.rowExpandable,
+      onRow: onRow,
+      getRowKey: getRowKey,
+      expandedKeys: mergedExpandedKeys,
+      childrenColumnName: mergedChildrenColumnName
     };
@@ -617,3 +619,3 @@ }, [
   // Row
-  startRow, endRow, onHover]);
+  startRow, endRow, onHover, expandableConfig.rowExpandable, onRow, getRowKey, mergedExpandedKeys, mergedChildrenColumnName]);
   return /*#__PURE__*/React.createElement(TableContext.Provider, {
@@ -620,0 +622,0 @@ value: TableContextValue

es/utils/valueUtil.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import type { DataIndex, Key } from '../interface';
@@ -2,0 +3,0 @@ interface GetColumnKeyColumn {

lib/Body/BodyRow.d.ts

 import * as React from 'react';
-import type { CustomizeComponent, GetComponentProps, GetRowKey, Key } from '../interface';
+import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface';
+import useRowInfo from '../hooks/useRowInfo';
 export interface BodyRowProps<RecordType> {
@@ -9,13 +10,15 @@ record: RecordType;
     style?: React.CSSProperties;
-    expandedKeys: Set<Key>;
     rowComponent: CustomizeComponent;
     cellComponent: CustomizeComponent;
     scopeCellComponent: CustomizeComponent;
-    onRow: GetComponentProps<RecordType>;
-    rowExpandable: (record: RecordType) => boolean;
     indent?: number;
     rowKey: React.Key;
     getRowKey: GetRowKey<RecordType>;
-    childrenColumnName: string;
 }
+export declare function getCellProps<RecordType>(rowInfo: ReturnType<typeof useRowInfo<RecordType>>, column: ColumnType<RecordType>, colIndex: number, indent: number, index: number): {
+    key: React.Key;
+    fixedInfo: import("../utils/fixUtil").FixedInfo;
+    appendCellNode: React.ReactNode;
+    additionalCellProps: React.TdHTMLAttributes<HTMLElement>;
+};
 declare function BodyRow<RecordType extends {
@@ -22,0 +25,0 @@ children?: readonly RecordType[];

lib/Body/BodyRow.js

@@ -9,15 +9,64 @@ "use strict";
 exports.default = void 0;
+exports.getCellProps = getCellProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _context = require("@rc-component/context");
 var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 var _Cell = _interopRequireDefault(require("../Cell"));
-var _TableContext = _interopRequireDefault(require("../context/TableContext"));
+var _TableContext = require("../context/TableContext");
 var _useRenderTimes = _interopRequireDefault(require("../hooks/useRenderTimes"));
-var _valueUtil = require("../utils/valueUtil");
 var _ExpandedRow = _interopRequireDefault(require("./ExpandedRow"));
+var _useRowInfo = _interopRequireDefault(require("../hooks/useRowInfo"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// ==================================================================================
+// ==                                 getCellProps                                 ==
+// ==================================================================================
+function getCellProps(rowInfo, column, colIndex, indent, index) {
+  var record = rowInfo.record,
+    prefixCls = rowInfo.prefixCls,
+    columnsKey = rowInfo.columnsKey,
+    fixedInfoList = rowInfo.fixedInfoList,
+    expandIconColumnIndex = rowInfo.expandIconColumnIndex,
+    nestExpandable = rowInfo.nestExpandable,
+    indentSize = rowInfo.indentSize,
+    expandIcon = rowInfo.expandIcon,
+    expanded = rowInfo.expanded,
+    hasNestChildren = rowInfo.hasNestChildren,
+    onTriggerExpand = rowInfo.onTriggerExpand;
+  var key = columnsKey[colIndex];
+  var fixedInfo = fixedInfoList[colIndex];
+
+  // ============= Used for nest expandable =============
+  var appendCellNode;
+  if (colIndex === (expandIconColumnIndex || 0) && nestExpandable) {
+    appendCellNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingLeft: "".concat(indentSize * indent, "px")
+      },
+      className: "".concat(prefixCls, "-row-indent indent-level-").concat(indent)
+    }), expandIcon({
+      prefixCls: prefixCls,
+      expanded: expanded,
+      expandable: hasNestChildren,
+      record: record,
+      onExpand: onTriggerExpand
+    }));
+  }
+  var additionalCellProps;
+  if (column.onCell) {
+    additionalCellProps = column.onCell(record, index);
+  }
+  return {
+    key: key,
+    fixedInfo: fixedInfo,
+    appendCellNode: appendCellNode,
+    additionalCellProps: additionalCellProps || {}
+  };
+}
+
+// ==================================================================================
+// ==                                 getCellProps                                 ==
+// ==================================================================================
 function BodyRow(props) {
@@ -33,5 +82,2 @@ if (process.env.NODE_ENV !== 'production') {
     rowKey = props.rowKey,
-    rowExpandable = props.rowExpandable,
-    expandedKeys = props.expandedKeys,
-    onRow = props.onRow,
     _props$indent = props.indent,
@@ -41,17 +87,11 @@ indent = _props$indent === void 0 ? 0 : _props$indent,
     cellComponent = props.cellComponent,
-    scopeCellComponent = props.scopeCellComponent,
-    childrenColumnName = props.childrenColumnName;
-  var _useContext = (0, _context.useContext)(_TableContext.default, ['prefixCls', 'fixedInfoList', 'flattenColumns', 'expandableType', 'expandRowByClick', 'onTriggerExpand', 'rowClassName', 'expandedRowClassName', 'indentSize', 'expandIcon', 'expandedRowRender', 'expandIconColumnIndex']),
-    prefixCls = _useContext.prefixCls,
-    fixedInfoList = _useContext.fixedInfoList,
-    flattenColumns = _useContext.flattenColumns,
-    expandableType = _useContext.expandableType,
-    expandRowByClick = _useContext.expandRowByClick,
-    onTriggerExpand = _useContext.onTriggerExpand,
-    rowClassName = _useContext.rowClassName,
-    expandedRowClassName = _useContext.expandedRowClassName,
-    indentSize = _useContext.indentSize,
-    expandIcon = _useContext.expandIcon,
-    expandedRowRender = _useContext.expandedRowRender,
-    expandIconColumnIndex = _useContext.expandIconColumnIndex;
+    scopeCellComponent = props.scopeCellComponent;
+  var rowInfo = (0, _useRowInfo.default)(record, rowKey, index, indent);
+  var prefixCls = rowInfo.prefixCls,
+    flattenColumns = rowInfo.flattenColumns,
+    expandedRowClassName = rowInfo.expandedRowClassName,
+    expandedRowRender = rowInfo.expandedRowRender,
+    rowProps = rowInfo.rowProps,
+    expanded = rowInfo.expanded,
+    rowSupportExpand = rowInfo.rowSupportExpand;
   var _React$useState = React.useState(false),
@@ -64,3 +104,2 @@ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
   }
-  var expanded = expandedKeys && expandedKeys.has(rowKey);
   React.useEffect(function () {
@@ -71,41 +110,8 @@ if (expanded) {
   }, [expanded]);
-  var rowSupportExpand = expandableType === 'row' && (!rowExpandable || rowExpandable(record));
-  // Only when row is not expandable and `children` exist in record
-  var nestExpandable = expandableType === 'nest';
-  var hasNestChildren = childrenColumnName && record && record[childrenColumnName];
-  var mergedExpandable = rowSupportExpand || nestExpandable;
 
-  // ======================== Expandable =========================
-  var onExpandRef = React.useRef(onTriggerExpand);
-  onExpandRef.current = onTriggerExpand;
-  var onInternalTriggerExpand = function onInternalTriggerExpand() {
-    onExpandRef.current.apply(onExpandRef, arguments);
-  };
-
-  // =========================== onRow ===========================
-  var additionalProps = onRow === null || onRow === void 0 ? void 0 : onRow(record, index);
-  var onClick = function onClick(event) {
-    var _additionalProps$onCl;
-    if (expandRowByClick && mergedExpandable) {
-      onInternalTriggerExpand(record, event);
-    }
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-    additionalProps === null || additionalProps === void 0 ? void 0 : (_additionalProps$onCl = additionalProps.onClick) === null || _additionalProps$onCl === void 0 ? void 0 : _additionalProps$onCl.call.apply(_additionalProps$onCl, [additionalProps, event].concat(args));
-  };
-
   // ======================== Base tr row ========================
-  var computeRowClassName;
-  if (typeof rowClassName === 'string') {
-    computeRowClassName = rowClassName;
-  } else if (typeof rowClassName === 'function') {
-    computeRowClassName = rowClassName(record, index, indent);
-  }
-  var columnsKey = (0, _valueUtil.getColumnsKey)(flattenColumns);
-  var baseRowNode = /*#__PURE__*/React.createElement(RowComponent, (0, _extends2.default)({}, additionalProps, {
+  var baseRowNode = /*#__PURE__*/React.createElement(RowComponent, (0, _extends2.default)({}, rowProps, {
     "data-row-key": rowKey,
-    className: (0, _classnames.default)(className, "".concat(prefixCls, "-row"), "".concat(prefixCls, "-row-level-").concat(indent), computeRowClassName, additionalProps && additionalProps.className),
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), additionalProps ? additionalProps.style : null),
-    onClick: onClick
+    className: (0, _classnames.default)(className, "".concat(prefixCls, "-row"), "".concat(prefixCls, "-row-level-").concat(indent), rowProps === null || rowProps === void 0 ? void 0 : rowProps.className),
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), rowProps === null || rowProps === void 0 ? void 0 : rowProps.style)
   }), flattenColumns.map(function (column, colIndex) {
@@ -115,25 +121,7 @@ var render = column.render,
       columnClassName = column.className;
-    var key = columnsKey[colIndex];
-    var fixedInfo = fixedInfoList[colIndex];
-
-    // ============= Used for nest expandable =============
-    var appendCellNode;
-    if (colIndex === (expandIconColumnIndex || 0) && nestExpandable) {
-      appendCellNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        style: {
-          paddingLeft: "".concat(indentSize * indent, "px")
-        },
-        className: "".concat(prefixCls, "-row-indent indent-level-").concat(indent)
-      }), expandIcon({
-        prefixCls: prefixCls,
-        expanded: expanded,
-        expandable: hasNestChildren,
-        record: record,
-        onExpand: onInternalTriggerExpand
-      }));
-    }
-    var additionalCellProps;
-    if (column.onCell) {
-      additionalCellProps = column.onCell(record, index);
-    }
+    var _getCellProps = getCellProps(rowInfo, column, colIndex, indent, index),
+      key = _getCellProps.key,
+      fixedInfo = _getCellProps.fixedInfo,
+      appendCellNode = _getCellProps.appendCellNode,
+      additionalCellProps = _getCellProps.additionalCellProps;
     return /*#__PURE__*/React.createElement(_Cell.default, (0, _extends2.default)({
@@ -152,4 +140,3 @@ className: columnClassName,
       render: render,
-      shouldCellUpdate: column.shouldCellUpdate,
-      expanded: appendCellNode && expanded
+      shouldCellUpdate: column.shouldCellUpdate
     }, fixedInfo, {
@@ -179,3 +166,3 @@ appendNode: appendCellNode,
 BodyRow.displayName = 'BodyRow';
-var _default = (0, _context.responseImmutable)(BodyRow);
+var _default = (0, _TableContext.responseImmutable)(BodyRow);
 exports.default = _default;

lib/Body/index.d.ts

 import * as React from 'react';
-import type { GetComponentProps, GetRowKey, Key } from '../interface';
 export interface BodyProps<RecordType> {
     data: readonly RecordType[];
-    getRowKey: GetRowKey<RecordType>;
     measureColumnWidth: boolean;
-    expandedKeys: Set<Key>;
-    onRow: GetComponentProps<RecordType>;
-    rowExpandable: (record: RecordType) => boolean;
     emptyNode: React.ReactNode;
-    childrenColumnName: string;
 }
@@ -13,0 +7,0 @@ declare function Body<RecordType>(props: BodyProps<RecordType>): React.JSX.Element;

lib/Body/index.js

@@ -12,3 +12,3 @@ "use strict";
 var _PerfContext = _interopRequireDefault(require("../context/PerfContext"));
-var _TableContext = _interopRequireDefault(require("../context/TableContext"));
+var _TableContext = _interopRequireWildcard(require("../context/TableContext"));
 var _useFlattenRecords = _interopRequireDefault(require("../hooks/useFlattenRecords"));
@@ -27,14 +27,12 @@ var _useRenderTimes = _interopRequireDefault(require("../hooks/useRenderTimes"));
   var data = props.data,
-    getRowKey = props.getRowKey,
     measureColumnWidth = props.measureColumnWidth,
-    expandedKeys = props.expandedKeys,
-    onRow = props.onRow,
-    rowExpandable = props.rowExpandable,
-    emptyNode = props.emptyNode,
-    childrenColumnName = props.childrenColumnName;
-  var _useContext = (0, _context.useContext)(_TableContext.default, ['prefixCls', 'getComponent', 'onColumnResize', 'flattenColumns']),
+    emptyNode = props.emptyNode;
+  var _useContext = (0, _context.useContext)(_TableContext.default, ['prefixCls', 'getComponent', 'onColumnResize', 'flattenColumns', 'getRowKey', 'expandedKeys', 'childrenColumnName']),
     prefixCls = _useContext.prefixCls,
     getComponent = _useContext.getComponent,
     onColumnResize = _useContext.onColumnResize,
-    flattenColumns = _useContext.flattenColumns;
+    flattenColumns = _useContext.flattenColumns,
+    getRowKey = _useContext.getRowKey,
+    expandedKeys = _useContext.expandedKeys,
+    childrenColumnName = _useContext.childrenColumnName;
   var flattenData = (0, _useFlattenRecords.default)(data, childrenColumnName, expandedKeys, getRowKey);
@@ -68,7 +66,3 @@
         scopeCellComponent: thComponent,
-        expandedKeys: expandedKeys,
-        onRow: onRow,
         getRowKey: getRowKey,
-        rowExpandable: rowExpandable,
-        childrenColumnName: childrenColumnName,
         indent: indent
@@ -100,3 +94,3 @@ });
 Body.displayName = 'Body';
-var _default = (0, _context.responseImmutable)(Body);
+var _default = (0, _TableContext.responseImmutable)(Body);
 exports.default = _default;

lib/Cell/index.js

@@ -139,3 +139,3 @@ "use strict";
   }
-  var mergedStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, additionalProps.style), alignStyle), fixedStyle), legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.style);
+  var mergedStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, fixedStyle), additionalProps.style), alignStyle), legacyCellProps === null || legacyCellProps === void 0 ? void 0 : legacyCellProps.style);
 
@@ -142,0 +142,0 @@ // >>>>> Children Node

lib/Cell/useCellRender.js

@@ -11,3 +11,2 @@ "use strict";
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _context = require("@rc-component/context");
 var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo"));
@@ -20,2 +19,3 @@ var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
 var _valueUtil = require("../utils/valueUtil");
+var _TableContext = require("../context/TableContext");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,3 +29,3 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
   var perfRecord = React.useContext(_PerfContext.default);
-  var mark = (0, _context.useImmutableMark)();
+  var mark = (0, _TableContext.useImmutableMark)();
 
@@ -32,0 +32,0 @@ // ======================== Render ========================

lib/context/TableContext.d.ts

@@ -1,3 +0,6 @@
-import type { ColumnsType, ColumnType, Direction, ExpandableType, ExpandedRowRender, GetComponent, RenderExpandIcon, RowClassName, TableLayout, TriggerEventHandler } from '../interface';
+/// <reference types="react" />
+import type { ColumnsType, ColumnType, Direction, ExpandableType, ExpandedRowRender, GetComponent, GetComponentProps, GetRowKey, RenderExpandIcon, RowClassName, TableLayout, TriggerEventHandler } from '../interface';
 import type { FixedInfo } from '../utils/fixUtil';
+declare const makeImmutable: <T extends import("react").ComponentType<any>>(Component: T, shouldTriggerRender?: import("@rc-component/context/lib/Immutable").CompareProps<T>) => T, responseImmutable: <T_1 extends import("react").ComponentType<any>>(Component: T_1, propsAreEqual?: import("@rc-component/context/lib/Immutable").CompareProps<T_1>) => T_1, useImmutableMark: () => number;
+export { makeImmutable, responseImmutable, useImmutableMark };
 export interface TableContextProps<RecordType = any> {
@@ -17,2 +20,3 @@ prefixCls: string;
     expandedRowClassName: RowClassName<RecordType>;
+    onRow?: GetComponentProps<RecordType>;
     tableLayout: TableLayout;
@@ -33,4 +37,8 @@ indentSize: number;
     onHover: (start: number, end: number) => void;
+    rowExpandable: (record: RecordType) => boolean;
+    expandedKeys: Set<React.Key>;
+    getRowKey: GetRowKey<RecordType>;
+    childrenColumnName: string;
 }
 declare const TableContext: import("@rc-component/context").SelectorContext<TableContextProps<any>>;
 export default TableContext;

lib/context/TableContext.js

@@ -6,6 +6,13 @@ "use strict";
 });
-exports.default = void 0;
+exports.useImmutableMark = exports.responseImmutable = exports.makeImmutable = exports.default = void 0;
 var _context = require("@rc-component/context");
+var _createImmutable = (0, _context.createImmutable)(),
+  makeImmutable = _createImmutable.makeImmutable,
+  responseImmutable = _createImmutable.responseImmutable,
+  useImmutableMark = _createImmutable.useImmutableMark;
+exports.useImmutableMark = useImmutableMark;
+exports.responseImmutable = responseImmutable;
+exports.makeImmutable = makeImmutable;
 var TableContext = (0, _context.createContext)();
 var _default = TableContext;
 exports.default = _default;

lib/Footer/index.js

@@ -11,3 +11,3 @@ "use strict";
 var React = _interopRequireWildcard(require("react"));
-var _TableContext = _interopRequireDefault(require("../context/TableContext"));
+var _TableContext = _interopRequireWildcard(require("../context/TableContext"));
 var _useRenderTimes = _interopRequireDefault(require("../hooks/useRenderTimes"));
@@ -43,5 +43,5 @@ var _Summary = _interopRequireDefault(require("./Summary"));
 }
-var _default = (0, _context.responseImmutable)(Footer);
+var _default = (0, _TableContext.responseImmutable)(Footer);
 exports.default = _default;
 var FooterComponents = _Summary.default;
 exports.FooterComponents = FooterComponents;

lib/Header/Header.js

@@ -11,3 +11,3 @@ "use strict";
 var React = _interopRequireWildcard(require("react"));
-var _TableContext = _interopRequireDefault(require("../context/TableContext"));
+var _TableContext = _interopRequireWildcard(require("../context/TableContext"));
 var _useRenderTimes = _interopRequireDefault(require("../hooks/useRenderTimes"));
@@ -108,3 +108,3 @@ var _HeaderRow = _interopRequireDefault(require("./HeaderRow"));
 }
-var _default = (0, _context.responseImmutable)(Header);
+var _default = (0, _TableContext.responseImmutable)(Header);
 exports.default = _default;

lib/hooks/useFlattenRecords.d.ts

 import type { GetRowKey, Key } from '../interface';
+export interface FlattenData<RecordType> {
+    record: RecordType;
+    indent: number;
+    index: number;
+}
 /**
@@ -13,6 +18,2 @@ * flat tree data on expanded state
  */
-export default function useFlattenRecords<T>(data: any, childrenColumnName: string, expandedKeys: Set<Key>, getRowKey: GetRowKey<T>): {
-    record: T;
-    indent: number;
-    index: number;
-}[];
+export default function useFlattenRecords<T>(data: T[] | readonly T[], childrenColumnName: string, expandedKeys: Set<Key>, getRowKey: GetRowKey<T>): FlattenData<T>[];

lib/hooks/useFlattenRecords.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -9,3 +8,2 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = useFlattenRecords;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var React = _interopRequireWildcard(require("react"));
@@ -15,5 +13,4 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 // recursion (flat tree structure)
-function flatRecord(record, indent, childrenColumnName, expandedKeys, getRowKey, index) {
-  var arr = [];
-  arr.push({
+function fillRecords(list, record, indent, childrenColumnName, expandedKeys, getRowKey, index) {
+  list.push({
     record: record,
@@ -28,9 +25,6 @@ indent: indent,
     for (var i = 0; i < record[childrenColumnName].length; i += 1) {
-      var tempArr = flatRecord(record[childrenColumnName][i], indent + 1, childrenColumnName, expandedKeys, getRowKey, i);
-      arr.push.apply(arr, (0, _toConsumableArray2.default)(tempArr));
+      fillRecords(list, record[childrenColumnName][i], indent + 1, childrenColumnName, expandedKeys, getRowKey, i);
     }
   }
-  return arr;
 }
-
 /**
@@ -50,13 +44,12 @@ * flat tree data on expanded state
     if (expandedKeys !== null && expandedKeys !== void 0 && expandedKeys.size) {
-      var temp = [];
+      var list = [];
 
       // collect flattened record
       for (var i = 0; i < (data === null || data === void 0 ? void 0 : data.length); i += 1) {
-        var _temp;
         var record = data[i];
 
         // using array.push or spread operator may cause "Maximum call stack size exceeded" exception if array size is big enough.
-        temp = (_temp = temp).concat.apply(_temp, (0, _toConsumableArray2.default)(flatRecord(record, 0, childrenColumnName, expandedKeys, getRowKey, i)));
+        fillRecords(list, record, 0, childrenColumnName, expandedKeys, getRowKey, i);
       }
-      return temp;
+      return list;
     }
@@ -63,0 +56,0 @@ return data === null || data === void 0 ? void 0 : data.map(function (item, index) {

lib/index.d.ts

 import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant';
 import { FooterComponents as Summary } from './Footer';
+import VirtualTable, { genVirtualTable } from './VirtualTable';
 import Column from './sugar/Column';
@@ -8,3 +9,3 @@ import ColumnGroup from './sugar/ColumnGroup';
 import { INTERNAL_COL_DEFINE } from './utils/legacyUtil';
-export { genTable, Summary, Column, ColumnGroup, TableProps, INTERNAL_COL_DEFINE, EXPAND_COLUMN, INTERNAL_HOOKS, };
+export { genTable, Summary, Column, ColumnGroup, type TableProps, INTERNAL_COL_DEFINE, EXPAND_COLUMN, INTERNAL_HOOKS, VirtualTable, genVirtualTable, };
 export default Table;

lib/index.js

@@ -44,2 +44,8 @@ "use strict";
 });
+Object.defineProperty(exports, "VirtualTable", {
+  enumerable: true,
+  get: function get() {
+    return _VirtualTable.default;
+  }
+});
 exports.default = void 0;
@@ -52,4 +58,11 @@ Object.defineProperty(exports, "genTable", {
 });
+Object.defineProperty(exports, "genVirtualTable", {
+  enumerable: true,
+  get: function get() {
+    return _VirtualTable.genVirtualTable;
+  }
+});
 var _constant = require("./constant");
 var _Footer = require("./Footer");
+var _VirtualTable = _interopRequireWildcard(require("./VirtualTable"));
 var _Column = _interopRequireDefault(require("./sugar/Column"));
@@ -56,0 +69,0 @@ var _ColumnGroup = _interopRequireDefault(require("./sugar/ColumnGroup"));

lib/interface.d.ts

@@ -80,5 +80,9 @@ import type * as React from 'react';
 }
-export type GetComponentProps<DataType> = (data: DataType, index?: number) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
+export type GetComponentProps<DataType> = (data: DataType, index?: number) => React.HTMLAttributes<any> & React.TdHTMLAttributes<any>;
 type Component<P> = React.ComponentType<P> | React.ForwardRefExoticComponent<P> | React.FC<P> | keyof React.ReactHTML;
 export type CustomizeComponent = Component<any>;
+export type OnCustomizeScroll = (info: {
+    currentTarget?: HTMLElement;
+    scrollLeft?: number;
+}) => void;
 export type CustomizeScrollBody<RecordType> = (data: readonly RecordType[], info: {
@@ -89,6 +93,3 @@ scrollbarSize: number;
     }>;
-    onScroll: (info: {
-        currentTarget?: HTMLElement;
-        scrollLeft?: number;
-    }) => void;
+    onScroll: OnCustomizeScroll;
 }) => React.ReactNode;
@@ -95,0 +96,0 @@ export interface TableComponents<RecordType> {

lib/Table.d.ts

@@ -33,2 +33,3 @@ /**
 import ColumnGroup from './sugar/ColumnGroup';
+export declare const DEFAULT_PREFIX = "rc-table";
 export interface TableProps<RecordType = unknown> extends Omit<LegacyExpandableProps<RecordType>, 'showExpandColumn'> {
@@ -78,2 +79,8 @@ prefixCls?: string;
      */
+    tailor?: boolean;
+    /**
+     * @private Internal usage, may remove by refactor.
+     *
+     * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
+     */
     internalRefs?: {
@@ -80,0 +87,0 @@ body: React.MutableRefObject<HTMLDivElement>;

lib/Table.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = exports.DEFAULT_PREFIX = void 0;
 exports.genTable = genTable;
@@ -15,3 +15,2 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _context = require("@rc-component/context");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -30,3 +29,3 @@ var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
 var _constant = require("./constant");
-var _TableContext = _interopRequireDefault(require("./context/TableContext"));
+var _TableContext = _interopRequireWildcard(require("./context/TableContext"));
 var _FixedHolder = _interopRequireDefault(require("./FixedHolder"));
@@ -76,3 +75,6 @@ var _Footer = _interopRequireWildcard(require("./Footer"));
 
+var DEFAULT_PREFIX = 'rc-table';
+
 // Used for conditions cache
+exports.DEFAULT_PREFIX = DEFAULT_PREFIX;
 var EMPTY_DATA = [];
@@ -89,3 +91,3 @@
     rowKey: 'key',
-    prefixCls: 'rc-table',
+    prefixCls: DEFAULT_PREFIX,
     emptyText: defaultEmpty
@@ -115,5 +117,7 @@ }, tableProps);
     internalRefs = props.internalRefs,
+    tailor = props.tailor,
     sticky = props.sticky;
   var mergedData = data || EMPTY_DATA;
   var hasData = !!mergedData.length;
+  var useInternalHooks = internalHooks === _constant.INTERNAL_HOOKS;
 
@@ -144,2 +148,3 @@ // ===================== Warning ======================
   }, [rowKey]);
+  var customizeScrollBody = getComponent(['body']);
 
@@ -177,4 +182,5 @@ // ====================== Hover =======================
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
-      direction: direction
-    }), internalHooks === _constant.INTERNAL_HOOKS ? transformColumns : null),
+      direction: direction,
+      scrollWidth: useInternalHooks && tailor && typeof (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'number' ? scroll.x : null
+    }), useInternalHooks ? transformColumns : null),
     _useColumns2 = (0, _slicedToArray2.default)(_useColumns, 2),
@@ -316,5 +322,6 @@ columns = _useColumns2[0],
     }
-    if (currentTarget) {
-      var scrollWidth = currentTarget.scrollWidth,
-        clientWidth = currentTarget.clientWidth;
+    var measureTarget = currentTarget || scrollHeaderRef.current;
+    if (measureTarget) {
+      var scrollWidth = measureTarget.scrollWidth,
+        clientWidth = measureTarget.clientWidth;
       // There is no space to scroll
@@ -377,6 +384,8 @@ if (scrollWidth === clientWidth) {
   React.useEffect(function () {
-    if (scrollBodyRef.current instanceof Element) {
-      setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyRef.current).width);
-    } else {
-      setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyContainerRef.current).width);
+    if (!tailor || !useInternalHooks) {
+      if (scrollBodyRef.current instanceof Element) {
+        setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyRef.current).width);
+      } else {
+        setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyContainerRef.current).width);
+      }
     }
@@ -388,3 +397,3 @@ setSupportSticky((0, _styleChecker.isStyleSupport)('position', 'sticky'));
   React.useEffect(function () {
-    if (internalHooks === _constant.INTERNAL_HOOKS && internalRefs) {
+    if (useInternalHooks && internalRefs) {
       internalRefs.body.current = scrollBodyRef.current;
@@ -454,8 +463,3 @@ }
     measureColumnWidth: fixHeader || horizonScroll || isSticky,
-    expandedKeys: mergedExpandedKeys,
-    rowExpandable: expandableConfig.rowExpandable,
-    getRowKey: getRowKey,
-    onRow: onRow,
-    emptyNode: emptyNode,
-    childrenColumnName: mergedChildrenColumnName
+    emptyNode: emptyNode
   });
@@ -472,6 +476,2 @@ var bodyColGroup = /*#__PURE__*/React.createElement(_ColGroup.default, {
   }, caption) : undefined;
-  var customizeScrollBody = getComponent(['body']);
-  if (process.env.NODE_ENV !== 'production' && typeof customizeScrollBody === 'function' && hasData && !fixHeader) {
-    (0, _warning.default)(false, '`components.body` with render props is only work on `scroll.y`.');
-  }
   var dataProps = (0, _pickAttrs.default)(props, {
@@ -595,3 +595,2 @@ data: true
       // Body
-
       tableLayout: mergedTableLayout,
@@ -617,3 +616,8 @@ rowClassName: rowClassName,
       hoverEndRow: endRow,
-      onHover: onHover
+      onHover: onHover,
+      rowExpandable: expandableConfig.rowExpandable,
+      onRow: onRow,
+      getRowKey: getRowKey,
+      expandedKeys: mergedExpandedKeys,
+      childrenColumnName: mergedChildrenColumnName
     };
@@ -628,3 +632,3 @@ }, [
   // Row
-  startRow, endRow, onHover]);
+  startRow, endRow, onHover, expandableConfig.rowExpandable, onRow, getRowKey, mergedExpandedKeys, mergedChildrenColumnName]);
   return /*#__PURE__*/React.createElement(_TableContext.default.Provider, {
@@ -635,3 +639,3 @@ value: TableContextValue
 function genTable(shouldTriggerRender) {
-  return (0, _context.makeImmutable)(Table, shouldTriggerRender);
+  return (0, _TableContext.makeImmutable)(Table, shouldTriggerRender);
 }
@@ -638,0 +642,0 @@ var ImmutableTable = genTable();

lib/utils/valueUtil.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import type { DataIndex, Key } from '../interface';
@@ -2,0 +3,0 @@ interface GetColumnKeyColumn {

package.json

 {
   "name": "rc-table",
-  "version": "7.32.3",
+  "version": "7.33.0-alpha.0",
   "description": "table ui component for react",
@@ -45,3 +45,3 @@ "engines": {
     "coverage": "vitest run --coverage",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish --branch static-table",
     "lint": "eslint src/ --ext .tsx,.ts",
@@ -58,8 +58,10 @@ "lint:tsc": "tsc -p tsconfig.json --noEmit",
     "@babel/runtime": "^7.10.1",
-    "@rc-component/context": "^1.3.0",
+    "@rc-component/context": "^1.4.0",
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
-    "rc-util": "^5.27.1"
+    "rc-util": "^5.36.0",
+    "rc-virtual-list": "^3.10.4"
   },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.2",
     "@testing-library/jest-dom": "^5.16.5",
@@ -71,3 +73,5 @@ "@testing-library/react": "^12.1.5",
     "@types/responselike": "^1.0.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@umijs/fabric": "^3.0.0",
+    "@vitest/coverage-c8": "^0.31.0",
     "cross-env": "^7.0.0",
@@ -84,2 +88,3 @@ "dumi": "^2.1.3",
     "immutability-helper": "^3.0.0",
+    "jsdom": "^22.0.0",
     "less": "^3.10.3",
@@ -103,5 +108,2 @@ "lint-staged": "^13.1.0",
     "typescript": "^4.8.4",
-    "@vitest/coverage-c8": "^0.31.0",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "jsdom": "^22.0.0",
     "vitest": "^0.31.0"
@@ -108,0 +110,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

386969

increased by19.37%

Number of package files

192

increased by17.07%

Lines of code

8417

increased by20.62%

Worsened metrics

Dependency count

8

increased by14.29%

Dev dependency count

41

increased by2.5%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

44

increased by10%

Published versions last year

30

decreased by-3.23%

Dependency changes

• + Addedrc-virtual-list@^3.10.4

• + Addedrc-virtual-list@3.15.0(transitive)

• Updated@rc-component/context@^1.4.0

• Updatedrc-util@^5.36.0