Search code examples
reactjsdatatableprimereact

how to add hyperlink in React Prime DataTable?

I have a datatable and im using react prime library for that, my requirement is to add a link in one specific column.

 <DataTable
        paginator
        rows={tableRowPage}
        value={products}
        tableStyle={{ minWidth: "30rem" }}
      ><Column
                key={field}
                field={field}
                header={header}
                style={{ width: "25%" }}
              />
   </DataTable>

I need hyperlink in specific cell

Solution

  • You should be able to use the body attribute of the Column component. Something like:

    <Column
   header='My Header'
   field='linkText'
   body={rowData => {
     return(
      <a href={`https://www.example.com/${rowData.url}`} >
         {rowData.linkText}
      </a>
   }}
   />

    I'm using this to place buttons and whatnot. I don't see a reason it shouldn't work for a link.