The MUI Adapter is a wrapper around the Material UI components. It allows you to use the Material UI components in the React Data Grid.
The source code of the adapter is actually very simple and is available here
As you can see, most of the code is just mapping icons to codes, and returning Text, Select and DatePicker components.
Using the MUI Adapter
Let's now add the MUI adapter in our example. We will use the same example as before, but this time we will use the MUI adapter.
The MUI Adapter is not part of the core library. You will need to import it separately. You can do this by importing the
material-adapter.tsx file from the
adapters folder linked above.
Once you have this imported, all you have do is to set the
adapter prop on the
GridOptions interface to the MUI adapter.
Did you notice it? The settings icon is now a Material UI icon. All the checkboxes are MUI checkboxes. The quick find is now a Material UI text field. When you clicked on the settings menu, the checkboxes are all Material UI checkboxes. The icons in the settings menu are all MUI Icons. Pretty much everything in the grid is now Material UI, right? The only exception is the primitive textual components like the text in the header, the text in the cells, and so on. We use the backgroundColor and color props to style these components from the MUI theme in the adapter so that they match the MUI Typography. We could use the MUI Typography/Paper components itself, but we chose not to do this to keep the core cells simple light weight div elements. Certainly possible though!
So with a single line of code, you can use the Material UI components in the React Data Grid. And since the Adapter itself is barely 200 lines of very straightforward code, you can easily customize it to your needs.
MUI Item Renderer
Let's now add a custom item renderer to the grid. We will use the MUI Rating component as the item renderer.
The MUI Adapter does not import the MUI components for you. You will need to install the MUI components separately. We use the following packages:
You can install these packages using the following command:
npm install @mui/icons-material @mui/material @mui/x-date-pickers
You can choose to install just the components referenced in the adapter, or you can install all of them (which is what we did here). Assuming you are already using MUI in your project, you will probably already have these packages installed.
Lets now integrate our grid with the MUI theme.
In the above example, we are using the MUI
ThemeProvider to wrap the grid. We are also using the
nodePropsFunction prop to pass in the
materialNodePropsFunction function. This function is used to set the backgroundColor and color props on the cells based on the MUI theme. This is how we get the dark theme in the grid.
There is a much more elaborate example of using the MUI Adapter in the MUI Advanced Example