Table 组件新增 colHoverable 属性

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/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,53 @@ 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;
+ console.log('first:', first);
+
+ 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);
+ });
 });