From 13a631a96508f15706515c7470e85f6cf2411440 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com>
Date: Sat, 24 May 2025 22:08:19 +0800
Subject: [PATCH 1/2] feat: init
---
docs/demo/expandedSticky.md | 8 ++++
docs/examples/expandedSticky.tsx | 82 ++++++++++++++++++++++++++++++++
package.json | 3 +-
src/Body/BodyRow.tsx | 15 +++++-
src/Body/ExpandedRow.tsx | 4 +-
src/Body/index.tsx | 3 ++
src/Table.tsx | 2 +
src/context/TableContext.tsx | 3 ++
src/interface.ts | 1 +
9 files changed, 117 insertions(+), 4 deletions(-)
create mode 100644 docs/demo/expandedSticky.md
create mode 100644 docs/examples/expandedSticky.tsx
diff --git a/docs/demo/expandedSticky.md b/docs/demo/expandedSticky.md
new file mode 100644
index 000000000..df58f5783
--- /dev/null
+++ b/docs/demo/expandedSticky.md
@@ -0,0 +1,8 @@
+---
+title: expandedSticky
+nav:
+ title: Demo
+ path: /demo
+---
+
+
diff --git a/docs/examples/expandedSticky.tsx b/docs/examples/expandedSticky.tsx
new file mode 100644
index 000000000..c55aa7534
--- /dev/null
+++ b/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([]);
+
+ 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>[] = [
+ {
+ title: '手机号',
+ dataIndex: 'a',
+ width: 100,
+ fixed: 'left',
+ onCell: (_, index) => {
+ const { rowSpan = 1 } = rowSpanList[index];
+ const props: React.TdHTMLAttributes = {};
+ 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 (
+
+
expanded & sticky
+
>
+ rowKey="key"
+ sticky
+ scroll={{ x: 800 }}
+ columns={columns}
+ data={data}
+ expandable={{
+ expandedRowOffset: 1,
+ expandedRowKeys,
+ onExpandedRowsChange: keys => setExpandedRowKeys(keys),
+ expandedRowRender: record => {record.key}
,
+ }}
+ className="table"
+ />
+
+ );
+};
+
+export default Demo;
diff --git a/package.json b/package.json
index a350e7364..0763bb358 100644
--- a/package.json
+++ b/package.json
@@ -111,5 +111,6 @@
"**/*.{js,jsx,tsx,ts,md,json}": [
"prettier --write"
]
- }
+ },
+ "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
}
diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
index 46ca866f8..72a171076 100644
--- a/src/Body/BodyRow.tsx
+++ b/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 {
scopeCellComponent: CustomizeComponent;
indent?: number;
rowKey: React.Key;
+ expandedRowOffset?: ExpandableConfig['expandedRowOffset'];
}
// ==================================================================================
@@ -102,6 +103,7 @@ function BodyRow(
rowComponent: RowComponent,
cellComponent,
scopeCellComponent,
+ expandedRowOffset = 0,
} = props;
const rowInfo = useRowInfo(record, rowKey, index, indent);
const {
@@ -184,6 +186,14 @@ function BodyRow(
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 = (
(
prefixCls={prefixCls}
component={RowComponent}
cellComponent={cellComponent}
- colSpan={flattenColumns.length}
+ offsetWidth={offsetWidth}
+ colSpan={flattenColumns.length - expandedRowOffset}
isEmpty={false}
>
{expandContent}
diff --git a/src/Body/ExpandedRow.tsx b/src/Body/ExpandedRow.tsx
index b4009601c..77e757c65 100644
--- a/src/Body/ExpandedRow.tsx
+++ b/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 = (
(props: BodyProps
) {
expandedKeys,
childrenColumnName,
emptyNode,
+ expandedRowOffset,
} = useContext(TableContext, [
'prefixCls',
'getComponent',
@@ -40,6 +41,7 @@ function Body(props: BodyProps) {
'expandedKeys',
'childrenColumnName',
'emptyNode',
+ 'expandedRowOffset',
]);
const flattenData: { record: RecordType; indent: number; index: number }[] =
@@ -74,6 +76,7 @@ function Body(props: BodyProps) {
cellComponent={tdComponent}
scopeCellComponent={thComponent}
indent={indent}
+ expandedRowOffset={expandedRowOffset}
/>
);
});
diff --git a/src/Table.tsx b/src/Table.tsx
index 187d0ea32..0e1cfab16 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -822,6 +822,7 @@ function Table(
expandableType,
expandRowByClick: expandableConfig.expandRowByClick,
expandedRowRender: expandableConfig.expandedRowRender,
+ expandedRowOffset: expandableConfig.expandedRowOffset,
onTriggerExpand,
expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
indentSize: expandableConfig.indentSize,
@@ -872,6 +873,7 @@ function Table(
expandableType,
expandableConfig.expandRowByClick,
expandableConfig.expandedRowRender,
+ expandableConfig.expandedRowOffset,
onTriggerExpand,
expandableConfig.expandIconColumnIndex,
expandableConfig.indentSize,
diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx
index f566c84f0..ff503e87c 100644
--- a/src/context/TableContext.tsx
+++ b/src/context/TableContext.tsx
@@ -3,6 +3,7 @@ import type {
ColumnsType,
ColumnType,
Direction,
+ ExpandableConfig,
ExpandableType,
ExpandedRowRender,
GetComponent,
@@ -68,6 +69,8 @@ export interface TableContextProps {
childrenColumnName: string;
rowHoverable?: boolean;
+
+ expandedRowOffset: ExpandableConfig['expandedRowOffset'];
}
const TableContext = createContext();
diff --git a/src/interface.ts b/src/interface.ts
index e645b2145..c6d9a1794 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -252,6 +252,7 @@ export interface ExpandableConfig {
rowExpandable?: (record: RecordType) => boolean;
columnWidth?: number | string;
fixed?: FixedType;
+ expandedRowOffset?: number;
}
// =================== Render ===================
From 14dff1f5fee9a90a6df53154529bfd60a405b4a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com>
Date: Sat, 24 May 2025 22:09:04 +0800
Subject: [PATCH 2/2] feat: init
---
package.json | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/package.json b/package.json
index 0763bb358..a350e7364 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,5 @@
"**/*.{js,jsx,tsx,ts,md,json}": [
"prettier --write"
]
- },
- "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+ }
}