Material-UI’s DataGrid can be customized to meet a variety of use cases. A particularly useful feature is the renderCell prop, which is a prop of the columns object in the DataGrid.
The renderCell prop allows you to inject components into the DataGrid, creating a column of custom cells.
This post will explore the code for creating Buttons and Links in the DataGrid. If you want a more comprehensive overview, see this tutorial for sorting, filtering, and exporting with MUI’s DataGrid or this guide to styling Material-UI DataGrid.

Full React code is in the Resources section.
How to Add a Button
The DataGrid columns prop accepts an array of Column objects. Column requires a field literally named field
. It also has the optional field renderCell
, which instructs the DataGrid on what to render in a particular cell.
Here’s the Column object for our Button column:
{
field: "Print",
renderCell: (cellValues) => {
return (
<Button
variant="contained"
color="primary"
onClick={(event) => {
handleClick(event, cellValues);
}}
>
Print
</Button>
);
}
}
The cellValues
param is important for passing relevant data to the button. Notice that I pass both a click event reference and cellValues
. Below is an image of what data is passed when I click the button in the second row.

If particular behavior is desired based on what row is clicked, access the cellValues.row
data. In my handleClick function, I am simply printing the cellValues object and my output looks like this: {id: 2, lastName: "Lannister", firstName: "Amy", age: 42, url: "amyspage"}
You likely will want to disable default behavior that occurs on cell click and row click of the DataGrid.
const handleCellClick = (param, event) => {
event.stopPropagation();
};
const handleRowClick = (param, event) => {
event.stopPropagation();
};
These two functions above are passed to the onCellClick
and onRowClick
functions of the DataGrid, respectively. They use event.stopPropogation
to stop behavior such as the selection of the ID column checkbox and some CSS styling.
How to Add a Link
Adding a link to the DataGrid is similar to adding a Button. Below is my Column object:
field: "Route",
renderCell: (cellValues) => {
return <Link href={`#${cellValues.row.url}`}>Link</Link>;
}
This column of the DataGrid will simply contain a Material-UI Link component. I am accessing cellValues.row.url to set the routing destination when the Link component is clicked.
In this case, the preceding ‘#’ directs the url to only update the portion of the route that follows the hash. Here’s what the Code Sandbox url looks like after the Link is clicked: https://uvobx.csb.app/#amyspage
.
Once again, make sure that the default DataGrid event propagation is stopped, as discussed above.
How to Add Other Custom Components
renderCell
can be used to inject any element or component into a cell. Good components to inject might be TextFields, Icons, or basic elements such as divs (for precise styling of text in a cell).
Keep in mind that DataGrids are intended for rending thousands or millions of rows of data. They use pagination or infinite scroll to accomplish this. However, keeping the cells as lightweight as possible is good practice to achieve top render speeds.
Resources
My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.
Test your JavaScript knowledge with these 50 challenging JavaScript questions!
i could not get tests to find render buttons in grid using screen.getByRole(“button”)
Surprisingly I cannot find renderCell description on main grid api page: https://mui.com/x/react-data-grid/
Thanks for revealing this!
Sure thing! Usually the MUI docs are great, but sometimes it’s hard to find what you need.
I want tell you TANK’S, youre explication is amazing. I was looking this info y MUI page and cant find it.
Youre amazing.
Thanks! I’m glad the article was helpful.
Hey! So i was just figuring out a way to use “Menu” component to be rendered in each row with menuItems like “Edit” and “Delete” so as to perform similar functionality on the rows. But as I click on these items, I always get the row data of the last present in the pagination. Any suggestions over this?
Amazing Post, Thanks a lot !!!
You are very welcome!