MUI Adapter

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.

Import 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.

Older MUI versions

If you are using an older version of MUI, there is a sample adapter for that as well. You can find it here. You can also find the source code for the adapter here

Once you have this imported, all you have do is to set the adapter prop on the GridOptions interface to the MUI adapter.

Live Editor

function App() { const columns = [ { ...createSelectionColumn({ itemRenderer: SelectionCheckBoxRenderer, headerRenderer: SelectionCheckBoxHeaderRenderer, }), }, createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, adapter: materialAdapter, }} ></ReactDataGrid> ); }

function App() {
  const columns = [
    {
      ...createSelectionColumn({
        itemRenderer: SelectionCheckBoxRenderer,
        headerRenderer: SelectionCheckBoxHeaderRenderer,
      }),
    },
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        adapter: materialAdapter,
      }}
    ></ReactDataGrid>
  );
}

Result

Loading...

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.

Live Editor

function App() { const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("rating", "number", "Rating"), itemRenderer: (props) => { const data = props.node.rowPosition.data; return <Rating value={data.employeeId % 5} readOnly />; }, }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, adapter: materialAdapter, }} ></ReactDataGrid> ); }

function App() {
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
      ...createColumn("rating", "number", "Rating"),
      itemRenderer: (props) => {
        const data = props.node.rowPosition.data;
        return <Rating value={data.employeeId % 5} readOnly />;
      },
    },
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        adapter: materialAdapter,
      }}
    ></ReactDataGrid>
  );
}

Result

Loading...

MUI Imports

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:

• @mui/icons-material
• @mui/material
• @mui/x-date-pickers

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.

MUI Theming

Lets now integrate our grid with the MUI theme.

Live Editor

function App() { const theme = createTheme({ palette: { mode: "dark", }, }); const columns = [ createColumn("employeeId", "string", "Id"), createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("rating", "number", "Rating"), itemRenderer: (props) => { const data = props.node.rowPosition.data; return <Rating value={data.employeeId % 5} readOnly />; }, }, ]; return ( <ThemeProvider theme={theme}> <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ nodePropsFunction: materialNodePropsFunction(theme), dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, adapter: materialAdapter, }} ></ReactDataGrid> </ThemeProvider> ); }

function App() {
  const theme = createTheme({
    palette: {
      mode: "dark",
    },
  });
  const columns = [
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
      ...createColumn("rating", "number", "Rating"),
      itemRenderer: (props) => {
        const data = props.node.rowPosition.data;
        return <Rating value={data.employeeId % 5} readOnly />;
      },
    },
  ];
  return (
    <ThemeProvider theme={theme}>
      <ReactDataGrid
        style={{ height: "400px", width: "100%" }}
        gridOptions={{
        nodePropsFunction: materialNodePropsFunction(theme),
          dataProvider: Employee.getAllEmployees(),
          uniqueIdentifierOptions: {
            useField: "employeeId",
          },
          columns,
          adapter: materialAdapter,
        }}
      ></ReactDataGrid>
    </ThemeProvider>
  );
}

Result

Loading...

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.

MUI Advanced Example

There is a much more elaborate example of using the MUI Adapter in the MUI Advanced Example