How to Use the React Data Grid Component

Working on a client project, I needed to display thousands of rows of employee data in a table. The challenge was that the table had to be fast, interactive, and easy to filter.

At first, I tried building a simple table with HTML and React. But it quickly became slow and unmanageable when the data grew larger.

That’s when I discovered the React Data Grid component. It’s built for handling large datasets efficiently, while still giving you features like sorting, filtering, and editing.

In this tutorial, I’ll show you different ways to set up and use a React Data Grid in your project. I’ll also give you complete code examples that you can copy and run right away.

Method 1 – Basic Setup of React Data Grid

Here’s the simplest way to get started with a React Data Grid using the MUI X Data Grid.

# Install Material UI and Data Grid
npm install @mui/material @mui/x-data-grid @emotion/react @emotion/styled

// App.js
import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { Box } from "@mui/material";

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  { field: "name", headerName: "Name", width: 150 },
  { field: "state", headerName: "State", width: 120 },
  { field: "salary", headerName: "Salary ($)", type: "number", width: 130 },
];

const rows = [
  { id: 1, name: "John Doe", state: "California", salary: 85000 },
  { id: 2, name: "Jane Smith", state: "Texas", salary: 92000 },
  { id: 3, name: "Mike Johnson", state: "New York", salary: 78000 },
  { id: 4, name: "Emily Davis", state: "Florida", salary: 67000 },
];

export default function App() {
  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </Box>
  );
}

I executed the above example code and added the screenshot below.

This code sets up a basic React Data Grid with columns and rows. It’s perfect for displaying structured data like employee records.

Method 2 – Add Sorting and Filtering

Once the grid is set up, you can enable sorting and filtering with just a few extra props.

// App.js
<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5, 10]}
  checkboxSelection
  disableSelectionOnClick
/>

I executed the above example code and added the screenshot below.

Here, I added pagination, row selection, and sorting. This makes the grid more interactive and user-friendly.

Method 3 – Editable Data Grid

Sometimes you want users to edit data directly inside the grid. Here’s how you can make certain columns editable.

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  { field: "name", headerName: "Name", width: 150, editable: true },
  { field: "state", headerName: "State", width: 120, editable: true },
  { field: "salary", headerName: "Salary ($)", type: "number", width: 130, editable: true },
];

I executed the above example code and added the screenshot below.

By setting editable: true, users can update values directly in the grid. This is useful when you want inline editing without building extra forms.

Method 4 – Server-Side Data Loading

In real-world apps, data usually comes from an API instead of being hard-coded.
Here’s how you can fetch and display data from a server.

import React, { useState, useEffect } from "react";
import { DataGrid } from "@mui/x-data-grid";
import { Box } from "@mui/material";

export default function App() {
  const [rows, setRows] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => {
        const formatted = data.map((user) => ({
          id: user.id,
          name: user.name,
          state: user.address.city,
          salary: Math.floor(Math.random() * 100000),
        }));
        setRows(formatted);
      });
  }, []);

  const columns = [
    { field: "id", headerName: "ID", width: 90 },
    { field: "name", headerName: "Name", width: 150 },
    { field: "state", headerName: "State", width: 120 },
    { field: "salary", headerName: "Salary ($)", type: "number", width: 130 },
  ];

  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </Box>
  );
}

This method fetches data from a public API and formats it for the grid. It’s the best approach when working with real-world datasets.

Method 5 – Custom Styling

You can style the grid to match your brand or theme using the sx prop.

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  sx={{
    "& .MuiDataGrid-cell": { color: "darkblue" },
    "& .MuiDataGrid-columnHeaders": { backgroundColor: "#f0f0f0" },
  }}
/>

This lets you customize the look and feel of your grid. It’s helpful when you need the grid to match your company’s design style.

Most of the time, I use the React Data Grid when I need to display large datasets professionally. It saves me hours of coding compared to building tables from scratch.

If you’re working on a project where performance and interactivity matter, I highly recommend trying out the React Data Grid. It’s flexible, fast, and makes your data look clean and easy to explore

You may also read:

• Higher Order Components in React
• Can’t Perform a React State Update on an Unmounted Component
• How to Mock a React Component in Jest
• React Error Boundaries in Functional Components

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/