Reactjs 如何在react中的AG网格行中实现按钮

我想实现一个名为columns的AG网格表。我想在表中再添加一列“edit”，并允许用户编辑和删除表中的行。它将如下所示：

我从redux存储中获取数据，这是我在行内实现数据的方式

const members = useSelector(state => state.members) // Get current members 
const data = {
  columnDefs : [
{headerName: 'Name', field: 'name'}, 
{headerName: 'Type', field: 'type'},
{headerName: 'Edit', field: 'edit'}
],
  rowData: []
}

members.map((member) => {
  data.rowData.push({
    name:member.name,
    type:member.type,
    edit: '' // ?? What comes here so I can delete & edit by rows easily with buttons ?? 
  })
})

return ( 
    <div> 
    <div className="ag-theme-material">
        <AgGridReact columnDefs={data.columnDefs} rowData={data.rowData} />            
    </div>
</div>

)

const members=useSelector（state=>state.members）//获取当前成员
常数数据={
columnDefs：[
{headerName:'Name'，field:'Name'}，
{headerName:'Type'，field:'Type'}，
{headerName:'Edit'，field:'Edit'}
],
行数据：[]
}
members.map（（member）=>{
data.rowData.push({
name:member.name，
类型：member.type，
编辑：“/？”这里有什么，我可以用按钮轻松地按行删除和编辑？？
})
})
报税表（
)

我是react redux的新手，最好的实现是什么？我可以用上面的map函数在表中获取数据吗？如有任何建议，将不胜感激。

Apporach 1：使用编辑对话框 您可以使“编辑”按钮打开编辑对话框，并在用户关闭商店后将新更改发送到商店：

• 为按钮和对话框创建自定义单元渲染器。在本例中，我将使用材质UI。但是，您可以选择所需的任何对话框库

功能按钮actionRenderer（道具）{
//道具是ICellRenererParams。请参阅：
// https://www.ag-grid.com/react-grid/component-cell-renderer/#cell-组件2
const{id}=props.data；
const[open，setOpen]=useState（false）；
常量[memberPayload，setMemberPayload]=useState（props.data）；
const dispatch=usedpatch（）；
const onClose=（）=>setOpen（false）；
const onSave=（）=>{
分派（memberAction.update（id，memberPayload）；
onClose（）；
}
返回(
setOpen（true）}>编辑
setOpen（false）}>
接近
拯救
);
}

• 在ag网格中注册该自定义单元渲染器

使表格单元格可编辑，并在每次输入更改时向存储区发送新更改

constmyeditor=forwardRef（（props，ref）=>{
//道具为ICellEditorParams。请参阅：
// https://www.ag-grid.com/react-grid/component-cell-editor/#cell-编辑器组件-1
常量字段=props.f.field；
const member=useSelector（state=>state.members.id）；
常量值=成员[字段]；
const onChange=（e）=>dispatch（memberAction.updateField（field，e.target.value））；
返回(
);
});


在ag网格中注册自定义单元编辑器



它就像一个符咒！谢谢你，伙计