New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@mui/x-data-grid-pro

Package Overview
Dependencies
Maintainers
14
Versions
222
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/x-data-grid-pro

The Pro plan edition of the Data Grid components (MUI X).

  • 8.0.0-alpha.10
  • Source
  • npm
  • Socket score
Version published
Weekly downloads
306K
decreased by-24.87%
Maintainers
14
Weekly downloads
 
Created

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

@mui/x-data-grid-pro is a premium data grid component for React applications, part of the Material-UI (MUI) library. It provides advanced features for handling large datasets, complex data operations, and enhanced user interactions.

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

Pagination

This feature allows you to paginate through large sets of data, improving performance and user experience by loading only a subset of data at a time.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'rocks' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} pageSize={5} pagination />
    </div>
  );
}
```

Sorting

This feature allows users to sort data by clicking on column headers, providing an intuitive way to organize and view data.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'rocks' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} sortingOrder={['asc', 'desc']} />
    </div>
  );
}
```

Filtering

This feature allows users to filter data based on specific criteria, making it easier to find relevant information within large datasets.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'rocks' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} filterModel={{ items: [{ columnField: 'col1', operatorValue: 'contains', value: 'Hello' }] }} />
    </div>
  );
}
```

Row Grouping

This feature allows users to group rows based on specific columns, providing a hierarchical view of the data.

```jsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  { id: 1, col1: 'Hello', col2: 'World', group: 'A' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome', group: 'B' },
  { id: 3, col1: 'Material-UI', col2: 'rocks', group: 'A' },
];

const columns = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro rows={rows} columns={columns} getRowId={(row) => row.id} groupBy={['group']} />
    </div>
  );
}
```

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

    ag-grid-react

    ag-Grid is a fully-featured and highly customizable JavaScript data grid. It offers a wide range of features including sorting, filtering, pagination, and row grouping. Compared to @mui/x-data-grid-pro, ag-Grid is known for its performance and flexibility, but it may require more configuration.

    react-table

    react-table is a lightweight, fast, and extendable data grid built for React. It focuses on providing a simple API for building powerful tables. While it offers many of the same features as @mui/x-data-grid-pro, such as sorting and filtering, it is more of a toolkit that requires additional setup for advanced features.

    handsontable

    Handsontable is a JavaScript/HTML5 data grid component with Excel-like features. It is highly customizable and supports features like sorting, filtering, and pagination. Compared to @mui/x-data-grid-pro, Handsontable offers a more spreadsheet-like experience but may have a steeper learning curve.

Keywords

FAQs

Package last updated on 31 Jan 2025

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

Oracle Drags Its Feet in the JavaScript Trademark Dispute

Security News

Oracle Drags Its Feet in the JavaScript Trademark Dispute

Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.

By Sarah Gooding  -  Feb 07, 2025
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc