React.js: Add action icons (edit, delete) in table using material-ui

Question

I have an existing table wherein I used a library called react-bootstrap-table-next

It serves its purpose of showing data in a table in which the values are from a JSON response

However, I want to add an Action column containing edit and delete

I want to achieve this using material-ui icons

Any advice as to how should I start? Should I fully convert my table first into material-ui to achieve this?

OR I can just edit profiles state array and map it into a new array containing icons?

ProfileMaintenance.js

const [profiles, setProfiles] = useState([]); // populate table with saved profiles

const retrieveProfiles = useCallback(() => {
    ProfileMaintenanceService.retrieveProfiles()
      .then((response) => {
        console.log(
          "ProfileMaintenance - retrieveProfiles response.data >>> ",
          response.data
        );
        setProfiles(response.data);
      })
      .catch((error) => {
        if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers); // send to logger
          if (
            error.response.data.error !== undefined &&
            error.response.data.error != ""
          ) {
            store.addNotification({
              ...notification,
              type: "danger",
              message: error.response.data.error,
              dismiss: {
                duration: 5000,
              },
            });
          } else {
            store.addNotification({
              ...notification,
              type: "danger",
              message:
                "Server responded with a status code that falls out of the range of 2xx",
              dismiss: {
                duration: 5000,
              },
            });
          }
        } else if (error.request) {
          // if API is down
          console.log(error.request); // send to logger
          store.addNotification({
            ...notification,
            type: "danger",
            message: "Request was made but no response was received",
            dismiss: {
              duration: 5000,
            },
          });
        }
      });
  });

const columnsProfile = [
    // {
    //   headerStyle: {
    //     backgroundColor: '#b3b3b3'
    //   },
    //   dataField: 'id', // for dev only
    //   text: 'ID',
    //   sort: true
    //   },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "profileName",
      text: "Name",
      sort: true,
      filter: textFilter(),
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "createdBy",
      text: "Creator",
      sort: true,
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "creationDate",
      text: "Creation Date",
      sort: true,
      // filter: dateFilter()
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "lastModifier",
      text: "Last Modifier",
      sort: true,
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "lastModification",
      text: "Last Modification",
      sort: true,
    },

    {
      headerStyle: {
        backgroundColor: "#b3b3b3",
      },
      dataField: "action",
      text: "Action",
    },
  ];

const options = {
    paginationSize: 4,
    pageStartIndex: 1,
    alwaysShowAllBtns: true,
    hideSizePerPage: true,
    firstPageText: "First",
    prePageText: "Back",
    nextPageText: "Next",
    lastPageText: "Last",
    nextPageTitle: "First page",
    prePageTitle: "Pre page",
    firstPageTitle: "Next page",
    lastPageTitle: "Last page",
    showTotal: true,
    paginationTotalRenderer: customTotal,
    sizePerPageList: [
      {
        text: "5",
        value: 5,
      },
      {
        text: "10",
        value: 10,
      },
      {
        text: "All",
        value: profiles.length,
      },
    ],
  };

return (
<BootstrapTable
                keyField="id"
                hover
                data={profiles}
                columns={columnsProfile}
                defaultSorted={defaultSorted}
                filter={filterFactory()}
                selectRow={selectRowClient}
                noDataIndication="No record(s) found."
                pagination={paginationFactory(options)}
              />
)

Answer 1

As you want material icon, I suggest to use material ui table. Please below example to edit or delete row from material ui table.

import React from 'react';
import MaterialTable from 'material-table';

export default function MaterialTableDemo() {
  const [state, setState] = React.useState({
    columns: [
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
      },
    ],
    data: [
      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      {
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });

  return (
    <MaterialTable
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      editable={{
        onRowAdd: (newData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              if (oldData) {
                setState((prevState) => {
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return { ...prevState, data };
                });
              }
            }, 600);
          }),
        onRowDelete: (oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.splice(data.indexOf(oldData), 1);
                return { ...prevState, data };
              });
            }, 600);
          }),
      }}
    />
  );
}