chore: perf

Author: zombieJ

docs/examples/expandedSticky.tsx

@@ -65,7 +65,7 @@ const Demo = () => {
       <Table<Record<string, any>>
         rowKey="key"
         sticky
-        scroll={{ x: 800 }}
+        scroll={{ x: 2000 }}
         columns={columns}
         data={data}
         expandable={{

src/Body/BodyRow.tsx

@@ -4,10 +4,10 @@ import Cell from '../Cell';
 import { responseImmutable } from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
 import useRowInfo from '../hooks/useRowInfo';
-import type { ColumnType, CustomizeComponent, ExpandableConfig } from '../interface';
+import type { ColumnType, CustomizeComponent } from '../interface';
 import ExpandedRow from './ExpandedRow';
 import { computedExpandedClassName } from '../utils/expandUtil';
-import { TableProps } from '..';
+import type { TableProps } from '..';
 
 export interface BodyRowProps<RecordType> {
   record: RecordType;
@@ -22,7 +22,12 @@ export interface BodyRowProps<RecordType> {
   scopeCellComponent: CustomizeComponent;
   indent?: number;
   rowKey: React.Key;
-  expandedRowOffset?: ExpandableConfig<RecordType>['expandedRowOffset'];
+
+  // Expanded Row
+  expandedRowInfo: {
+    colSpan: number;
+    sticky: number;
+  };
 }
 
 // ==================================================================================
@@ -108,7 +113,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     rowComponent: RowComponent,
     cellComponent,
     scopeCellComponent,
-    expandedRowOffset = 0,
+    expandedRowInfo,
   } = props;
 
   const rowInfo = useRowInfo(record, rowKey, index, indent);
@@ -198,14 +203,6 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   if (rowSupportExpand && (expandedRef.current || expanded)) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
-    const offsetColumns = flattenColumns.filter((_, idx) => idx < expandedRowOffset);
-    let offsetWidth = 0;
-    offsetColumns.forEach(item => {
-      if (typeof item.width === 'number') {
-        offsetWidth = offsetWidth + (item.width ?? 0);
-      }
-    });
-
     expandRowNode = (
       <ExpandedRow
         expanded={expanded}
@@ -217,9 +214,9 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         prefixCls={prefixCls}
         component={RowComponent}
         cellComponent={cellComponent}
-        offsetWidth={offsetWidth}
-        colSpan={flattenColumns.length - expandedRowOffset}
+        colSpan={expandedRowInfo.colSpan}
         isEmpty={false}
+        stickyOffset={expandedRowInfo.sticky}
       >
         {expandContent}
       </ExpandedRow>

src/Body/ExpandedRow.tsx

@@ -14,7 +14,7 @@ export interface ExpandedRowProps {
   children: React.ReactNode;
   colSpan: number;
   isEmpty: boolean;
-  offsetWidth?: number;
+  stickyOffset?: number;
 }
 
 function ExpandedRow(props: ExpandedRowProps) {
@@ -31,7 +31,7 @@ function ExpandedRow(props: ExpandedRowProps) {
     expanded,
     colSpan,
     isEmpty,
-    offsetWidth = 0,
+    stickyOffset = 0,
   } = props;
 
   const { scrollbarSize, fixHeader, fixColumn, componentWidth, horizonScroll } = useContext(
@@ -46,9 +46,9 @@ function ExpandedRow(props: ExpandedRowProps) {
     contentNode = (
       <div
         style={{
-          width: componentWidth - offsetWidth - (fixHeader && !isEmpty ? scrollbarSize : 0),
+          width: componentWidth - stickyOffset - (fixHeader && !isEmpty ? scrollbarSize : 0),
           position: 'sticky',
-          left: 0,
+          left: stickyOffset,
           overflow: 'hidden',
         }}
         className={`${prefixCls}-expanded-row-fixed`}

src/Body/index.tsx

@@ -35,6 +35,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     classNames,
     styles,
     expandedRowOffset,
+    fixedInfoList,
+    colWidths,
   } = useContext(TableContext, [
     'prefixCls',
     'getComponent',
@@ -47,6 +49,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     'classNames',
     'styles',
     'expandedRowOffset',
+    'fixedInfoList',
+    'colWidths',
   ]);
   const { body: bodyCls = {} } = classNames || {};
   const { body: bodyStyles = {} } = styles || {};
@@ -59,6 +63,23 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     renderWithProps: false,
   });
 
+  // ===================== Expanded =====================
+  // `expandedRowOffset` data is same for all the rows.
+  // Let's calc on Body side to save performance.
+  const expandedRowInfo = React.useMemo(() => {
+    const expandedColSpan = flattenColumns.length - expandedRowOffset;
+
+    let expandedStickyStart = 0;
+    for (let i = 0; i < expandedRowOffset; i += 1) {
+      expandedStickyStart += colWidths[i] || 0;
+    }
+
+    return {
+      colSpan: expandedColSpan,
+      sticky: expandedStickyStart,
+    };
+  }, [flattenColumns.length, expandedRowOffset, colWidths]);
+
   // ====================== Render ======================
   const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
   const trComponent = getComponent(['body', 'row'], 'tr');
@@ -85,7 +106,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
           cellComponent={tdComponent}
           scopeCellComponent={thComponent}
           indent={indent}
-          expandedRowOffset={expandedRowOffset}
+          // Expanded row info
+          expandedRowInfo={expandedRowInfo}
         />
       );
     });

src/Table.tsx

@@ -881,6 +881,7 @@ function Table<RecordType extends DefaultRecordType>(
       columns,
       flattenColumns,
       onColumnResize,
+      colWidths,
 
       // Row
       hoverStartRow: startRow,
@@ -931,6 +932,7 @@ function Table<RecordType extends DefaultRecordType>(
       columns,
       flattenColumns,
       onColumnResize,
+      colWidths,
 
       // Row
       startRow,

src/context/TableContext.tsx

@@ -62,6 +62,7 @@ export interface TableContextProps<RecordType = any> {
   columns: ColumnsType<RecordType>;
   flattenColumns: readonly ColumnType<RecordType>[];
   onColumnResize: (columnKey: React.Key, width: number) => void;
+  colWidths: number[];
 
   // Row
   hoverStartRow: number;