MaterialTable: Display html tag on field property

0
votes

I am using the MaterialTable library to render a table grid for my react application.

Source: Material Table Github

After doing an API request, the server returns an object with an HTML tag as this one:

  {
    "name": "Test",
    "link": "https://google.com",
    "httpLink": "<a href='https://google.com'>google</a>"
  }

On the client, I have the component rendering this data and I would like to display the rendered HTML tag or to wrap the link in an HTML tag and display only the word in between.

            columns={[
              { title: 'Name', field: 'name' },
              { title: 'LinkString', field: 'link'},
              { title: 'Link', field: 'httpLink'},         
            ]}

I tried wrapping the link field on a tag, but that doesn't work and I can't display anything on the page.

The httpLink will display a string instead of rendering the tag and displaying the word google.

The desired output:

Name | Link

Test | google

The output:

Name | Link

Test | <a href='https://google.com'>google</a>

I had a look at the docs but could not find anything on the matter.

Material Table Docs

Can anyone please help me?

2
reactjsmaterial-ui

2 Answers

1
votes

You can use custom render feature 

columns={[
              { title: 'Name', field: 'name' },
              { title: 'LinkString', field: 'link'},
              { title: 'Link', field: 'httpLink', render: rowData => <a href={rowData.link}>{rowData.name}</a>},         
            ]}
0
votes

To convert String tag to Real DOM in React , try this

columns={[
          { title: 'Name', field: 'name' },
          { title: 'LinkString', field: 'link'},
          { title: 'Link', field:  <span dangerouslySetInnerHTML={{__html: 'httpLink'}} />},         
        ]}