feat: add sticky

Author: crazyair

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 } from '../interface';
+import type { ColumnType, CustomizeComponent, ExpandableConfig } from '../interface';
 import ExpandedRow from './ExpandedRow';
 import { computedExpandedClassName } from '../utils/expandUtil';
-import { TableProps } from '..';
+import type { TableProps } from '..';
 
 export interface BodyRowProps<RecordType> {
   record: RecordType;
@@ -23,6 +23,7 @@ export interface BodyRowProps<RecordType> {
   indent?: number;
   rowKey: React.Key;
   rowKeys: React.Key[];
+  expandedRowOffset?: ExpandableConfig<RecordType>['expandedRowOffset'];
 }
 
 // ==================================================================================
@@ -126,6 +127,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     rowComponent: RowComponent,
     cellComponent,
     scopeCellComponent,
+    expandedRowOffset = 0,
     rowKeys,
   } = props;
 
@@ -218,6 +220,14 @@ 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}
@@ -229,7 +239,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         prefixCls={prefixCls}
         component={RowComponent}
         cellComponent={cellComponent}
-        colSpan={flattenColumns.length}
+        offsetWidth={offsetWidth}
+        colSpan={flattenColumns.length - expandedRowOffset}
         isEmpty={false}
       >
         {expandContent}

src/Body/ExpandedRow.tsx

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

src/Body/index.tsx

@@ -32,6 +32,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     expandedKeys,
     childrenColumnName,
     emptyNode,
+    expandedRowOffset,
     classNames,
     styles,
   } = useContext(TableContext, [
@@ -43,6 +44,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     'expandedKeys',
     'childrenColumnName',
     'emptyNode',
+    'expandedRowOffset',
     'classNames',
     'styles',
   ]);
@@ -88,6 +90,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
           cellComponent={tdComponent}
           scopeCellComponent={thComponent}
           indent={indent}
+          expandedRowOffset={expandedRowOffset}
         />
       );
     });

src/Table.tsx

@@ -872,6 +872,7 @@ function Table<RecordType extends DefaultRecordType>(
       expandedRowRender: expandableConfig.expandedRowRender,
       onTriggerExpand,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
+      expandedRowOffset: expandableConfig.expandedRowOffset,
       indentSize: expandableConfig.indentSize,
       allColumnsFixedLeft: flattenColumns.every(col => col.fixed === 'start'),
       emptyNode,
@@ -920,6 +921,7 @@ function Table<RecordType extends DefaultRecordType>(
       expandableType,
       expandableConfig.expandRowByClick,
       expandableConfig.expandedRowRender,
+      expandableConfig.expandedRowOffset,
       onTriggerExpand,
       expandableConfig.expandIconColumnIndex,
       expandableConfig.indentSize,
@@ -942,6 +944,8 @@ function Table<RecordType extends DefaultRecordType>(
       mergedChildrenColumnName,
 
       rowHoverable,
+      classNames,
+      styles,
     ],
   );
 

src/context/TableContext.tsx

@@ -3,6 +3,7 @@ import type {
   ColumnsType,
   ColumnType,
   Direction,
+  ExpandableConfig,
   ExpandableType,
   ExpandedRowRender,
   GetComponent,
@@ -14,7 +15,7 @@ import type {
   TriggerEventHandler,
 } from '../interface';
 import type { FixedInfo } from '../utils/fixUtil';
-import { TableProps } from '../Table';
+import type { TableProps } from '../Table';
 
 const { makeImmutable, responseImmutable, useImmutableMark } = createImmutable();
 export { makeImmutable, responseImmutable, useImmutableMark };
@@ -55,6 +56,7 @@ export interface TableContextProps<RecordType = any> {
   expandIcon: RenderExpandIcon<RecordType>;
   onTriggerExpand: TriggerEventHandler<RecordType>;
   expandIconColumnIndex: number;
+  expandedRowOffset: ExpandableConfig<RecordType>['expandedRowOffset'];
   allColumnsFixedLeft: boolean;
 
   // Column

src/interface.ts

@@ -256,6 +256,7 @@ export interface ExpandableConfig<RecordType> {
   rowExpandable?: (record: RecordType) => boolean;
   columnWidth?: number | string;
   fixed?: FixedType;
+  expandedRowOffset?: number;
 }
 
 // =================== Render ===================