Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mui/x-data-grid-premium

Package Overview
Dependencies
Maintainers
14
Versions
177
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/x-data-grid-premium

The Premium plan edition of the Data Grid Components (MUI X).

  • 7.23.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
153K
decreased by-12.75%
Maintainers
14
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 29 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc