feat: Table add prop "colHoverable"

Author: guaijie

src/Body/BodyRow.tsx

@@ -165,7 +165,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
             prefixCls={prefixCls}
             key={key}
             record={record}
-            index={index}
+            colIndex={colIndex}
+            rowIndex={index}
             renderIndex={renderIndex}
             dataIndex={dataIndex}
             render={render}

src/Cell/index.tsx

@@ -20,8 +20,9 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   prefixCls?: string;
   className?: string;
   record?: RecordType;
+  colIndex?: number;
   /** `column` index is the real show rowIndex */
-  index?: number;
+  rowIndex?: number;
   /** the index of the record. For the render(value, record, renderIndex) */
   renderIndex?: number;
   dataIndex?: DataIndex<RecordType>;
@@ -95,8 +96,10 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     renderIndex,
     shouldCellUpdate,
 
+    colIndex,
+
     // Row
-    index,
+    rowIndex,
     rowType,
 
     // Span
@@ -118,10 +121,9 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   } = props;
 
   const cellPrefixCls = `${prefixCls}-cell`;
-  const { supportSticky, allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
+  const { supportSticky, allColumnsFixedLeft } = useContext(TableContext, [
     'supportSticky',
     'allColumnsFixedLeft',
-    'rowHoverable',
   ]);
 
   // ====================== Value =======================
@@ -153,19 +155,26 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   const mergedRowSpan = legacyCellProps?.rowSpan ?? additionalProps.rowSpan ?? rowSpan ?? 1;
 
   // ====================== Hover =======================
-  const [hovering, onHover] = useHoverState(index, mergedRowSpan);
+  const [rowHovering, colHovering, onRowHover, onColHover] = useHoverState(
+    rowIndex,
+    mergedRowSpan,
+    colIndex,
+    mergedColSpan,
+  );
 
   const onMouseEnter: React.MouseEventHandler<HTMLTableCellElement> = useEvent(event => {
     if (record) {
-      onHover(index, index + mergedRowSpan - 1);
+      onRowHover(rowIndex, rowIndex + mergedRowSpan - 1);
+      onColHover(colIndex, colIndex + mergedColSpan - 1);
     }
 
     additionalProps?.onMouseEnter?.(event);
   });
 
   const onMouseLeave: React.MouseEventHandler<HTMLTableCellElement> = useEvent(event => {
     if (record) {
-      onHover(-1, -1);
+      onRowHover(-1, -1);
+      onColHover(-1, -1);
     }
 
     additionalProps?.onMouseLeave?.(event);
@@ -200,7 +209,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
       [`${cellPrefixCls}-ellipsis`]: ellipsis,
       [`${cellPrefixCls}-with-append`]: appendNode,
       [`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky,
-      [`${cellPrefixCls}-row-hover`]: !legacyCellProps && hovering,
+      [`${cellPrefixCls}-row-hover`]: !legacyCellProps && rowHovering,
+      [`${cellPrefixCls}-col-hover`]: !legacyCellProps && colHovering,
     },
     additionalProps.className,
     legacyCellProps?.className,
@@ -247,8 +257,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
       title={title}
       scope={scope}
       // Hover
-      onMouseEnter={rowHoverable ? onMouseEnter : undefined}
-      onMouseLeave={rowHoverable ? onMouseLeave : undefined}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       //Span
       colSpan={mergedColSpan !== 1 ? mergedColSpan : null}
       rowSpan={mergedRowSpan !== 1 ? mergedRowSpan : null}

src/Cell/useHoverState.ts

@@ -11,10 +11,15 @@ function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: numbe
 export default function useHoverState(
   rowIndex: number,
   rowSpan: number,
-): [hovering: boolean, onHover: OnHover] {
+  colIndex: number,
+  colSpan: number,
+): [hovering: boolean, colHovering: boolean, onRowHover: OnHover, onColHover: OnHover] {
   return useContext(TableContext, ctx => {
-    const hovering = inHoverRange(rowIndex, rowSpan || 1, ctx.hoverStartRow, ctx.hoverEndRow);
+    const rowHovering =
+      ctx.rowHoverable && inHoverRange(rowIndex, rowSpan || 1, ctx.hoverStartRow, ctx.hoverEndRow);
+    const colHovering =
+      ctx.colHoverable && inHoverRange(colIndex, colSpan || 1, ctx.hoverStartCol, ctx.hoverEndCol);
 
-    return [hovering, ctx.onHover];
+    return [rowHovering, colHovering, ctx.onRowHover, ctx.onColHover];
   });
 }

src/Footer/Cell.tsx

@@ -39,7 +39,7 @@ export default function SummaryCell({
   return (
     <Cell
       className={className}
-      index={index}
+      rowIndex={index}
       component="td"
       prefixCls={prefixCls}
       record={null}

src/Table.tsx

@@ -122,6 +122,7 @@ export interface TableProps<RecordType = any>
 
   sticky?: boolean | TableSticky;
 
+  colHoverable?: boolean;
   rowHoverable?: boolean;
 
   // Events
@@ -221,6 +222,7 @@ function Table<RecordType extends DefaultRecordType>(
     getContainerWidth,
 
     sticky,
+    colHoverable = false,
     rowHoverable = true,
   } = props;
 
@@ -274,7 +276,7 @@ function Table<RecordType extends DefaultRecordType>(
   const customizeScrollBody = getComponent(['body']) as CustomizeScrollBody<RecordType>;
 
   // ====================== Hover =======================
-  const [startRow, endRow, onHover] = useHover();
+  const [startRow, endRow, startCol, endCol, onRowHover, onColHover] = useHover();
 
   // ====================== Expand ======================
   const [
@@ -835,17 +837,22 @@ function Table<RecordType extends DefaultRecordType>(
       flattenColumns,
       onColumnResize,
 
+      hoverStartCol: startCol,
+      hoverEndCol: endCol,
+      onColHover,
+
       // Row
       hoverStartRow: startRow,
       hoverEndRow: endRow,
-      onHover,
+      onRowHover,
       rowExpandable: expandableConfig.rowExpandable,
       onRow,
 
       getRowKey,
       expandedKeys: mergedExpandedKeys,
       childrenColumnName: mergedChildrenColumnName,
 
+      colHoverable,
       rowHoverable,
     }),
     [
@@ -884,17 +891,22 @@ function Table<RecordType extends DefaultRecordType>(
       flattenColumns,
       onColumnResize,
 
+      startCol,
+      endCol,
+      onColHover,
+
       // Row
       startRow,
       endRow,
-      onHover,
+      onRowHover,
       expandableConfig.rowExpandable,
       onRow,
 
       getRowKey,
       mergedExpandedKeys,
       mergedChildrenColumnName,
 
+      colHoverable,
       rowHoverable,
     ],
   );

src/VirtualTable/VirtualCell.tsx

@@ -120,7 +120,8 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
       prefixCls={rowInfo.prefixCls}
       key={key}
       record={record}
-      index={index}
+      rowIndex={index}
+      colIndex={colIndex}
       renderIndex={renderIndex}
       dataIndex={dataIndex}
       render={mergedRender}

src/context/TableContext.tsx

@@ -57,16 +57,21 @@ export interface TableContextProps<RecordType = any> {
   flattenColumns: readonly ColumnType<RecordType>[];
   onColumnResize: (columnKey: React.Key, width: number) => void;
 
+  hoverStartCol: number;
+  hoverEndCol: number;
+  onColHover: (start: number, end: number) => void;
+
   // Row
   hoverStartRow: number;
   hoverEndRow: number;
-  onHover: (start: number, end: number) => void;
+  onRowHover: (start: number, end: number) => void;
   rowExpandable: (record: RecordType) => boolean;
 
   expandedKeys: Set<React.Key>;
   getRowKey: GetRowKey<RecordType>;
   childrenColumnName: string;
 
+  colHoverable?: boolean;
   rowHoverable?: boolean;
 }
 

src/hooks/useHover.ts

@@ -2,14 +2,28 @@ import * as React from 'react';
 
 export type OnHover = (start: number, end: number) => void;
 
-export default function useHover(): [startRow: number, endRow: number, onHover: OnHover] {
+export default function useHover(): [
+  startRow: number,
+  endRow: number,
+  startCol: number,
+  endCol: number,
+  onRowHover: OnHover,
+  onColHover: OnHover,
+] {
   const [startRow, setStartRow] = React.useState(-1);
   const [endRow, setEndRow] = React.useState(-1);
+  const [startCol, setStartCol] = React.useState(-1);
+  const [endCol, setEndCol] = React.useState(-1);
 
-  const onHover = React.useCallback<OnHover>((start, end) => {
+  const onRowHover = React.useCallback<OnHover>((start, end) => {
     setStartRow(start);
     setEndRow(end);
   }, []);
 
-  return [startRow, endRow, onHover];
+  const onColHover = React.useCallback<OnHover>((start, end) => {
+    setStartCol(start);
+    setEndCol(end);
+  }, []);
+
+  return [startRow, endRow, startCol, endCol, onRowHover, onColHover];
 }

tests/Hover.spec.tsx

@@ -13,16 +13,18 @@ describe('Table.Hover', () => {
   const createTable = (props?: TableProps) => {
     const columns = [{ title: 'Name', dataIndex: 'name', key: 'name' }];
 
-    return <Table columns={columns} data={data} {...props} />;
+    return <Table columns={columns} data={data} colHoverable {...props} />;
   };
 
   it('basic', () => {
     const wrapper = mount(createTable());
     wrapper.find('tbody td').first().simulate('mouseEnter');
     expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeTruthy();
 
     wrapper.find('tbody td').first().simulate('mouseLeave');
     expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();
   });
 
   it('works on shouldCellUpdate', () => {
@@ -34,9 +36,11 @@ describe('Table.Hover', () => {
 
     wrapper.find('tbody td').first().simulate('mouseEnter');
     expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeTruthy();
 
     wrapper.find('tbody td').first().simulate('mouseLeave');
     expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();
   });
 
   it('warning if use `render` for rowSpan', () => {
@@ -151,7 +155,7 @@ describe('Table.Hover', () => {
       renderTimes = 0;
       wrapper.find('tbody td').at(0).simulate('mouseEnter');
       expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1);
-      expect(renderTimes).toBe(1);
+      expect(renderTimes).toBe(2);
 
       // Hover 0-1
       renderTimes = 0;
@@ -163,7 +167,7 @@ describe('Table.Hover', () => {
       renderTimes = 0;
       wrapper.find('tbody td').at(1).simulate('mouseLeave');
       expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
-      expect(renderTimes).toBe(1);
+      expect(renderTimes).toBe(2);
     });
 
     it('perf mode to save render times', () => {
@@ -204,7 +208,7 @@ describe('Table.Hover', () => {
     });
   });
 
-  it('perf', () => {
+  it('perf row', () => {
     const renderTimes: Record<string, any> = {};
 
     const TD = (props: any) => {
@@ -217,6 +221,7 @@ describe('Table.Hover', () => {
 
     const wrapper = mount(
       createTable({
+        colHoverable: false,
         components: {
           body: {
             cell: TD,
@@ -229,11 +234,52 @@ describe('Table.Hover', () => {
 
     wrapper.find('tbody td').first().simulate('mouseEnter');
     expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();
 
     wrapper.find('tbody td').first().simulate('mouseLeave');
     expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();
 
     expect(firstMountTimes).toEqual(renderTimes.Jack);
     expect(renderTimes.Lucy).toBeGreaterThan(renderTimes.Jack);
   });
+
+  it('perf col', () => {
+    const renderTimes: Record<string, any> = {};
+
+    const TD = (props: any) => {
+      const children = toArray(props.children);
+      const first = children[0] as unknown as string;
+
+      renderTimes[first] = (renderTimes[first] || 0) + 1;
+      return <td {...props} />;
+    };
+
+    const columns = [
+      { title: 'index', dataIndex: 'key', key: 'key' },
+      { title: 'Name', dataIndex: 'name', key: 'name' },
+    ];
+
+    const wrapper = mount(
+      createTable({
+        columns,
+        rowHoverable: false,
+        components: {
+          body: {
+            cell: TD,
+          },
+        },
+      }),
+    );
+
+    wrapper.find('tbody td').at(1).simulate('mouseEnter');
+    expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeTruthy();
+
+    wrapper.find('tbody td').at(1).simulate('mouseLeave');
+    expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
+    expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();
+
+    expect(renderTimes.Lucy).toEqual(renderTimes.Jack);
+  });
 });