如何在材料表（反应）中自定义内容？

Question

例如，我想在每一列的对应于其数据的每个项目之前添加一个图标。当前，我仅使用js数组显示静态数据，但无法对其进行自定义。

现在使用此：

<MaterialTable
title="Title"
columns={this.state.columns}
data={newDataTable}
options={{
  selection: true
}}
options={{
  search: false,
  sorting: true
}}
actions={[
  {
    icon: () => <Checkbox />,
    tooltip: 'checkbox'
  },
  {
    icon: () => <InfoIcon />,
    tooltip: 'info',
    onClick: (event, item) => {
      this.setState({
        isOpen: true,
        selectedItem: item
      });
    }
  }
]}

/>

Answer 1

我假设您使用的是：https://github.com/mbrn/material-table。

在将数据传递到表之前，您可以添加如下图标：

const newData = newDataTable.map((value) => ({...value, firstColumn: <SomeIcon />}));

并添加带有{ title: "", field: "firstColumn" }"的列。