In this article, we will learn how to use the MUI DataGrid component with nested data in ReactJS. A DataGrid Component assists in showing information in a grid-like arrangement of rows and columns. This component is available in Material UI for React, and it is extremely simple to integrate.
DataGrid Rows: The rows prop defines the data to display in the grid. It takes an array of objects, where each object represents a row in the grid. Each row should also include an id property to enable delta updates and improved efficiency.
DataGrid Columns: The columns prop defines the structure and configuration of the columns in the grid. It takes an array of objects, where each object represents a column in the grid.
renderCell property: The renderCell property in Material-UI’s DataGrid component allows you to customize the content of a specific cell in the grid. It takes a function as its value, which will be called for each cell that corresponds to a row and column index in the grid.
The function returns a React element that will be rendered as the content of the cell. It receives an object as its argument that contains information about the cell, including the row and column data, as well as other properties like value, field, rowIndex, and colIndex.
Creating React Application and Installing the required Modules:
- Step1: 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: Now, install the MUI library in the project.
npm install @mui/material @emotion/react @emotion/styled
- Step 4: Now, Install the MUI DataGrid package which is required for creating the DataGrid Component by using the following command:
npm install @mui/x-data-grid
Project Structure:
Folder Structure
Example: In this, we use the columns prop to define the structure of the DataGrid and its sub-components. Each column can have its own renderCell function, which takes in the value of the cell and returns a custom rendering for that value. This is useful for rendering nested data, as you can define a column for each level of nesting.
- App.js file.
Javascript
import { DataGrid } from '@mui/x-data-grid'; const columns = [ { field: 'id', headerName: 'ID', width: 70 }, { field: 'name', headerName: 'Name', width: 130 }, { field: 'address', headerName: 'Address', width: 300, renderCell: (params) => { return ( <> <div>{params.value.street}</div> <div> {params.value.city}, {params.value.state} {params.value.zip} </div> </> ); }, }, ]; const rows = [ { id: 1, name: 'Geek', address: { street: '123 GeeksForGeeks', city: 'Anytown', state: 'Great', zip: '12345' } }, { id: 2, name: 'Author', address: { street: '456 Writer', city: 'Writertown', state: 'New', zip: '54321' } }, ]; export default function App() { return ( <div style={{ height: 400, width: '100%' }}> <DataGrid rows={rows} columns={columns} /> </div> ); } |
Step to Run Application:
npm start
Output: Now open your browser and go to http://localhost:3000/, and you can see the following output:
DataGrid
Explanation: In the above example, we are displaying the nested data with the use of the renderCell function. The renderCell function returns the component of the data for each row. Hence, the nested data (i.e. street, state, pincode inside the address object) is rendered in the particular cell.
