Add Buttons, Links, and Other Custom Cells in Material-UI Datagrid

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

Code Sandbox Link

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!