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)
