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

Question

Is it possible within material-table to insert two separate actions in the first and last columns respectively? 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.

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).

Answer 1

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).