feat: offset

Author: crazyair

docs/examples/expandedRowSpan.tsx

@@ -11,14 +11,18 @@ const columns: ColumnsType = [
     width: 100,
     onCell: (_, index) => {
       const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};
-      if (index === 1) {
+      if (index === 0) {
+        props.rowSpan = 1;
+      } else if (index === 1) {
         props.rowSpan = 4;
       } else if (index === 2) {
         props.rowSpan = 0;
       } else if (index === 3) {
         props.rowSpan = 0;
       } else if (index === 4) {
         props.rowSpan = 0;
+      } else if (index === 5) {
+        props.rowSpan = 1;
       }
 
       return props;
@@ -46,7 +50,10 @@ const Demo = () => (
       rowKey="key"
       columns={columns}
       data={data}
-      expandable={{ expandedRowRender: record => <p style={{ margin: 0 }}>{record.key}</p> }}
+      expandable={{
+        offset: 0,
+        expandedRowRender: record => <p style={{ margin: 0 }}>{record.key}</p>,
+      }}
       className="table"
     />
   </div>

src/Body/BodyRow.tsx

@@ -47,6 +47,7 @@ export function getCellProps<RecordType>(
     onTriggerExpand,
     expandable,
     expandedKeys,
+    offset,
   } = rowInfo;
 
   const key = columnsKey[colIndex];
@@ -79,7 +80,7 @@ export function getCellProps<RecordType>(
 
     // For expandable row with rowSpan,
     // We should increase the rowSpan if the row is expanded
-    if (expandable && rowSpan > 1) {
+    if (expandable && rowSpan > offset) {
       let currentRowSpan = rowSpan;
 
       for (let i = index; i < index + rowSpan; i += 1) {

src/Table.tsx

@@ -842,6 +842,7 @@ function Table<RecordType extends DefaultRecordType>(
       expandableType,
       expandRowByClick: expandableConfig.expandRowByClick,
       expandedRowRender: expandableConfig.expandedRowRender,
+      offset: expandableConfig.offset,
       onTriggerExpand,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
       indentSize: expandableConfig.indentSize,

src/context/TableContext.tsx

@@ -3,6 +3,7 @@ import type {
   ColumnsType,
   ColumnType,
   Direction,
+  ExpandableConfig,
   ExpandableType,
   ExpandedRowRender,
   GetComponent,
@@ -49,6 +50,7 @@ export interface TableContextProps<RecordType = any> {
   expandableType: ExpandableType;
   expandRowByClick: boolean;
   expandedRowRender: ExpandedRowRender<RecordType>;
+  offset: ExpandableConfig<RecordType>['offset'];
   expandIcon: RenderExpandIcon<RecordType>;
   onTriggerExpand: TriggerEventHandler<RecordType>;
   expandIconColumnIndex: number;

src/hooks/useRowInfo.tsx

@@ -27,6 +27,7 @@ export default function useRowInfo<RecordType>(
   | 'expandedKeys'
   | 'childrenColumnName'
   | 'onRow'
+  | 'offset'
 > & {
   columnsKey: React.Key[];
   nestExpandable: boolean;
@@ -54,6 +55,7 @@ export default function useRowInfo<RecordType>(
     'childrenColumnName',
     'rowExpandable',
     'onRow',
+    'offset',
   ]);
 
   const {
@@ -103,7 +105,6 @@ export default function useRowInfo<RecordType>(
 
   // ========================= Column =========================
   const columnsKey = getColumnsKey(flattenColumns);
-
   return {
     ...context,
     columnsKey,

src/interface.ts

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