@mui/x-data-grid-premium

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

@mui/x-data-grid-premium is a powerful data grid component for React applications, part of the Material-UI (MUI) library. It offers advanced features for handling large datasets, complex data operations, and customizations, making it suitable for enterprise-level applications.

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

Column Grouping

Column grouping allows you to group columns under a common header, making it easier to manage and visualize related data.

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

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'firstName', headerName: 'First name' },
  { field: 'lastName', headerName: 'Last name' },
  { field: 'age', headerName: 'Age', type: 'number' },
  { field: 'fullName', headerName: 'Full name', valueGetter: (params) => `${params.row.firstName || ''} ${params.row.lastName || ''}` },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function ColumnGroupingGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium rows={rows} columns={columns} />
    </div>
  );
}

Tree Data

Tree data allows you to display hierarchical data in a tree structure, making it easier to navigate and understand parent-child relationships.

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

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name' },
  { field: 'age', headerName: 'Age', type: 'number' },
];

const rows = [
  { id: 1, name: 'John Doe', age: 25, parentId: null },
  { id: 2, name: 'Jane Doe', age: 30, parentId: 1 },
  { id: 3, name: 'Sam Smith', age: 20, parentId: 1 },
  { id: 4, name: 'Alice Johnson', age: 35, parentId: null },
];

export default function TreeDataGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium rows={rows} columns={columns} treeData getTreeDataPath={(row) => row.parentId} />
    </div>
  );
}

Aggregation

Aggregation allows you to perform operations like sum, average, min, and max on column data, providing quick insights into your dataset.

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

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name' },
  { field: 'quantity', headerName: 'Quantity', type: 'number', aggregation: 'sum' },
];

const rows = [
  { id: 1, name: 'Apple', quantity: 10 },
  { id: 2, name: 'Banana', quantity: 20 },
  { id: 3, name: 'Cherry', quantity: 30 },
];

export default function AggregationGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium rows={rows} columns={columns} />
    </div>
  );
}

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

ag-grid-react

AG Grid is a fully-featured and highly customizable data grid for React. It offers a wide range of features including sorting, filtering, grouping, and aggregation. Compared to @mui/x-data-grid-premium, AG Grid is known for its performance and extensive feature set, but it may require more configuration.

react-table

React Table is a lightweight and flexible library for building tables in React. It provides hooks for managing table state and rendering, making it highly customizable. While it doesn't offer as many built-in features as @mui/x-data-grid-premium, it excels in flexibility and ease of use.

react-data-grid

React Data Grid is a powerful grid component for React with features like sorting, filtering, and grouping. It is similar to @mui/x-data-grid-premium in terms of functionality but offers a different API and customization options.

README

MUI X Data Grid Premium

This package is the Premium plan edition of the Data Grid components. 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-premium

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

"peerDependencies": {
  "@mui/material": "^5.15.14 || ^6.0.0",
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

Documentation

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

Changelog

8.0.0-alpha.3

Dec 5, 2024

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

• 💫 Support Server-side lazy loading on the Data Grid. Use data source to fetch a range of rows on demand and update the rows in the same way as described in Infinite loading and Lazy loading without the need to use any additional event listeners and callbacks.
• 🎯 Improved data caching. Check out our recommendations for improving the cache hit rate.

Special thanks go out to the community contributors who have helped make this release possible: @ihsanberkozcan, @k-rajat19, @perezShaked. Following are all team members who have contributed to this release: @arminmeh, @cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte.

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid

Breaking changes

• The "Select all" checkbox is now checked when all the selectable rows are selected, ignoring rows that are not selectable because of the isRowSelectable prop.
• The rowPositionsDebounceMs prop was removed.
• The gridRowsDataRowIdToIdLookupSelector selector was removed. Use the gridRowsLookupSelector selector in combination with the getRowId() API method instead.

  -const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
  -const rowId = idToIdLookup[id]
  +const rowsLookup = gridRowsLookupSelector(apiRef);
  +const rowId = apiRef.current.getRowId(rowsLookup[id])
  

• The Grid is now more aligned with the WAI-ARIA authoring practices and sets the role attribute to treegrid if the Data Grid is used with row grouping feature.