[英]React - Insert material-table Actions in the First and Last Column
Is it possible within material-table
to insert two separate actions in the first and last columns respectively?是否可以在material-table
中分别在第一列和最后一列中插入两个单独的操作? I know that there is an actionsColumnIndex
prop that can be used as such options={{actionsColumnIndex: -1}}
, but I believe this will add all the actions to the end of the table.我知道有一个actionsColumnIndex
道具可以用作options={{actionsColumnIndex: -1}}
,但我相信这会将所有动作添加到表的末尾。
I can't seem to find anything in the documentation that specifies how to add actions and specify their individual actionsColumnIndex
for each, rather than for all the actions (if this is possible).我似乎无法在文档中找到任何内容来指定如何添加操作并为每个操作指定它们各自的actionsColumnIndex
,而不是为所有操作(如果可能的话)。
I think there is not such a feature, but you can use custom column and create your own action columns.我认为没有这样的功能,但您可以使用自定义列并创建自己的操作列。 Something like this:是这样的:
import React from "react";
import MaterialTable from "material-table";
import { Save, Delete } from "@material-ui/icons";
import IconButton from "@material-ui/core/IconButton";
export default function FreeAction() {
return (
<MaterialTable
title="Dynamic Actions"
columns={[
{
title: "First Action",
render: (rowData) => {
const button = (
<IconButton
color="inherit"
onClick={() => {
console.log("Save");
}}
>
<Save />
</IconButton>
);
return button;
}
},
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "London", 63: "Berlin" }
},
{
title: "Second Action",
render: (rowData) => {
const button = (
<IconButton
color="inherit"
onClick={() => {
console.log("Save");
}}
>
<Delete />
</IconButton>
);
return button;
}
}
]}
data={[
{
name: "Jonathan",
surname: "Livingston",
birthYear: 1987,
birthCity: 63
},
{ name: "Richard", surname: "Bach", birthYear: 2017, birthCity: 34 },
{ name: "Michael", surname: "Scott", birthYear: 2020, birthCity: 34 },
{ name: "Kevin", surname: "Malone", birthYear: 2020, birthCity: 34 }
]}
/>
);
}
Have a look at the code to add missing features (tooltip for example).查看添加缺失功能的代码(例如工具提示)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.