@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 component. It's part of MUI X, an open core extension of MUI, with advanced components.

Installation

Install the package in your project directory with:

// with npm
npm install @mui/x-data-grid-premium

// with yarn
yarn add @mui/x-data-grid-premium

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.2 || ^18.0.0",
  "react-dom": "^17.0.2 || ^18.0.0"
},

Documentation

The documentation