How to disable onRow property for a specific column in ant design table

Question

I'm using ant design table. I use a onRow property when a user clicks on a row of the table to go to another page(such as texts, empty spaces,...) but for a specific column of that Row I want to use another onClick and when user click on this column go to a specific page.

for solving this problem I added a a tag but it just works when I click on the icon(Not the Whole of my column). my problem is I want the whole of my cell of this column to have a different onClick function (means icon and empty space!...).

thank you for your help!

here is my code :

column:

 {
      title: 'Platform',
      dataIndex: 'platform',
      key: 'platform',
      align: 'center',
      render: (_, record) => {
        return (
           <a
             href={placeUrl(routes.platformDetails, {})}
           >
            <Tooltip title={record.platform.name}>
              <Avatar src={record.platform.icon} size="large" />
            </Tooltip>
          </a>
        );
      },
 
      sorter: (a, b) => a.platform.type.localeCompare(b.platform.type),
    },

///other column

Table:

    <Table
      onRow={record => {
        return {
          onClick: () => {
            const { sId } = record;
            const sURL = placeURLQueryParams(
              PATHS.routes.sDetails,
              {
                sId,
                pId: props.isForAllP
                  ? record.p.pId
                  : pId,
              },
            );
            history.push(sURL);
          },
        };
      }}
      dataSource={data}
      columns={columns}
    />

Answer 1

I guess I would use onCell in that case (not sure if the column header would be clickable though)

{
  title: 'Platform',
  dataIndex: 'platform',
  key: 'platform',
  align: 'center',
  onCell: record => {
    return {
      onClick: event => {
        event.stopPropagation(); // this will avoid onRow being called
        // go to placeUrl(routes.platformDetails, {})
      }
    }
  },
  render: (_, record) => {
    return (
      <Tooltip title={record.platform.name}>
        <Avatar src={record.platform.icon} size="large" />
      </Tooltip>
    );
  },
  sorter: (a, b) => a.platform.type.localeCompare(b.platform.type),
},