How to hide button after pressing in material-table

Question

I am using react material-table. I am in need of a feature like this: I use remote data mode to get a list of records, then I use the custom column rendering function to add a Material Button at the end of each row in the table, When the user presses this button I want it to be hidden. How can I do that. I look forward to receiving your help.

This is the illustration image

So you want to hide "THAM GIA" Button when you click on it? All of them or just in the row you clicked? — Adrián Rodriguez
I want to perform the following behavior: when I click the button "THAM GIA" then only that button is hidden immediately, in the onClick event I will call the API, if the response is successful then do nothing, if it fails then I want to show the THAM GIA' button back — Things I like

NicoE NicoE · Accepted Answer · 2020-10-07T18:22:00

I made this example, on button click it gets disabled and a variable is set to to a loading state:

The key aspect here is to define something that identifies the row that is being updated. I use an extra column on which you could also display a spinner component:

{
  field: "isUpdating",
  render: (rowdata) =>
    fetchingClient === rowdata.name
      ? "loading.." // Add your  <Spinner />
      : null
},

Since you want to render the button as a custom column (other way could be using actions), on the render attribute of that column, you can use rowdata parameter to access what you are looking for:

{
  field: "join",
  sorting: false,

  render: (rowdata) => (
    <button
      disabled={fetchingClient === rowdata.name}
      onClick={(event) => fetchDataFromRemote(rowdata.name)}
    >
      Go fetch
    </button>
  )
}

Here is the link to the sandbox and the complete code, I hope this works for you!

import React, { Fragment, useState } from "react";
import MaterialTable from "material-table";

export default function CustomEditComponent(props) {
const [fetchingClient, setFetchingClient] = useState("");

const fetchDataFromRemote = (clientName) => {
    console.log(clientName);
    setFetchingClient(clientName);
};
const tableColumns = [
    { title: "Client", field: "client" },
    { title: "Name", field: "name" },
    {
    field: "isUpdating",
    render: (rowdata) =>
        fetchingClient === rowdata.name
        ? "loading.." // Add your  <Spinner />
        : null,
    },
    {
    field: "join",
    sorting: false,
    render: (rowdata) => (
        <button
        disabled={fetchingClient === rowdata.name}
        onClick={(event) => fetchDataFromRemote(rowdata.name)}
        >
        Go fetch
        </button>
    ),
    },
];

const tableData = [
    {
    client: "client1",
    name: "Jasnah",
    year: "2019",
    },
    {
    client: "client2",
    name: "Dalinar",
    year: "2018",
    },
    {
    client: "client3",
    name: "Kal",
    year: "2019",
    },
];

return (
    <Fragment>
    <MaterialTable
        columns={tableColumns}
        data={tableData}
        title="Material Table - custom column  "
        options={{ search: false }}
    />
    </Fragment>
);
}

How to hide button after pressing in material-table

1 Answers