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" + } }