diff --git a/assets/virtual.less b/assets/virtual.less index c09611cc6..fa98ca3ea 100644 --- a/assets/virtual.less +++ b/assets/virtual.less @@ -11,7 +11,6 @@ display: flex; box-sizing: border-box; width: 100%; - border-bottom: @border; border-left: @border; } @@ -20,9 +19,17 @@ width: var(--virtual-width); padding: 8px 16px; border-right: @border; + border-bottom: @border; &-fix-left { left: calc(var(--sticky-left) + 1px) !important; } + + &-virtual-fixed { + position: absolute; + z-index: 1; + border-bottom: @border; + left: calc(var(--sticky-left) + 1px) !important; + } } } diff --git a/package.json b/package.json index fa48e1d87..c006a35c6 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "classnames": "^2.2.5", "rc-resize-observer": "^1.1.0", "rc-util": "^5.27.1", - "rc-virtual-list": "^3.10.0" + "rc-virtual-list": "^3.10.1" }, "devDependencies": { "@rc-component/father-plugin": "^1.0.2", diff --git a/src/StaticTable/BodyGrid.tsx b/src/StaticTable/BodyGrid.tsx index 0f10f8ba8..4f0638b14 100644 --- a/src/StaticTable/BodyGrid.tsx +++ b/src/StaticTable/BodyGrid.tsx @@ -42,10 +42,13 @@ const Grid = React.forwardRef((props, ref) => { const flattenData = useFlattenRecords(data, childrenColumnName, expandedKeys, getRowKey); // ========================== Column ========================== - const columnsWidth = React.useMemo<[key: React.Key, width: number][]>( - () => flattenColumns.map(({ width, key }) => [key, width as number]), - [flattenColumns], - ); + const columnsWidth = React.useMemo<[key: React.Key, width: number, total: number][]>(() => { + let total = 0; + return flattenColumns.map(({ width, key }) => { + total += width as number; + return [key, width as number, total]; + }); + }, [flattenColumns]); React.useEffect(() => { columnsWidth.forEach(([key, width]) => { @@ -84,7 +87,7 @@ const Grid = React.forwardRef((props, ref) => { }; const extraRender: ListProps['extraRender'] = info => { - const { start, end, getSize } = info; + const { start, end, getSize, offsetY } = info; // Find first rowSpan column const firstRowSpanColumns = flattenColumns.filter(column => getRowSpan(column, start) === 0); @@ -126,10 +129,21 @@ const Grid = React.forwardRef((props, ref) => { const rowSpan = getRowSpan(column, i); if (rowSpan > 1) { - const endItem = flattenData[i + rowSpan - 1]; - console.log('!!!', i, rowSpan, endItem); + const endItemIndex = i + rowSpan - 1; + const endItem = flattenData[endItemIndex]; + const endKey = getRowKey(endItem.record, endItemIndex); + + const sizeInfo = getSize(rowKey, endKey); + const right = columnsWidth[colIndex][2]; + const left = columnsWidth[colIndex - 1][2] || 0; + console.log('!!!', i, rowSpan, endItem, sizeInfo, right); + nodes.push( ((props, ref) => { colIndex={colIndex} index={i} indent={0} + style={{ + ['--sticky-left' as any]: `${left}px`, + }} />, ); } diff --git a/src/StaticTable/BodyLine.tsx b/src/StaticTable/BodyLine.tsx index 82772c130..ad1348174 100644 --- a/src/StaticTable/BodyLine.tsx +++ b/src/StaticTable/BodyLine.tsx @@ -47,53 +47,6 @@ const BodyLine = React.forwardRef((props, ref) => record={record} /> ); - // const { render, dataIndex, className: columnClassName, width: colWidth } = column; - - // const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps( - // rowInfo, - // column, - // colIndex, - // indent, - // index, - // ); - - // const { style: cellStyle, colSpan, rowSpan } = additionalCellProps; - // const mergedStyle = { - // ...cellStyle, - // '--virtual-width': `${colWidth}px`, - // }; - - // // When `colSpan` or `rowSpan` is `0`, should skip render. - // const mergedRender = - // colSpan === 0 || rowSpan === 0 || colSpan > 1 || rowSpan > 1 ? () => null : render; - - // return ( - // - // ); })} ); diff --git a/src/StaticTable/VirtualCell.tsx b/src/StaticTable/VirtualCell.tsx index 31d346254..61068d07d 100644 --- a/src/StaticTable/VirtualCell.tsx +++ b/src/StaticTable/VirtualCell.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { getCellProps, useRowInfo } from '../Body/BodyRow'; import Cell from '../Cell'; import type { ColumnType } from '../interface'; +import classNames from 'classnames'; export interface VirtualCellProps { rowInfo: ReturnType; @@ -14,12 +15,13 @@ export interface VirtualCellProps { // Follow props is used for RowSpanVirtualCell only forceRender?: boolean; style?: React.CSSProperties; + className?: string; } function VirtualCell( props: VirtualCellProps, ) { - const { rowInfo, column, colIndex, indent, index, record, forceRender, style } = props; + const { rowInfo, column, colIndex, indent, index, record, forceRender, style, className } = props; const { render, dataIndex, className: columnClassName, width: colWidth } = column; @@ -46,7 +48,7 @@ function VirtualCell( return ( ( ); } +// ================= Virtual Row Span Cell ================= export interface RowSpanVirtualCellProps extends Omit, 'rowInfo'> { record: RecordType; rowKey: React.Key; + top: number; + height: number; + left: number; + width: number; } export function RowSpanVirtualCell( props: RowSpanVirtualCellProps, ) { - const { record, rowKey } = props; + const { record, rowKey, top, height, left, width, style } = props; const rowInfo = useRowInfo(record, rowKey); + const { prefixCls } = rowInfo; - return ; + return ( + + ); } export default VirtualCell;