Support logical row highlighting when mouse is hovering on logical row

[hillmanytli]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

When there are a few cells that are merged by rowspan, mouse hovering on the merged cells will only highlight the first row. What is desired is highlighting all the rows that correspond to the merged cells. This tells the user that actually those rows belong to the same group of data. An example of highlighting can be found here https://codepen.io/paulofsis/pen/xfHtC

Nested table is not desired becasuse (1) it is more complicated in look and feel; (2) I have only one field for grouping. If I use nested table, there will be only one field in the parent, and many fields on the children. This makes the table to carry a lot of parent rows that look like empty. The proposed feature is easier to understand as a simple table.

What does the proposed API look like?

The code below is copied from the example in "colspan and rowspan" in

. The proposed API is to add an attribute "groupByDataIndex" which is the value of which dataIndex should be used to group logical rows together. This assumes that only records that appear together with the same dataIndex will be merged.

import { Table } from 'antd';

// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    props: {},
  };
  if (index === 4) {
    obj.props.colSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => {
      if (index < 4) {
        return <a href="javascript:;">{text}</a>;
      }
      return {
        children: <a href="javascript:;">{text}</a>,
        props: {
          colSpan: 5,
        },
      };
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: renderContent,
  },
  {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    render: (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 2) {
        obj.props.rowSpan = 2;
      }
      // These two are merged into above cell
      if (index === 3) {
        obj.props.rowSpan = 0;
      }
      if (index === 4) {
        obj.props.colSpan = 0;
      }
      return obj;
    },
  },
  {
    title: 'Phone',
    colSpan: 0,
    dataIndex: 'phone',
    render: renderContent,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    render: renderContent,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];

ReactDOM.render(<Table columns={columns} dataSource={data} bordered groupByDataIndex='tel' />, mountNode);

[BendrissM]

is there a fix for this yet ?

[afc163]

Check https://table-react-component.vercel.app/demo/jsx