feat: horizontal virtual

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';
@@ -11,7 +11,7 @@ interface RecordType {
   indexKey: string;
 }
 
-const columns: ColumnsType = [
+const defaultColumns: ColumnsType = [
   // { title: 'title1', dataIndex: 'a', key: 'a', width: 100,},
   // { title: 'title1', dataIndex: 'a', key: 'a', width: 100, },
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
@@ -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,21 @@ 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: ColumnsType) {
+    return cols?.map(({ onCell, ...col }: any) => {
+      return { ...col, children: cleanOnCell(col.children) };
+    });
+  }
+
+  const columns = enableColRowSpan ? defaultColumns : cleanOnCell(defaultColumns);
 
   return (
     <div style={{ width: 800, padding: `0 64px` }}>
+      <button onClick={() => setEnableColRowSpan(!enableColRowSpan)}>
+        Toggle RowSpan and ColSpan
+      </button>
       <button
         onClick={() => {
           tblRef.current?.scrollTo({
@@ -214,6 +217,7 @@ const Demo = () => {
       </button>
 
       <VirtualTable
+        virtual={{ x: true }}
         columns={columns}
         // expandedRowRender={({ b, c }) => b || c}
         scroll={{ x: 1300, y: 200 }}

package.json

@@ -58,7 +58,7 @@
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.37.0",
-    "rc-virtual-list": "^3.11.1"
+    "rc-virtual-list": "^3.13.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",

src/VirtualTable/BodyGrid.tsx

@@ -109,7 +109,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
   };
 
   const extraRender: ListProps<any>['extraRender'] = info => {
-    const { start, end, getSize, offsetY } = info;
+    const { start, end, getSize, offsetX, offsetY } = info;
 
     // Do nothing if no data
     if (end < 0) {
@@ -189,6 +189,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
           style={{
             top: -offsetY + sizeInfo.top,
           }}
+          offsetX={offsetX}
           extra
           getHeight={getHeight}
         />

src/VirtualTable/BodyLine.tsx

@@ -7,31 +7,41 @@ 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;
+  offsetX: 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, offsetX, ...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 +97,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 +118,23 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
       })}
       style={{ ...rowStyle, ...rowProps?.style }}
     >
-      {flattenColumns.map((column, colIndex) => {
-        return (
+      {horizontalVirtual ? (
+        <VirtualRow
+          cellPropsCollections={cellPropsCollections}
+          offsetX={offsetX}
+          {...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,44 @@
+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>[];
+  offsetX: number;
+  index: number;
+  renderIndex: number;
+  inverse: boolean;
+  record: any;
+  rowInfo: ReturnType<typeof useRowInfo>;
+  component: CustomizeComponent;
+  getHeight: (rowSpan: number) => number;
+}
+
+export default function VirtualRow({
+  cellPropsCollections,
+  offsetX,
+  ...restProps
+}: VirtualRowProps) {
+  const { flattenColumns } = useContext(TableContext, ['flattenColumns']);
+
+  const [startIndex, virtualOffset, showColumnIndexes] = useHorizontalVirtual(
+    cellPropsCollections,
+    offsetX,
+  );
+
+  return showColumnIndexes.map(colIndex => (
+    <VirtualCell
+      key={colIndex}
+      column={flattenColumns[colIndex]}
+      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>;
 }

src/VirtualTable/index.tsx

@@ -21,6 +21,7 @@ export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordTyp
     x?: number;
     y: number;
   };
+  virtual?: { x?: boolean };
   listItemHeight?: number;
 }
 
@@ -33,6 +34,7 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
     className,
     listItemHeight,
     components,
+    virtual,
     onScroll,
   } = props;
 
@@ -63,10 +65,19 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
   // Memo this
   const onInternalScroll = useEvent(onScroll);
 
+  const horizontalVirtual = !!virtual?.x;
+
   // ========================= Context ==========================
   const context = React.useMemo(
-    () => ({ sticky, scrollY, listItemHeight, getComponent, onScroll: onInternalScroll }),
-    [sticky, scrollY, listItemHeight, getComponent, onInternalScroll],
+    () => ({
+      sticky,
+      scrollY,
+      listItemHeight,
+      horizontalVirtual,
+      getComponent,
+      onScroll: onInternalScroll,
+    }),
+    [sticky, scrollY, listItemHeight, horizontalVirtual, getComponent, onInternalScroll],
   );
 
   // ========================== Render ==========================
@@ -93,7 +104,7 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
 }
 
 export type ForwardGenericVirtualTable = (<RecordType>(
-  props: TableProps<RecordType> & React.RefAttributes<Reference>,
+  props: VirtualTableProps<RecordType> & React.RefAttributes<Reference>,
 ) => React.ReactElement) & { displayName?: string };
 
 const RefVirtualTable = React.forwardRef(VirtualTable) as ForwardGenericVirtualTable;