如何自定义材料表（React）中的内容？

Posted 2023-02-22

【中文标题】如何自定义材料表（React）中的内容？

【英文标题】：How to customise content in material-table (React)?

【发布时间】：2020-05-07 22:41:18

【问题描述】：

我想在每个项目前添加一个图标，对应于一列中的数据。目前，我只是使用 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
      );
    
  
]

/>

【参考方案1】：

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

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

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

并添加一列： title: "", field: "firstColumn" "。