CODEWITHSUNDEEP
node.jsreactjsmaterial-uimaterial-table
muthukumar murugesan
muthukumar murugesan

Reputation: 121

How to display html link inside table cell using reactjs material-table

I am using material-table of Reactjs npm package, I want display a link with url inside table cells. but it is displaying it as string. Any idea how to display link

data: [
      {
        subject: 'Announcment',
        type: 1,
        approver: 'john',
        state: 1,
        view: "<Link to="/users">cell</Link>",
      },
    ]

Upvotes: 3

Views: 5216

Answers (3)

Supun Sandaruwan
Supun Sandaruwan

Reputation: 2418

 const columnContent = [
    { title: 'No', render: (rowData: any) => rowData.tableData.id + 1 },
    { title: 'Name', field: 'name' },
    { title: 'Website',
      field: 'companyURL',
      render: (rowData: any) => (
        <a
          href={rowData.companyURL}
          target="_blank"
          style={{ textDecoration: 'none' }}
        >
          {rowData.companyURL}
        </a>
      ) },
  ];
          <MaterialTable
        {...other_props_here}
            columns={columnContent}
            }}
          />

sample column data like below

{
 name: "alex",
 companyURL : "https://durga.io/"
}

Upvotes: 0

Kinzlee
Kinzlee

Reputation: 24

I think you should try out something like this

import { Link } from 'react-router';

const columns = [
  {
    header: '',
    id: 'links',
    render: ({ row }) => (<Link to={{ pathname: `/example/${row.id}` }}>{row.name}</Link>)
  }
];

I didn't double-check the code so there might be some syntax errors

Upvotes: 0

muthukumar murugesan
muthukumar murugesan

Reputation: 121

Yes Here is the solution.

columns: [
      { 
        title: 'Analytics', 
        field: 'analytics', 
        render: rowData => <Link to="/{rowData.url}">view</Link>,,
      },
    ],

and 


data: [
      {
        subject: 'Announcment',
        type: 1,
        approver: 'john',
        state: 1,
        url: "/users",
      },

Upvotes: 2

Related Questions