feat: add rowHoverable to disable hover interaction (#1068)

* feat: Table add disabledHover

* test: add disabledHover case

* docs: add disabledHover

* feat: add demo

* feat: rename disabledHover to rowHoverable

* fix: demo

Author: madocto

README.md

@@ -117,6 +117,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | components | Object |  | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details |
 | sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar |
 | summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. |
+| rowHoverable | boolean | true | Table hover interaction |
 
 ## Column Props
 

docs/demo/row-hoverable.md

@@ -0,0 +1,8 @@
+---
+title: row-hoverable
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/row-hoverable.tsx"></code>

docs/examples/row-hoverable.tsx

@@ -0,0 +1,23 @@
+import type { TableProps } from 'rc-table';
+import Table from 'rc-table';
+import React from 'react';
+import '../../assets/index.less';
+
+interface RecordType {
+  a?: string;
+}
+
+const data = [{ a: 'A' }, { a: 'B' }, { a: 'C' }];
+
+const Demo = () => {
+  const columns: TableProps<any>['columns'] = [
+    {
+      title: 'title',
+      dataIndex: 'a',
+    },
+  ];
+
+  return <Table<RecordType> columns={columns} data={data} rowHoverable={false} />;
+};
+
+export default Demo;

src/Cell/index.tsx

@@ -118,9 +118,10 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   } = props;
 
   const cellPrefixCls = `${prefixCls}-cell`;
-  const { supportSticky, allColumnsFixedLeft } = useContext(TableContext, [
+  const { supportSticky, allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
     'supportSticky',
     'allColumnsFixedLeft',
+    'rowHoverable',
   ]);
 
   // ====================== Value =======================
@@ -244,8 +245,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
       title={title}
       scope={scope}
       // Hover
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
+      onMouseEnter={rowHoverable ? onMouseEnter : undefined}
+      onMouseLeave={rowHoverable ? onMouseLeave : undefined}
       //Span
       colSpan={mergedColSpan !== 1 ? mergedColSpan : null}
       rowSpan={mergedRowSpan !== 1 ? mergedRowSpan : null}

src/Table.tsx

@@ -121,6 +121,8 @@ export interface TableProps<RecordType = unknown>
 
   sticky?: boolean | TableSticky;
 
+  rowHoverable?: boolean;
+
   // Events
   onScroll?: React.UIEventHandler<HTMLDivElement>;
 
@@ -218,6 +220,7 @@ function Table<RecordType extends DefaultRecordType>(
     getContainerWidth,
 
     sticky,
+    rowHoverable = true,
   } = props;
 
   const mergedData = data || EMPTY_DATA;
@@ -832,6 +835,8 @@ function Table<RecordType extends DefaultRecordType>(
       getRowKey,
       expandedKeys: mergedExpandedKeys,
       childrenColumnName: mergedChildrenColumnName,
+
+      rowHoverable,
     }),
     [
       // Scroll
@@ -879,6 +884,8 @@ function Table<RecordType extends DefaultRecordType>(
       getRowKey,
       mergedExpandedKeys,
       mergedChildrenColumnName,
+
+      rowHoverable,
     ],
   );
 

src/context/TableContext.tsx

@@ -66,6 +66,8 @@ export interface TableContextProps<RecordType = any> {
   expandedKeys: Set<React.Key>;
   getRowKey: GetRowKey<RecordType>;
   childrenColumnName: string;
+
+  rowHoverable?: boolean;
 }
 
 const TableContext = createContext<TableContextProps>();

tests/Table.spec.jsx

@@ -1142,6 +1142,44 @@ describe('Table.Basic', () => {
       expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1);
     });
   });
+
+  it('when rowHoverable is false', () => {
+    const tColumns = [
+      {
+        title: 'Key',
+        dataIndex: 'key',
+      },
+    ];
+
+    const tData = [
+      { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] },
+      { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] },
+    ];
+    const wrapper = mount(
+      <Table
+        columns={tColumns}
+        expandable={{ defaultExpandAllRows: true }}
+        data={tData}
+        rowHoverable={false}
+      />,
+    );
+
+    const trs = wrapper.find('tr.rc-table-row');
+
+    trs.forEach((tr, index) => {
+      tr.find('td.rc-table-cell').at(0).simulate('mouseEnter');
+      const currentClassName = wrapper
+        .find('tr.rc-table-row')
+        .at(index)
+        .find('td.rc-table-cell')
+        .at(0)
+        .getElement().props.className;
+
+      expect(currentClassName.includes('rc-table-cell-row-hover')).toEqual(false);
+      expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(0);
+    });
+  });
+
   it('should get scrollbar size', () => {
     const tColumns = [{ title: 'Name', dataIndex: 'name', key: 'name', width: 100 }];
     const wrapper = mount(