How to properly render a button or icon inside Data Grid column? - material-ui

Question

i have a Data Grid table, there's a colomn that holds actions (edit and delete):
(Below is my whole code)
import React, { useEffect } from 'react'
import { DataGrid } from '#mui/x-data-grid'
import { useNavigate } from 'react-router-dom'
import EditIcon from '#mui/icons-material/Edit'
import DeleteForeverIcon from '#mui/icons-material/DeleteForever'
import { Button } from '#mui/material'
const rows = [
{
id: 1,
lastName: 'Snow',
firstName: 'Jon',
age: 35,
edit: EditIcon,
delete: `${(<Button variant="text">Text</Button>)}`,
},
]
const Colors = () => {
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{ field: 'firstName', headerName: 'First name', width: 130 },
{ field: 'lastName', headerName: 'Last name', width: 130 },
{
field: 'age',
headerName: 'Age',
type: 'number',
width: 90,
},
{ field: 'edit', headerName: 'Edit', width: 150 },
{ field: 'delete', headerName: 'Delete', width: 150 },
]
return (
<div style={{ height: 560, width: '100%' }}>
<DataGrid
sx={{ backgroundColor: 'white' }}
rows={rows}
columns={columns}
pageSize={8}
rowsPerPageOptions={[8]}
checkboxSelection
/>
</div>
)
}
export default Colors
Now my problem is, i would like to use a material icon inside edit column.
I tried by implementing icon directly like this:
const rows = [
{
id: 1,
lastName: 'Snow',
firstName: 'Jon',
age: 35,
edit: EditIcon, //<--
},
]
Or calling a button by this way:
const rows = [
{
id: 1,
lastName: 'Snow',
firstName: 'Jon',
age: 35,
delete: `${(<Button variant="text">Text</Button>)}`, //<--
},
]
Result: i'm getting a render [object object] instead of icon or button.
How to properly render a button or icon inside Data Grid column?

Answer 1

I think you can try doing this. MUI exposes an actions column type that you can pass custom icons and implementations to. If you scroll down a bit on this link you can find a lot of column options.
Actions column
import { GridActionsCellItem, GridRowParams } from "#mui/x-data-grid-pro";
import EditIcon from "#mui/icons-material/Edit";
{
field: "actions",
type: "actions",
align: "left",
headerName: t("actions"),
getActions: (params: GridRowParams) => [
<GridActionsCellItem
key={0}
icon={<EditIcon titleAccess={t("edit")} color="primary" />}
label={t("edit")}
onClick={() => handleEditPressed(params)}
/>,
],
},

Answer 2

I fixed my problem by using renderCell, with this i can render html inside grid data the way i want (i can put button for exemple):
{
field: 'edit',
headerName: 'Edit',
width: 70,
renderCell: (params) => {
return <EditIcon /> //<-- Mui icons should be put this way here.
},
},