@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.15.14",
  "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.

Changelog

7.8.0

Jun 28, 2024

We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:

• 🛰 Introduce server-side data source for improved server integration in the Data Grid.

  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.

  To enable, provide a getRows function to the unstable_dataSource prop on the Data Grid component.

  const dataSource = {
    getRows: async (params: GridServerGetRowsParams) => {
      const data = await fetch(
        `https://api.example.com/data?${new URLSearchParams({
          page: params.page,
          pageSize: params.pageSize,
          sortModel: JSON.stringify(params.sortModel),
          filterModel: JSON.stringify(params.filterModel),
        }).toString()}`,
      );
      return {
        rows: data.rows,
        totalRows: data.totalRows,
      };
    },
  }
  <DataGridPro
    unstable_dataSource={dataSource}
    {...otherProps}
  />
  

  See server-side data documentation for more details.

• 📈 Support Date data on the BarChart component

• ↕️ Support custom column sort icons on the Data Grid

• 🖱️ Support modifying the expansion trigger on the Tree View components

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid