@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 Core, with advanced components.

Installation

Install the package in your project directory with:

npm install @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

Visit https://mui.com/x/react-data-grid/ to view the full documentation.