如何使材料表中的某个列可编辑？答案

【问题标题】：How to make a certain column editable in material-table?如何使材料表中的某个列可编辑？
【发布时间】：2022-08-24 18:26:28
【问题描述】：

我正在尝试使材料表中的某个列可编辑（名称列），但它似乎不起作用。文档也不是很有帮助。这是我尝试过的：

我的列数组：

const headers=[
  {
    title:\"id\",
    field:\"id\",
  },
  {
    title:\"name\",
    field:\"name\",
    editable:\'always\',  //as per documentation its \'always\' by default but still..
    editComponent:props=>(   //trying to create custom edit component
      <input
       type=\"text\"
       value={props.value}
       onChange={e => props.onChange(e.target.value)}/>
   )
  },
  {
    title:\"email\",field:\"email\"
  }
]

我的材料表组件：

<MaterialTable 
                columns={headers} 
                data={rows} 
                icons={tableIcons}
                editable={{}}
                options={{
                    search:false,
                    //padding:\"dense\",
                    paging:false,
                   // addRowPosition:\"first\",
                   // actionsColumnIndex:-1,
                    sorting:false,
                    exportButton:false,
                    rowStyle:{
                        fontSize:\"10px\",
                        padding:0,
                        textAlign:\"center\"
                    }  
                }}
                />

我的输出：

任何帮助表示赞赏。

标签： reactjs material-table

【解决方案1】：

您需要将其余列设置为“不可编辑”

{
title:"id",
field:"id",
editable:'never'
}

如果你有很多列并且你只想要一个可编辑的列，你可以在标签中的 cellEdiatble 属性中使用 isCellEditable：

cellEditable={{
    onCellEditApproved: onCellUpdate,
    isCellEditable: (rowData, columnDef) =>
      columnDef.field === "name",
  }}

【讨论】：