How to pass MUI Datagrid props to Modal on Action Button Click

22 Views Asked by At

I have a datagrid that displays some user data that I have existin in my Firebase DB. At the end of each row on the table, I have an action button that I am looking to display a modal when clicked.

I have the table and modal set up, but am wondering how I should pass the data from each row to the modal when it is clicked.

Here is the code for the datagrid:

const columns = [
{ field: 'firstName', headerName: 'First Name', width: 100 },
{ field: 'lastName', headerName: 'Last Name', width: 100 },
{ field: 'email', headerName: 'Email', width: 150 },
{ field: 'permission', headerName: 'Role', width: 100 },
{ field: 'street', headerName: 'Address', width: 150 },
{ field: 'city', headerName: 'City', width: 100 },
{ field: 'livingState', headerName: 'State', width: 100 },
{ field: 'zip', headerName: 'Zip', width: 100 },
{
    field: "action",
    headerName: "Action",
    sortable: false,
    renderCell: (params) => {
      const onClick = (e) => {
        // Enter logic to pass data to modal here
      };

      return <Button onClick={handleOpen}>
      <ModeIcon />
      
      </Button>;
    }
  },

];

Here is what the table looks like (Action button on the end of each row)

Datagrid

0

There are 0 best solutions below