Mui-datatables: make each row a link?

[GavMan1995]

Is it possible to make each row a link?

[gregnb]

@GavMan1995 You could just have a one column table and then use custom render like so:

class Example extends React.Component {

  render() {


    const columns = [
      {
        name: "Link",
        options: {
          filter: false,
          customRender: (value, tableMeta, updateValue) => {
            return (
              <a href={value}>{value}</a>
            );
          }
        }
      },      
    ];

    const data = [
      ["http://www.google.com"],
      ["http://www.cbs.com"],
      ["http://www.yahoo.com"],
    ];

    const options = {
      filter: true,
      filterType: 'dropdown',
      responsive: 'stacked',
      selectableRows: false
    };

    return (
      <MuiThemeProvider>
        <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
      </MuiThemeProvider>
    );

  }
}

which would yield you a table that looks like this:

[kalyan542]

change customRender to customBodyRender in above example

[yekijnuy]

@gregnb Hello, so I'm trying to do something similar except adding two link tags in a single column. The issue is the links should correspond to the inline data. For example, Row 1 with data ID=1 should have an associated link of someapi/edit/1 and so forth. RIght now I have a helper function handling other columns, but I can't figure out, even with a customBodyRender how to make this work.

My render and render helper function are below. Thoughts?

```
renderPolicies() {
return _.map(this.props.policies, policy => {
const policyLink = this.renderAdmin(policy);
return [
policy.resource.id,
policy.resource.action,
policy.resource.entity,
policyLink
];
});
}

renderAdmin = policy => {
return (

/app/fusion/policy/edit/${policy.resource.id}}>Edit
{' '}
/app/fusion/policy/delete/${policy.resource.id}}>
Delete


);
};

render() {
const columns = [
'ID',
'Action',
'Entity',
'Edit'
];

const data = this.renderPolicies();
const options = {
  filterType: 'checkbox'
};

return (
  <MUIDataTable
    title={'Policies'}
    data={data}
    columns={columns}
    options={options}
  />
);

}
```

[rclarkem-fubotv]

Is this a better option than doing onRowClick and making the row go to a certain link?