@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 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.12.0

Aug 1, 2024

💵 Our commercial offering is evolving

The Pro plan is receiving two new packages:

• @mui/x-tree-view-pro (available today!)
• @mui/x-charts-pro (available in the coming weeks)

As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.

This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the Upcoming changes to MUI X pricing in 2024 blog post.

Highlights

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

• 🎁 Introduce item reordering using drag and drop on the <RichTreeViewPro /> component

  <img width="287" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />

• 📦 Support CommonJS bundle out of the box on @mui/x-charts by adding vendored D3 dependencies.

  • This modifies how the package imports D3.js. It will impact you if you use d3 packages installed by @mui/x-charts and don't have them in your package.json. You shouldn't be affected otherwise.

  • For more context, the initial issue is caused by D3 only exporting ESM.

    

  • The solution up until now was to export charts with only ESM. But some frameworks are confused by this configuration.

    

  • So in order to fix this, we are providing a CJS version of D3.

    

• 🌍 Improve Turkish (tr-TR) locale on the Data Grid

• 🌍 Improve Finnish (fi-FI) locale on the Date and Time Pickers

• 🐞 Bugfixes

• 📚 Documentation improvements

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid