React - 在第一列和最后一列中插入 material-table 操作

Question

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

的末尾

我似乎无法在 documentation 中找到任何指定如何添加操作并为每个操作而不是所有操作指定它们的个人 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 }
      ]}
    />
  );
}

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

React - 在第一列和最后一列中插入 material-table 操作

React - Insert material-table Actions in the First and Last Column

reactjs

material-ui

material-table