Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid][docs] Add small edits to the overview page #13060

Merged
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 25 additions & 19 deletions docs/data/data-grid/overview/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,45 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/grid/

# MUI X Data Grid

<p class="description">A fast and extendable react data table and react data grid. It's a feature-rich component available in MIT or Commercial versions.</p>
<p class="description">A fast and extendable React data table and React data grid. It's a feature-rich component available with MIT or Commercial licenses.</p>
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

The component leverages the power of React and TypeScript, to provide the best UX while manipulating an unlimited set of data. It comes with an intuitive API for real-time updates, accessibility, as well as theming and custom templates, all with blazing-fast performance.
The component leverages the power of React and TypeScript, to provide the best UX while manipulating an unlimited set of data.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
It comes with an intuitive API for real-time updates, accessibility, as well as theming and custom templates, all with blazing-fast performance.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

{{"component": "modules/components/ComponentLinkHeader.js"}}

## Overview

The Data Grid presents information in a structured format of rows and columns.
The data is displayed in a user-friendly, quick-to-scan and interactive way, enabling users to efficiently identify patterns, edit data, and gather insights.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

:::info
Visit the [installation guide](/x/react-data-grid/getting-started/#installation) to learn how to install the correct package version and dependencies.
:::

The Data Grid presents information in a structured format of rows and columns. The data is displayed in a user-friendly, quick-to-scan and interactive way, enabling users to efficiently identify patterns, edit data, and gather insights.

The component comes in three different versions, one available under MIT license and two available under commercial license.

## MIT version (free forever)
## MIT license (free forever)
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

The first version is meant as a stronger alternative to [data tables](/material-ui/react-table/#sorting-amp-selecting). It's a clean abstraction with basic features like editing, pagination, sorting and filtering single columns, and column groups.
The MIT licensed version is a stronger alternative to [plain data tables](/material-ui/react-table/#sorting-amp-selecting).
It's a clean abstraction with basic features like editing, pagination, sorting and filtering single columns, and column groups.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

```js
import { DataGrid } from '@mui/x-data-grid';
```

{{"demo": "DataGridDemo.js", "defaultCodeOpen": false, "bg": "inline"}}

## Commercial versions
## Commercial licenses

The commercial versions are available in the form of two plans: Pro and Premium.
The commercially licensed versions are available in two plans: Pro and Premium.

### Pro plan [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Pro version includes and extends the features available in the MIT version to support more complex use cases. It adds new features like advanced filtering, column pinning, column and row reordering, support for tree data, and virtualization to handle bigger datasets.
The Pro plan includes and extends the features available in the MIT version to support more complex use cases.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
It adds new features like advanced filtering, column pinning, column and row reordering, support for tree data, and virtualization to handle bigger datasets.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

The following grid displays 31 columns and 100,000 rows - over 3 million cells in total.
The demo below displays 31 columns and 100,000 rowsover 3 million cells in total.

```js
import { DataGridPro } from '@mui/x-data-grid-pro';
Expand All @@ -51,11 +55,12 @@ import { DataGridPro } from '@mui/x-data-grid-pro';

### Premium plan [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

The Premium version includes everything from Pro, as well as advanced features for data analysis and large dataset management, like row grouping with aggregation functions (for example "Sum") and the ability to export to Excel files.
The Premium plan includes everything from Pro, as well as advanced features for data analysis and large dataset management, like row grouping with aggregation functions (for example "Sum") and the ability to export to Excel files.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

You can visit the [showcase page](/x/react-data-grid/demo/) for a comprehensible overview of all features exclusive to this plan.
Visit the [showcase page](/x/react-data-grid/demo/) for a comprehensible overview of all features exclusive to this plan.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

The demo below groups rows by commodity name, and uses an aggregation function to calculate the sum of quantities for each group and in total (displayed on a summary row). You can experiment with grouping other columns in the columns' header menus.
The demo below groups rows by commodity name, and uses an aggregation function to calculate the sum of quantities for each group and in total (displayed on a summary row).
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
You can experiment with grouping other columns in the columns' header menus.

And since you're here, try exporting to Excel and copying and pasting data from-to Excel tables.

Expand Down Expand Up @@ -98,7 +103,8 @@ Please see [the Licensing page](/x/introduction/licensing/) for details.

### Upcoming features 🚧

While the development of the data grid component is moving fast, there are still many additional features that we plan to implement. Some of them:
While the Data Grid development moves fast, there are still many features we plan to implement.
Here are some of them:
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

- Headless (hooks only)
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
- [Pivoting](/x/react-data-grid/pivoting/) <span class="plan-premium"></span>
Expand All @@ -108,12 +114,12 @@ You can find more details on, the [feature comparison](/x/react-data-grid/gettin

## Resources

Here are some resources you might be interested in to learn more about the data grid:
Here are some resources to learn more about the Data Grid:

- The [source on GitHub](https://github.com/mui/mui-x/tree/HEAD/packages/)
- The [Material Design specification](https://m2.material.io/components/data-tables) specification
- The accessibility [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)
- The Figma, Adobe XD, and Sketch [design kits](https://mui.com/design-kits/).
- The [source code on GitHub](https://github.com/mui/mui-x/tree/HEAD/packages/)
- The [Material Design](https://m2.material.io/components/data-tables) specification
- The [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) accessibility reference
- The [Material UI Design Kits](https://mui.com/design-kits/), available for Figma, Adobe XD, and Sketch

## API

Expand Down