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 guide to the Material-UI DataGrid.

Material-UI DataGrid with Button Cell
DataGrid with buttons and links

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.

DataGrid cellValues parameter
DataGrid cellValues

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

Are you looking for training in Material-UI? Check out my review of the best Material-UI course on Udemy, which has 40+ hours of content and a 30-day money back guarantee.

Test your JavaScript knowledge with these 50 challenging JavaScript questions!

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.