Skip to content

Commit fc840f3

Browse files
路振凯cactuser-Lu
authored andcommitted
fix: table onCell-method cause offset in width calculation
1 parent a7b68af commit fc840f3

File tree

3 files changed

+42
-4
lines changed

3 files changed

+42
-4
lines changed

src/Body/BodyRow.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import type { ColumnType, CustomizeComponent } from '../interface';
88
import ExpandedRow from './ExpandedRow';
99
import { computedExpandedClassName } from '../utils/expandUtil';
1010
import type { TableProps } from '..';
11+
import useStickyOffsets from '../hooks/useStickyOffsets';
12+
import { getCellFixedInfo } from '../utils/fixUtil';
1113

1214
export interface BodyRowProps<RecordType> {
1315
record: RecordType;
@@ -43,12 +45,14 @@ export function getCellProps<RecordType>(
4345
index: number,
4446
rowKeys: React.Key[] = [],
4547
expandedRowOffset = 0,
48+
rowStickyOffsets?: ReturnType<typeof useStickyOffsets>,
4649
) {
4750
const {
4851
record,
4952
prefixCls,
5053
columnsKey,
5154
fixedInfoList,
55+
flattenColumns,
5256
expandIconColumnIndex,
5357
nestExpandable,
5458
indentSize,
@@ -61,9 +65,11 @@ export function getCellProps<RecordType>(
6165
} = rowInfo;
6266

6367
const key = columnsKey[colIndex];
64-
const fixedInfo = fixedInfoList[colIndex];
68+
let fixedInfo = fixedInfoList[colIndex];
6569

66-
// ============= Used for nest expandable =============
70+
if (column.fixed && rowStickyOffsets) {
71+
fixedInfo = getCellFixedInfo(colIndex, colIndex, flattenColumns, rowStickyOffsets);
72+
}
6773
let appendCellNode: React.ReactNode;
6874
if (colIndex === (expandIconColumnIndex || 0) && nestExpandable) {
6975
appendCellNode = (
@@ -143,6 +149,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
143149
const {
144150
prefixCls,
145151
flattenColumns,
152+
colWidths,
146153
expandedRowClassName,
147154
expandedRowRender,
148155
rowProps,
@@ -152,6 +159,19 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
152159
rowSupportExpand,
153160
} = rowInfo;
154161

162+
const hasColSpanZero = React.useMemo(() => {
163+
return flattenColumns.some(col => {
164+
const cellProps = col.onCell?.(record, index) || {};
165+
return (cellProps.colSpan ?? 1) === 0;
166+
});
167+
}, [flattenColumns, record, index]);
168+
169+
const rowStickyOffsets = useStickyOffsets(
170+
colWidths,
171+
flattenColumns,
172+
hasColSpanZero ? { record, rowIndex: index } : undefined,
173+
);
174+
155175
// Force render expand row if expanded before
156176
const expandedRef = React.useRef(false);
157177
expandedRef.current ||= expanded;
@@ -196,6 +216,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
196216
index,
197217
rowKeys,
198218
expandedRowInfo?.offset,
219+
rowStickyOffsets,
199220
);
200221

201222
return (

src/hooks/useRowInfo.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default function useRowInfo<RecordType>(
1515
| 'prefixCls'
1616
| 'fixedInfoList'
1717
| 'flattenColumns'
18+
| 'colWidths'
1819
| 'expandableType'
1920
| 'expandRowByClick'
2021
| 'onTriggerExpand'
@@ -41,6 +42,7 @@ export default function useRowInfo<RecordType>(
4142
'prefixCls',
4243
'fixedInfoList',
4344
'flattenColumns',
45+
'colWidths',
4446
'expandableType',
4547
'expandRowByClick',
4648
'onTriggerExpand',

src/hooks/useStickyOffsets.ts

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ import type { ColumnType, StickyOffsets } from '../interface';
33

44
/**
55
* Get sticky column offset width
6+
* @param colWidths - Column widths array
7+
* @param flattenColumns - Flattened columns
8+
* @param rowContext - Optional row context for dynamic colSpan calculation
69
*/
710
function useStickyOffsets<RecordType>(
811
colWidths: number[],
912
flattenColumns: readonly ColumnType<RecordType>[],
13+
rowContext?: { record: RecordType; rowIndex: number },
1014
) {
1115
const stickyOffsets: StickyOffsets = useMemo(() => {
1216
const columnCount = flattenColumns.length;
@@ -16,9 +20,19 @@ function useStickyOffsets<RecordType>(
1620
let total = 0;
1721

1822
for (let i = startIndex; i !== endIndex; i += offset) {
23+
const column = flattenColumns[i];
24+
1925
offsets.push(total);
2026

21-
if (flattenColumns[i].fixed) {
27+
let colSpan = 1;
28+
if (rowContext) {
29+
const cellProps = column.onCell?.(rowContext.record, rowContext.rowIndex) || {};
30+
colSpan = cellProps.colSpan ?? 1;
31+
} else {
32+
colSpan = column.colSpan ?? 1;
33+
}
34+
35+
if (column.fixed && colSpan !== 0) {
2236
total += colWidths[i] || 0;
2337
}
2438
}
@@ -33,8 +47,9 @@ function useStickyOffsets<RecordType>(
3347
start: startOffsets,
3448
end: endOffsets,
3549
widths: colWidths,
50+
isSticky: flattenColumns.some(column => column.fixed),
3651
};
37-
}, [colWidths, flattenColumns]);
52+
}, [colWidths, flattenColumns, ...(rowContext ? [rowContext.record, rowContext.rowIndex] : [])]);
3853

3954
return stickyOffsets;
4055
}

0 commit comments

Comments
 (0)