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.
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.
7.0.0-alpha.0
Nov 10, 2023
We're thrilled to announce the first alpha release of our next major version, v7.
This release introduces a few breaking changes, paving the way for the upcoming features like Pivoting and DateTimeRangePicker.
A special shoutout to thank the 12 contributors who made this release possible. Here are some highlights β¨:
- π First v7 alpha release
- β¨ Fix aggregation label not showing when
renderHeader
is used (#10961) @cherniavskii - π Server side data source early documentation
- π« New recipes added for the data grid
- π
<ChartsReferenceLine />
component is now available - π Add Basque (eu) locale, improve Czech (cs-CZ) and Spanish (es-ES) locales
- π Bugfixes
- π Documentation improvements
Data Grid
Breaking changes
- The deprecated
components
and componentsProps
props have been removed. Use slots
and slotProps
instead. See components section for more details. - The print export will now only print the selected rows if there are any.
If there are no selected rows, it will print all rows. This makes the print export consistent with the other exports.
You can customize the rows to export by using the
getRowsToExport
function. - The
getApplyFilterFnV7
in GridFilterOperator
was renamed to getApplyFilterFn
.
If you use getApplyFilterFnV7
directly - rename it to getApplyFilterFn
. - The signature of the function returned by
getApplyFilterFn
has changed for performance reasons:
const getApplyFilterFn: GetApplyFilterFn<any, unknown> = (filterItem) => {
if (!filterItem.value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
- return (cellParams) => {
- const { value } = cellParams;
+ return (value, row, colDef, apiRef) => {
return value != null ? filterRegex.test(String(value)) : false;
};
}
- The
getApplyQuickFilterFnV7
in GridColDef
was renamed to getApplyQuickFilterFn
.
If you use getApplyQuickFilterFnV7
directly - rename it to getApplyQuickFilterFn
. - The signature of the function returned by
getApplyQuickFilterFn
has changed for performance reasons:
const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
if (!value) {
return null;
}
const filterRegex = new RegExp(escapeRegExp(value), 'i');
- return (cellParams) => {
- const { formattedValue } = cellParams;
+ return (value, row, column, apiRef) => {
+ let formattedValue = apiRef.current.getRowFormattedValue(row, column);
return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false;
};
};