如何在材质用户界面表的每一行中添加按钮
倪泰
我无法在Material-UI数据表的每一行中添加按钮，但我有一个Material-UI数据表，我会像这样渲染
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
我已将按钮应放在的列变量'actions'列中。行只是我从道具中获得的一个数据对象。如何在每行中添加按钮（用于编辑行）？我尝试映射数据数组，但是无法将JSX按钮添加到数据的每个对象中
赫斯卡尔附近
是的你可以。将您的自定义组件添加到ColDef.renderCell。这是一个例子：
const columns: ColDef[] = [
{ field: "id", headerName: "ID", width: 70 },
{
field: "",
headerName: "Action",
disableClickEventBubbling: true,
renderCell: (params: CellParams) => {
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>;
}
];
现场演示
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
- 上一篇：ByteBuddy的Implementation.Composable和Implementation.Compound有什么区别？
- 下一篇：安装json（1.8.1）时发生错误，Bundler无法继续
相关文章
Related 相关文章
- 1
如何在材质用户界面表的每一行中添加按钮
- 2
如何在数据表的每一行中添加按钮？
- 3
Vue-如何在Vuetify数据表的每一行中添加按钮？
- 4
如何在数据表的每一行上添加按钮？
- 5
如何在dataTable的每一行中添加按钮？
- 6
如何在HTML的每一行中添加按钮/超链接
- 7
在反应（流量）固定数据表的每一行中添加按钮
- 8
如何在前 2 列上添加字符串并在第 3 列上为 pyqt tablewidget 中的每一行字符串添加按钮？
- 9
使用粘性表末尾的更多按钮将 Angular 材质菜单添加到 Angular 材质表中的每一行
- 10
单击添加按钮后如何临时将唯一行存储到html表中？
- 11
如何在表格的每一行中添加删除按钮？
- 12
如何在数据表中为r中的每一行添加循环？
- 13
如何在jquery数据表的每一行上添加一个下拉按钮
- 14
如何在运行时生成的 asp.net web 表的每一行中动态添加删除和更新按钮
- 15
如何在dc.js表中添加按钮？
- 16
如何在具有响应的每一行的编辑/删除按钮的AG网格中添加动作列？
- 17
如何在JTable的行中添加按钮？
- 18
jQuery在表行中添加按钮
- 19
如何在表的每一行中添加复选框以在tkinter中从phpmyadmin更新/删除行数据
- 20
如何在从服务器获取数据的动态表的每一行中添加下拉列表？
- 21
如何在react-virtualized表的每一行的开头添加一个checbox？
- 22
如何在Django管理网站中的添加用户按钮旁边添加按钮
- 23
如何在InfoWindow中添加按钮？
- 24
如何在MKPointAnnotation中添加按钮？
- 25
如何在SwiftUI中添加按钮
- 26
如何在边框中添加按钮？
- 27
如何在列表的每一行之后创建按钮？
- 28
如何在helpertext材质用户界面TextField中添加onClick事件？
- 29
如何为表中的每一行数据设置 2 个或更多单选按钮？
我来说两句