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

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