Possible to render Material elements within material-table?

Question

I'm working on a data display for my application and have been looking into different available data table components built on top of Material UI. I'm wondering if it would be possible with material-table to render Material UI <Chip> components within one of the table columns. I tried what I thought made the most sense to attempt something like this, but it did not work. My attempt:

const test = () => {
    return (
      <div>
        <Chip>Test</Chip>
        <Chip>Another Test</Chip>
      </div>
    )
  }

And then trying to render it:

<MaterialTable
   columns={[
      { title: 'Project Types', field: 'types' }
   ]}
   data={[
      { types: test },
   ]}
/>

Is there anything I can do to render these Chips within my Material Table?

Answer 1

Something like this? Check out MaterialTable's custom column rendering section

<MaterialTable
  columns={[
    {
      title: 'Project Types',
      field: 'types',
      render: rowData => (
        <div>
          {rowData.types.map(type => (
            <Chip key={type} label={type}/>
          ))}
        </div>
      ),
    },
  ]}
/>;