@mui/x-data-grid-pro

What is @mui/x-data-grid-pro?

@mui/x-data-grid-pro is a premium data grid component for React applications, part of the Material-UI (MUI) library. It provides advanced features for handling large datasets, complex data operations, and enhanced user interactions.

What are @mui/x-data-grid-pro's main functionalities?

Pagination

This feature allows you to paginate through large sets of data, improving performance and user experience by loading only a subset of data at a time.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'rocks' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} pageSize={5} pagination />
    </div>
  );
}
```

Sorting

This feature allows users to sort data by clicking on column headers, providing an intuitive way to organize and view data.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'rocks' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} sortingOrder={['asc', 'desc']} />
    </div>
  );
}
```

Filtering

This feature allows users to filter data based on specific criteria, making it easier to find relevant information within large datasets.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'rocks' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} filterModel={{ items: [{ columnField: 'col1', operatorValue: 'contains', value: 'Hello' }] }} />
    </div>
  );
}
```

Row Grouping

This feature allows users to group rows based on specific columns, providing a hierarchical view of the data.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World', group: 'A' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome', group: 'B' },
  { id: 3, col1: 'Material-UI', col2: 'rocks', group: 'A' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} getRowId={(row) => row.id} groupBy={['group']} />
    </div>
  );
}
```

Other packages similar to @mui/x-data-grid-pro

ag-grid-react

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It offers a wide range of features including sorting, filtering, pagination, and row grouping. Compared to @mui/x-data-grid-pro, ag-Grid is known for its performance and flexibility, but it may require more configuration.

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It focuses on providing a simple API for building powerful tables. While it offers many of the same features as @mui/x-data-grid-pro, such as sorting and filtering, it is more of a toolkit that requires additional setup for advanced features.

handsontable

Handsontable is a JavaScript/HTML5 data grid component with Excel-like features. It is highly customizable and supports features like sorting, filtering, and pagination. Compared to @mui/x-data-grid-pro, Handsontable offers a more spreadsheet-like experience but may have a steeper learning curve.

README

@mui/x-data-grid-pro

This package is the Pro Plan edition of the data grid component. It's part of MUI X, an open core extension of MUI, with advanced components.

Installation

Install the package in your project directory with:

// with npm
npm install @mui/x-data-grid-pro

// with yarn
yarn add @mui/x-data-grid-pro

This component has the following peer dependencies that you will need to install as well.

"peerDependencies": {
  "@mui/material": "^5.4.1",
  "@mui/system": "^5.4.1",
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

Documentation

The documentation