MUI X Data Grid in React — Installation, Setup & Examples

Fast tutorial and hands-on examples for the MUI X Data Grid (Material-UI data grid) — installation, setup, pagination, virtualization, and practical tips.

The MUI X Data Grid is a highly-performant React data table component designed for real-world apps that need sorting, filtering, pagination, virtualization, and editing. This guide walks you from installation to a working example, covering common patterns for a production-ready React data grid and answers common developer questions about MUI X Data Grid setup and usage.

Whether you’re replacing a plain Material-UI table with a feature-rich React data grid or evaluating React table components and data table libraries, this tutorial focuses on practical code, performance best practices, and how to extend the grid for large datasets.

Installation & setup: get the MUI X Data Grid into your React app

Start by adding the core packages. For most projects you need the Data Grid package, @mui/x-data-grid (or the Pro version for advanced features), plus Material UI’s system packages. Use npm or yarn to install — keep your React version compatible with MUI’s requirements to avoid peer dependency issues.

// npm (recommended)
npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid

// or yarn
yarn add @mui/material @emotion/react @emotion/styled @mui/x-data-grid

After installation, import styles and the DataGrid component in your component file. The Data Grid works with Material UI theming, so wrap your app in MUI’s ThemeProvider if you need a custom theme. This is also where you control density, palette, and typography for a consistent UI.

If you want an opinionated starter or a tutorial walkthrough, check the example „Getting started with MUI X Data Grid” article for a step-by-step build and explanation: Getting started with MUI X Data Grid. For official docs and API reference see the Material-UI data grid documentation.

Build your first data table: a simple example

Below is a minimal but complete example of a functional React data table using the MUI X Data Grid. The component demonstrates row data, columns with types, and basic selection. This pattern maps directly to most React grid component use cases where you present tabular data and want quick sorting and pagination.

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Name', width: 200 },
  { field: 'age', headerName: 'Age', type: 'number', width: 100 },
  { field: 'email', headerName: 'Email', width: 250 }
];

const rows = [
  { id: 1, name: 'Alice', age: 28, email: 'alice@example.com' },
  { id: 2, name: 'Bob', age: 34, email: 'bob@example.com' },
  // more rows...
];

export default function BasicDataGrid() {
  return (
    

      
    
  );
}

This snippet is a good starting point for building a React spreadsheet-like table or a data-heavy admin dashboard. You can add server-side pagination or virtualized rendering for very large datasets. The Data Grid supports both client- and server-side models, and it provides callback props (onPageChange, onSortModelChange, onFilterModelChange) that help you tie UI events to server APIs.

For more advanced table features—like inline editing, column pinning, and aggregation—you can opt for the Pro/Commercial versions of MUI X, or implement custom cell renderers. Keep UX in mind: heavy customization is powerful but can add complexity and performance overhead.

Key features: pagination, sorting, filtering and virtualization

Pagination is built-in and configurable. The Data Grid supports client-side pagination with pageSize and rowsPerPageOptions, and server-side pagination through controlled props. For large result sets, server-driven pagination avoids sending thousands of rows to the browser and plays nicely with REST or GraphQL endpoints.

Sorting and filtering are pluggable. You can enable client-side sorting out of the box, or implement server-side sorting using onSortModelChange. Filtering supports complex filters via a filter model. Use controlled filter models to keep search and filter state in sync with URLs or global state (Redux, Zustand), enabling shareable grid states and bookmarks.

Virtualization (row and column virtualization) is the grid’s secret weapon for performance. The grid only renders visible rows and columns, drastically reducing DOM nodes. When your dataset runs into tens or hundreds of thousands, use virtualization together with memoized row renderers, stable keys, and efficient row data shapes to keep the UI responsive.

Best practices and performance tips for production

First, choose the right data strategy: client-side for small datasets (<10k rows) and server-side for large or dynamic datasets. For server-side, implement API endpoints that accept pagination, sorting, and filter parameters so the grid can request only what's necessary. This avoids sending payloads that will be immediately discarded by virtualization logic.

Second, normalize your row data and avoid recreating arrays and objects on every render. Use useMemo for columns and rows when props change only on data updates. Prefer IDs as stable keys; avoid inline object creation for column definitions in render to prevent re-renders and unnecessary recalculations inside the grid.

Third, selectively enable heavy features. Features like complex aggregation, grouping, or custom cell renderers add CPU and memory overhead. Profile with the browser’s performance tools and the React DevTools profiler. If you need more power and official support for advanced features, consider the Pro/Commercial tiers of MUI X for server-side grouping, excel export, and advanced column types.

Quick workflow: from demo to a full React data table

When converting a small demo into a production-ready React data table, follow a phased rollout: wire the UI with mock data, switch to API-backed data with server-side pagination/sorting, add persistent state (URL or global store), then progressively enable editing, export, and column customization. Each step should include perf testing and accessibility checks.

• Start: install packages, add a basic DataGrid, confirm styles.
• Next: add pagination and server-side handlers, then filtering and sorting.
• Finish: add accessibility attributes (aria), keyboard support, and export features as required.

Remember accessibility: the Data Grid has keyboard navigation and ARIA roles, but custom cells and editors must maintain focus management and labels. Test with screen readers and keyboard-only flows as part of your acceptance testing. Also, consider mobile/responsive UX — a full grid is often less usable on narrow screens; implement column hiding or card views where appropriate.

Related user questions (People Also Ask & forums)

• How do I install and set up MUI X Data Grid in React?
• What’s the difference between DataGrid and DataGridPro?
• How to implement server-side pagination with MUI X Data Grid?
• How do I enable inline editing and save changes to an API?
• How to virtualize large datasets in the React data grid?
• How to export grid data to CSV or Excel?
• How to customize cell renderers and formatters?

Semantic core — expanded keyword clusters

Backlinks and resources

Official documentation and further reading help solidify the concepts explained here. Reference the MUI docs for API details and advanced samples: Material-UI data grid. For a practical walk-through and annotated example, see this community tutorial: Getting started with MUI X Data Grid.

FAQ

Q1: How do I install MUI X Data Grid in a React project?

A1: Install the core MUI packages and the data grid package: npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid. Wrap your app in MUI’s ThemeProvider if you need custom theming and import DataGrid from @mui/x-data-grid. For Pro features, install @mui/x-data-grid-pro and follow licensing instructions.

Q2: Should I use client-side or server-side pagination?

A2: Use client-side pagination for small datasets (<~10k rows). For larger datasets or real-time data, use server-side pagination with controlled props (page, pageSize) and callbacks (onPageChange) so the server returns only the requested page and sort/filter state, minimizing payload and improving performance.

Q3: How can I improve performance for very large data tables?

A3: Combine virtualization (built-in), server-side pagination/sorting/filtering, memoized row and column definitions, stable keys (IDs), and avoid recreating arrays/objects on every render. Profile with browser tools. Optionally consider the Pro version for built-in optimizations and advanced features.