feat: horizontal virtual

Author: linxianxi

docs/examples/virtual.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import '../../assets/index.less';
 import { VirtualTable } from '../../src';
 import type { ColumnsType, Reference } from '../../src/interface';
@@ -162,15 +162,6 @@ const columns: ColumnsType = [
   },
 ];
 
-export function cleanOnCell(cols: any = []) {
-  cols.forEach(col => {
-    delete (col as any).onCell;
-
-    cleanOnCell((col as any).children);
-  });
-}
-cleanOnCell(columns);
-
 const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
   a: `a${index}`,
   b: `b${index}`,
@@ -190,9 +181,24 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
 
 const Demo = () => {
   const tblRef = React.useRef<Reference>();
+  const [enableColRowSpan, setEnableColRowSpan] = useState(false);
+
+  function cleanOnCell(cols: any = []) {
+    cols.forEach(col => {
+      delete (col as any).onCell;
+
+      cleanOnCell((col as any).children);
+    });
+  }
+  if (!enableColRowSpan) {
+    cleanOnCell(columns);
+  }
 
   return (
     <div style={{ width: 800, padding: `0 64px` }}>
+      <button onClick={() => setEnableColRowSpan(!enableColRowSpan)}>
+        Toggle RowSpan and ColSpan
+      </button>
       <button
         onClick={() => {
           tblRef.current?.scrollTo({

src/Table.tsx

@@ -427,7 +427,6 @@ function Table<RecordType extends DefaultRecordType>(
       target(scrollLeft);
     } else if (target.scrollLeft !== scrollLeft) {
       target.scrollLeft = scrollLeft;
-
       // Delay to force scroll position if not sync
       // ref: https://github.com/ant-design/ant-design/issues/37179
       if (target.scrollLeft !== scrollLeft) {
@@ -447,7 +446,6 @@ function Table<RecordType extends DefaultRecordType>(
       const compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
       if (!getScrollTarget() || getScrollTarget() === compareTarget) {
         setScrollTarget(compareTarget);
-
         forceScroll(mergedScrollLeft, scrollHeaderRef.current);
         forceScroll(mergedScrollLeft, scrollBodyRef.current);
         forceScroll(mergedScrollLeft, scrollSummaryRef.current);

src/VirtualTable/BodyGrid.tsx

@@ -31,6 +31,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     childrenColumnName,
     emptyNode,
     scrollX,
+    componentWidth,
   } = useContext(TableContext, [
     'flattenColumns',
     'onColumnResize',
@@ -40,11 +41,13 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     'childrenColumnName',
     'emptyNode',
     'scrollX',
+    'componentWidth',
   ]);
   const {
     sticky,
     scrollY,
     listItemHeight,
+    horizontalVirtual,
     getComponent,
     onScroll: onTablePropScroll,
   } = useContext(StaticContext);
@@ -69,6 +72,8 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     [columnsWidth],
   );
 
+  const [scrollLeft, setScrollLeft] = React.useState(0);
+
   React.useEffect(() => {
     columnsWidth.forEach(([key, width]) => {
       onColumnResize(key, width);
@@ -87,6 +92,12 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       get: () => listRef.current?.getScrollInfo().x || 0,
 
       set: (value: number) => {
+        if (horizontalVirtual) {
+          const max = (scrollX as number) - componentWidth;
+          let left = Math.max(value, 0);
+          left = Math.min(left, max);
+          setScrollLeft(left);
+        }
         listRef.current?.scrollTo({
           left: value,
         });
@@ -163,7 +174,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         spanLines.push(i);
       }
     }
-
     // Patch extra line on the page
     const nodes: React.ReactElement[] = spanLines.map(index => {
       const item = flattenData[index];
@@ -191,6 +201,8 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
           }}
           extra
           getHeight={getHeight}
+          scrollLeft={scrollLeft}
+          columnsWidth={columnsWidth}
         />
       );
     });
@@ -235,6 +247,9 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         component={wrapperComponent}
         scrollWidth={scrollX as number}
         onVirtualScroll={({ x }) => {
+          if (horizontalVirtual) {
+            setScrollLeft(x);
+          }
           onScroll({
             scrollLeft: x,
           });
@@ -244,7 +259,16 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       >
         {(item, index, itemProps) => {
           const rowKey = getRowKey(item.record, index);
-          return <BodyLine data={item} rowKey={rowKey} index={index} {...itemProps} />;
+          return (
+            <BodyLine
+              data={item}
+              rowKey={rowKey}
+              index={index}
+              scrollLeft={scrollLeft}
+              columnsWidth={columnsWidth}
+              {...itemProps}
+            />
+          );
         }}
       </VirtualList>
     );

src/VirtualTable/BodyLine.tsx

@@ -7,31 +7,53 @@ import type { FlattenData } from '../hooks/useFlattenRecords';
 import useRowInfo from '../hooks/useRowInfo';
 import VirtualCell from './VirtualCell';
 import { StaticContext } from './context';
+import { getCellProps } from '../Body/BodyRow';
+import VirtualRow from './VirtualRow';
 
 export interface BodyLineProps<RecordType = any> {
   data: FlattenData<RecordType>;
   index: number;
   className?: string;
   style?: React.CSSProperties;
   rowKey: React.Key;
+  scrollLeft: number;
+  columnsWidth: [key: React.Key, width: number, total: number][];
 
   /** Render cell only when it has `rowSpan > 1` */
   extra?: boolean;
   getHeight?: (rowSpan: number) => number;
 }
 
 const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) => {
-  const { data, index, className, rowKey, style, extra, getHeight, ...restProps } = props;
+  const {
+    data,
+    index,
+    className,
+    rowKey,
+    style,
+    extra,
+    getHeight,
+    scrollLeft,
+    columnsWidth,
+    ...restProps
+  } = props;
   const { record, indent, index: renderIndex } = data;
 
   const { scrollX, flattenColumns, prefixCls, fixColumn, componentWidth } = useContext(
     TableContext,
     ['prefixCls', 'flattenColumns', 'fixColumn', 'componentWidth', 'scrollX'],
   );
-  const { getComponent } = useContext(StaticContext, ['getComponent']);
+  const { getComponent, horizontalVirtual } = useContext(StaticContext, [
+    'getComponent',
+    'horizontalVirtual',
+  ]);
 
   const rowInfo = useRowInfo(record, rowKey, index, indent);
 
+  const cellPropsCollections = flattenColumns.map((column, colIndex) =>
+    getCellProps(rowInfo, column, colIndex, indent, index),
+  );
+
   const RowComponent = getComponent(['body', 'row'], 'div');
   const cellComponent = getComponent(['body', 'cell'], 'div');
 
@@ -87,6 +109,16 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
     rowStyle.pointerEvents = 'none';
   }
 
+  const shareCellProps = {
+    index,
+    renderIndex,
+    inverse: extra,
+    record,
+    rowInfo,
+    component: cellComponent,
+    getHeight,
+  };
+
   const rowNode = (
     <RowComponent
       {...rowProps}
@@ -98,23 +130,23 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
       })}
       style={{ ...rowStyle, ...rowProps?.style }}
     >
-      {flattenColumns.map((column, colIndex) => {
-        return (
+      {horizontalVirtual ? (
+        <VirtualRow
+          cellPropsCollections={cellPropsCollections}
+          scrollLeft={scrollLeft}
+          {...shareCellProps}
+        />
+      ) : (
+        flattenColumns.map((column, colIndex) => (
           <VirtualCell
             key={colIndex}
-            component={cellComponent}
-            rowInfo={rowInfo}
             column={column}
             colIndex={colIndex}
-            indent={indent}
-            index={index}
-            renderIndex={renderIndex}
-            record={record}
-            inverse={extra}
-            getHeight={getHeight}
+            cellProps={cellPropsCollections[colIndex]}
+            {...shareCellProps}
           />
-        );
-      })}
+        ))
+      )}
     </RowComponent>
   );
 

src/VirtualTable/VirtualCell.tsx

@@ -1,7 +1,7 @@
 import { useContext } from '@rc-component/context';
 import classNames from 'classnames';
 import * as React from 'react';
-import { getCellProps } from '../Body/BodyRow';
+import type { getCellProps } from '../Body/BodyRow';
 import Cell from '../Cell';
 import type useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent } from '../interface';
@@ -11,12 +11,12 @@ export interface VirtualCellProps<RecordType> {
   rowInfo: ReturnType<typeof useRowInfo<RecordType>>;
   column: ColumnType<RecordType>;
   colIndex: number;
-  indent: number;
   index: number;
   component?: CustomizeComponent;
   /** Used for `column.render` */
   renderIndex: number;
   record: RecordType;
+  cellProps: ReturnType<typeof getCellProps>;
 
   // Follow props is used for RowSpanVirtualCell only
   style?: React.CSSProperties;
@@ -41,28 +41,22 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
     rowInfo,
     column,
     colIndex,
-    indent,
     index,
     component,
     renderIndex,
     record,
     style,
     className,
     inverse,
+    cellProps,
     getHeight,
   } = props;
 
   const { render, dataIndex, className: columnClassName, width: colWidth } = column;
 
   const { columnsOffset } = useContext(GridContext, ['columnsOffset']);
 
-  const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
-    rowInfo,
-    column,
-    colIndex,
-    indent,
-    index,
-  );
+  const { key, fixedInfo, appendCellNode, additionalCellProps } = cellProps;
 
   const { style: cellStyle, colSpan = 1, rowSpan = 1 } = additionalCellProps;
 

src/VirtualTable/VirtualRow.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useContext } from '@rc-component/context';
+import TableContext from '../context/TableContext';
+import useHorizontalVirtual from './useHorizontalVirtual';
+import type { getCellProps } from '../Body/BodyRow';
+import VirtualCell from './VirtualCell';
+import type useRowInfo from '../hooks/useRowInfo';
+import type { CustomizeComponent } from '../interface';
+
+export interface VirtualRowProps {
+  cellPropsCollections: ReturnType<typeof getCellProps>[];
+  scrollLeft: number;
+  index: number;
+  renderIndex: number;
+  inverse: boolean;
+  record: any;
+  rowInfo: ReturnType<typeof useRowInfo>;
+  component: CustomizeComponent;
+  getHeight: (rowSpan: number) => number;
+}
+
+export default function VirtualRow({
+  cellPropsCollections,
+  scrollLeft,
+  ...restProps
+}: VirtualRowProps) {
+  const { flattenColumns } = useContext(TableContext, ['flattenColumns']);
+
+  const [startIndex, virtualOffset, showColumnIndexes] = useHorizontalVirtual(
+    cellPropsCollections,
+    scrollLeft,
+  );
+
+  return showColumnIndexes
+    .map(idx => flattenColumns[idx])
+    .map((column, idx) => {
+      const colIndex = showColumnIndexes[idx];
+      return (
+        <VirtualCell
+          key={colIndex}
+          column={column}
+          colIndex={colIndex}
+          style={startIndex === colIndex ? { marginLeft: virtualOffset } : {}}
+          cellProps={cellPropsCollections[colIndex]}
+          {...restProps}
+        />
+      );
+    });
+}

src/VirtualTable/context.ts

@@ -5,6 +5,7 @@ export interface StaticContextProps {
   scrollY: number;
   listItemHeight: number;
   sticky: boolean | TableSticky;
+  horizontalVirtual: boolean;
   getComponent: GetComponent;
   onScroll?: React.UIEventHandler<HTMLDivElement>;
 }