How to add 'a' link tag with hyperlink in Reactjs app

Question

I have some issue with add hyperlink to custom cell's text. I already add a tag into custom cell but as you see in code sandbox, It seems not working but still 'a' tag is exist inside the div tag. How can I solve this problem?

Full Code and demo's are can acccess with codeSandbox

Code SandBox Link

I use React-data-table-component and I followed the right way to add hyperlink but It seems it's not working. And I don't know why it's not working. It said it uses JSX.

const columns = [
  {
    name: 'Coin Name',
    selector: 'key',
    sortable: true,
    cell: row => (
      <a
        href={'https://www.bithumb.com/trade/order/' + row.key}
        target="_blank"
        rel="noopener noreferrer">
        {row.key}
      </a>
    ),
  },
}

Answer 1

React Data Table Component by default has a column property called ignoreRowClick which is set to default to false . This helps in onRowClicked getting triggered unnecessarly. If you set ignoreRowClick to true, your a tag click will work.

{
    name: 'Coin Name',
    selector: 'key',
    sortable: true,
    ignoreRowClick: true,
    cell: row => (
      <a
        href={'https://www.bithumb.com/trade/order/' + row.key}
        target="_blank"
        rel="noopener noreferrer">
        {row.key}
      </a>
    ),
  },

Answer 2

The datatable is wrapping your <a/> tag with div and some other wrappers. When u click on the <a/> internally the click is not generated on that element but on its parent element (Parent element defines click on the entire row). If you try this

<a href={"https://www.bithumb.com/trade/order/" + row.key}
   target="_blank"
   rel="noopener noreferrer"
   style={{ position: "absolute" }}>
   {row.key}
</a>

It will work but this is not an optimised solution. If you look into datatables docs you will find a property named ignoreRowClick . This will prevent the click event of entire row and activate click on specific column cell.

So the code will be

{
    name: "Coin Name",
    selector: "key",
    sortable: true,
    ignoreRowClick: true,  // This is the change
    cell: row => (
      <a
        href={"https://www.bithumb.com/trade/order/" + row.key}
        target="_blank"
        rel="noopener noreferrer"
        style={{ position: "absolute" }}
      >
        {row.key}
      </a>
    )
  },

Please read Datatables docs for more

Answer 3

Reacts DataTable component rows have their own click events and therefore cells are being covered by internal clip masks: