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

Jul 18, 2024

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

• 🎨 Add color legend for charts (#13700) @alexfauquette
• 🌍 Improve Korean (ko-KR) locale on the Date and Time Pickers
• 🌍 Improve Russian (ru-RU) locale on the Date and Time Pickers and Data Grid
• 🐞 Bugfixes
• 📚 Documentation improvements

<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->

Data Grid