feat: init

Author: crazyair

docs/demo/expandedSticky.md

@@ -0,0 +1,8 @@
+---
+title: expandedSticky
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/expandedSticky.tsx"></code>

docs/examples/expandedSticky.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import type { ColumnType } from 'rc-table';
+import Table from 'rc-table';
+import '../../assets/index.less';
+
+// 合并单元格
+export const getRowSpan = (source: (string | number | undefined)[] = []) => {
+  const list: { rowSpan?: number }[] = [];
+  let span = 0;
+  source.reverse().forEach((key, index) => {
+    span = span + 1;
+    if (key !== source[index + 1]) {
+      list.push({ rowSpan: span });
+      span = 0;
+    } else {
+      list.push({ rowSpan: 0 });
+    }
+  });
+  return list.reverse();
+};
+
+const Demo = () => {
+  const [expandedRowKeys, setExpandedRowKeys] = useState<readonly React.Key[]>([]);
+
+  const data = [
+    { key: 'a', a: '小二', d: '文零西路' },
+    { key: 'b', a: '张三', d: '文一西路' },
+    { key: 'c', a: '张三', d: '文二西路' },
+  ];
+  const rowKeys = data.map(item => item.key);
+
+  const rowSpanList = getRowSpan(data.map(item => item.a));
+
+  const columns: ColumnType<Record<string, any>>[] = [
+    {
+      title: '手机号',
+      dataIndex: 'a',
+      width: 100,
+      fixed: 'left',
+      onCell: (_, index) => {
+        const { rowSpan = 1 } = rowSpanList[index];
+        const props: React.TdHTMLAttributes<HTMLTableCellElement> = {};
+        props.rowSpan = rowSpan;
+        if (rowSpan >= 1) {
+          let currentRowSpan = rowSpan;
+          for (let i = index; i < index + rowSpan; i += 1) {
+            const rowKey = rowKeys[i];
+            if (expandedRowKeys.includes(rowKey)) {
+              currentRowSpan += 1;
+            }
+          }
+          props.rowSpan = currentRowSpan;
+        }
+        return props;
+      },
+    },
+    Table.EXPAND_COLUMN,
+    { title: 'Address', fixed: 'right', dataIndex: 'd', width: 200 },
+  ];
+
+  return (
+    <div style={{ height: 10000 }}>
+      <h2>expanded & sticky</h2>
+      <Table<Record<string, any>>
+        rowKey="key"
+        sticky
+        scroll={{ x: 800 }}
+        columns={columns}
+        data={data}
+        expandable={{
+          expandedRowOffset: 1,
+          expandedRowKeys,
+          onExpandedRowsChange: keys => setExpandedRowKeys(keys),
+          expandedRowRender: record => <p style={{ margin: 0 }}>{record.key}</p>,
+        }}
+        className="table"
+      />
+    </div>
+  );
+};
+
+export default Demo;

package.json

@@ -111,5 +111,6 @@
     "**/*.{js,jsx,tsx,ts,md,json}": [
       "prettier --write"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

src/Body/BodyRow.tsx

@@ -4,7 +4,7 @@ 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';
 
@@ -19,6 +19,7 @@ export interface BodyRowProps<RecordType> {
   scopeCellComponent: CustomizeComponent;
   indent?: number;
   rowKey: React.Key;
+  expandedRowOffset?: ExpandableConfig<RecordType>['expandedRowOffset'];
 }
 
 // ==================================================================================
@@ -102,6 +103,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     rowComponent: RowComponent,
     cellComponent,
     scopeCellComponent,
+    expandedRowOffset = 0,
   } = props;
   const rowInfo = useRowInfo(record, rowKey, index, indent);
   const {
@@ -184,6 +186,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}
@@ -195,7 +205,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

@@ -31,6 +31,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     expandedKeys,
     childrenColumnName,
     emptyNode,
+    expandedRowOffset,
   } = useContext(TableContext, [
     'prefixCls',
     'getComponent',
@@ -40,6 +41,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     'expandedKeys',
     'childrenColumnName',
     'emptyNode',
+    'expandedRowOffset',
   ]);
 
   const flattenData: { record: RecordType; indent: number; index: number }[] =
@@ -74,6 +76,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
           cellComponent={tdComponent}
           scopeCellComponent={thComponent}
           indent={indent}
+          expandedRowOffset={expandedRowOffset}
         />
       );
     });

src/Table.tsx

@@ -822,6 +822,7 @@ function Table<RecordType extends DefaultRecordType>(
       expandableType,
       expandRowByClick: expandableConfig.expandRowByClick,
       expandedRowRender: expandableConfig.expandedRowRender,
+      expandedRowOffset: expandableConfig.expandedRowOffset,
       onTriggerExpand,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
       indentSize: expandableConfig.indentSize,
@@ -872,6 +873,7 @@ function Table<RecordType extends DefaultRecordType>(
       expandableType,
       expandableConfig.expandRowByClick,
       expandableConfig.expandedRowRender,
+      expandableConfig.expandedRowOffset,
       onTriggerExpand,
       expandableConfig.expandIconColumnIndex,
       expandableConfig.indentSize,

src/context/TableContext.tsx

@@ -3,6 +3,7 @@ import type {
   ColumnsType,
   ColumnType,
   Direction,
+  ExpandableConfig,
   ExpandableType,
   ExpandedRowRender,
   GetComponent,
@@ -68,6 +69,8 @@ export interface TableContextProps<RecordType = any> {
   childrenColumnName: string;
 
   rowHoverable?: boolean;
+
+  expandedRowOffset: ExpandableConfig<RecordType>['expandedRowOffset'];
 }
 
 const TableContext = createContext<TableContextProps>();

src/interface.ts

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