How to make a table cell clickable(and add a separate function) of the row which is already clickable for different functionality?

Question

I'm rendering a table on the screen. Please see screenshot. I want to make the star in the '#' column clickable but I also want the entire row to be clickable. Is there a workaround for this? On clicking a row my page routes to a different page. I am getting this functionality by making the entire row clickable but I also want to register only a single click event on the 'star' icon.

What I have done is added "onclick" event listeners to the row as well as the star. (Actually, I want my star to turn yellow when clicked). Both execute at the same time and I'm instantly routed to a new page without me noticing if the star turned yellow.

Can we do something like that we add an event listener to the entire row except the first column?

Note: I'm mapping rows to render them in the table. Please see below.

const renderRows = items.map((data, index) => {
    return (
      <tr
        className="table__row"
        key={data.id}
        onClick={() => onRowClick(data.id)}
      >
        <td style={{ marginRight: '2px' }}>
          <i
            onClick={(e) => toggleStarSelect(e, data.id)}
            className="fa fa-star"
            style={{ padding: '2px' }}
          ></i>
          {data['#']}
        </td>
        <td>
          <ImageLoadHandler
            isloaded={isloaded}
            handleImage={handleImage}
            data={data}
          />

          <span style={{ padding: '10px' }}>{data.Name}</span>
          <span
            style={{
              backgroundColor: 'lightgray',
              opacity: '0.5',
              fontSize: '13px',
            }}
          >
            {data.Symbol}
          </span>
        </td>
        <td>{data.Price}</td>
        <td>{data['1h']}</td>
        <td className={data['24h'] > 0 ? 'green' : 'red'}>
          {data['24h'] > 0 ? (
            <i className="fa fa-caret-up"></i>
          ) : (
            <i className="fa fa-caret-down"></i>
          )}
          {data['24h']}%
        </td>
        <td>{data['7d']}</td>
        <td>{data['Mkt Cap']}</td>
        <td>{data['24h Vol']}</td>
        <td style={{ padding: '0', paddingRight: '8px' }}>
          <Graph data={data} idx={index} />
        </td>
      </tr>
    );
  });

Answer 1

Yes, you can stop propagation of the event inside the table :

...
<tr
    className="table__row"
    key={data.id}
    onClick={() => onRowClick(data.id)}
>
    <td style={{marginRight: '2px'}}>
        <i
            onClick={e => {
                e.stopPropagation();
                toggleStarSelect(e, data.id);
            }
            className="fa fa-star"
            style={{padding: '2px'}}
        ></i>
        {data['#']}
    </td>
...

alternatively, you can use a different event (onMouseDown, etc)