React - 在第一列和最后一列中插入材料表操作

Question

是否可以在material-table中分别在第一列和最后一列中插入两个单独的操作？ 我知道有一个actionsColumnIndex道具可以用作options={{actionsColumnIndex: -1}} ，但我相信这会将所有动作添加到表的末尾。

我似乎无法在文档中找到任何内容来指定如何添加操作并为每个操作指定它们各自的actionsColumnIndex ，而不是为所有操作（如果可能的话）。

Answer 1

我认为没有这样的功能，但您可以使用自定义列并创建自己的操作列。 是这样的：

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 }
      ]}
    />
  );
}

查看添加缺失功能的代码（例如工具提示）。