可以在 material-table 内渲染 Material 个元素吗？

Question

我正在为我的应用程序开发数据显示，并且一直在研究构建在 Material UI 之上的不同可用数据 table 组件。我想知道是否可以使用 material-table 在 table 列之一中呈现 Material UI <Chip> 组件。我尝试了我认为最有意义的尝试，但没有奏效。我的尝试：

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

然后尝试渲染它：

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

我可以做些什么来在我的 Material Table 中渲染这些芯片？

Answer 1

是这样的吗？查看 MaterialTable 的 custom column rendering section

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

可以在 material-table 内渲染 Material 个元素吗？

Possible to render Material elements within material-table?

reactjs

material-ui

material-table