如何在材质用户界面表的每一行中添加按钮 [英] How to add a button to every row in material ui table

问题描述

我无法在Material-UI数据表的每一行中添加按钮我有一个如此呈现的Material-UI数据表

 < DataGrid行= {行}列= {列} pageSize = {5} checkboxSelection/> 

我已经将按钮应位于的变量'actions'列添加到了columns中.行只是我从道具获得的数据对象.如何在每行中添加按钮(用于编辑行)?我尝试映射数据数组，但无法将JSX按钮添加到数据的每个对象中

解决方案

可以.将您的自定义组件添加到

I cant add a button into every row of Material-UI's data table I have a Material-UI data-table which I render like this

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

I have added into the columns variable 'actions' column where the button should be. rows are just a a data object I get from the props. how can I add a button into every row (for editing the row)? I have tried mapping the data array but it is not possible to add JSX button into every object of data

解决方案

Yes you can. Add your custom component to GridColDef.renderCell. Here is an example:

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 70 },
  {
    field: "",
    headerName: "Action",
    disableClickEventBubbling: true,
    renderCell: (params) => {
      const onClick = () => {
        const api: GridApi = params.api;
        const fields = api
          .getAllColumns()
          .map((c) => c.field)
          .filter((c) => c !== "__check__" && !!c);
        const thisRow = {};

        fields.forEach((f) => {
          thisRow[f] = params.getValue(f);
        });

        return alert(JSON.stringify(thisRow, null, 4));
      };

      return <Button onClick={onClick}>Click</Button>;
    }
];

Live Demo

这篇关于如何在材质用户界面表的每一行中添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！