How to Use MUI DataGrid Component with Nested Data with valueGetter in React JS ?

This article explores utilizing the MUI DataGrid component in React JS for handling nested data using the valueGetter function. In MUI, valueGetter simplifies access to nested attributes, offering a concise method to extract values from deeply nested properties in an object for display in the DataGrid.

Prerequisites:

• Node JS or NPM
• React JS
• MUI DataGrid

Approach:

To use the DataGrid component with nested data and a valueGetter function, we can follow the below steps:

• Create a React application and install the required modules.
•  Define the rows and columns props for the DataGrid component. The column prop should include the valueGetter function to extract nested data from the row object.

Steps to create React App and Installing required Modules:

Step 1: Create a React Application using the following command:

npx create-react-app folder-name

Step 2: Once the project is created move to the project folder by entering the following command in the Terminal:

cd folder-name

Step 3: Install the MUI DataGrid package which is required for creating the DataGrid Component:

npm install @mui/x-data-grid

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@mui/x-data-grid": "^6.18.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: In this example, we are using the valueGetter property in columns which is used to render the nested value in the column cell.

import { DataGrid } from '@mui/x-data-grid';
const rows = [
    {
        id: 1,
        name: 'John Doe',
        address: { city: 'New York', state: 'NY' }
    },
    {
        id: 2,
        name: 'Jane Smith',
        address: { city: 'Los Angeles', state: 'CA' }
    },
    {
        id: 3,
        name: 'Bob Johnson',
        address: { city: 'Chicago', state: 'IL' }
    },
];
const columns = [
    { field: 'id', headerName: 'ID', width: 100 },
    { field: 'name', headerName: 'Name', width: 150 },
    {
        field: 'city',
        headerName: 'City',
        width: 150,
        valueGetter: (params) => params.row.address.city,
    },
    {
        field: 'state',
        headerName: 'State',
        width: 150,
        valueGetter: (params) => params.row.address.state,
    },
];
function App() {
    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid rows={rows} columns={columns} />
        </div>
    );
}
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000