Question

我正在使用数据表，我必须像这样定义行和列（我使用map将按钮添加到我从外部获取的每一行数据中）

const finalData = data.map(({id, first_name, last_name, email, phone, attorney, leadType, date}) => ({id, first_name, last_name, email, phone, attorney, leadType, date, action: <button>button</button>}))
const rows = finalData;

<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />

但是在我的行中我没有按钮，而是得到了[object object]我该如何解决？

Answer 1

假设您要花费DataGrid from material-ui，似乎您不能在映射行时仅使用JSX作为键值来做到这一点。您必须使用称为renderCell()的东西来包含自定义JSX。

例如，

您可以使用：-

{
    field: 'action',
    headerName: 'Action',
    renderCell: () => (
      <button>
        Content
      </button>
    ),
  },

作为列条目之一，以使用所需的按钮呈现单独的“操作”列。

有关更多信息，请参考以下内容：-

https://material-ui.com/components/data-grid/rendering/#components

将按钮映射到物料ui表的行

1 个答案: