Add Icon to material-table “lookup” (material-ui React)

0
votes

I use material-ui for my project and material-table for data tables. I am wondering to know, how can I use custom render (ex. add an icon) in column -> lookup. for example from material-table documentation: 

columns={[
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}

it is here simple key-value as string. I want to add an icon to each value

something like this:

sth like this

1
reactjsmaterial-uimaterial-table

1 Answers

1
votes

As per their code of renderLookUpFiled method, React.Element as a value of lookup object should work. They are rendering {this.props.columnDef.lookup[key]} this means if we pass React.Element, it will render that as well, there might be some props warning but it should work

columns={[
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: <div><img src="/your/image"/> İstanbul</div>, 63: <div><icon/> Şanlıurfa</div> },
        },
      ]}

enter image description here Code of renderLookUpFiled method from Material-table Above code Output