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

user_3480297 0
Viewed 1040

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

material-table material-ui reactjs
1 Answers

I think there is not such a feature, but you can use custom column and create your own action columns. enter image description here 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).

user_101963010
Related