A fast and extendable react data table and react data grid. It's a feature-rich component available in MIT or Commercial versions.
+A fast and extendable React data table and React data grid. It's a feature-rich component available with MIT or commercial licenses.
-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 Data Grid component is built with React and TypeScript to provide a smooth UX for manipulating an unlimited set of data. +It features an intuitive API for real-time updates as well as theming and custom templates—all with blazing-fast performance. {{"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 interface for efficient editing, reviewing, and analysis. + :::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) -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 (also referred to as the "Community 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, column grouping, and single-column sorting and filtering. ```js import { DataGrid } from '@mui/x-data-grid'; @@ -33,15 +36,16 @@ 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 [](/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 extends the features available in the Community version to support more complex use cases. +It adds features like advanced filtering, column pinning, column and row reordering, support for tree data, and virtualization to handle bigger datasets. -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 rows—over 3 million cells in total. ```js import { DataGridPro } from '@mui/x-data-grid-pro'; @@ -51,11 +55,12 @@ import { DataGridPro } from '@mui/x-data-grid-pro'; ### Premium plan [](/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 (such as sum and average) and the ability to export to Excel files. -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 comprehensive overview of all features exclusive to this plan. -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 in a summary row). +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. @@ -98,9 +103,9 @@ 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: +Planned features include: -- Headless (hooks only) +- Headless implementation (hooks only) - [Pivoting](/x/react-data-grid/pivoting/) - [Charts integration](/x/react-charts/) @@ -108,12 +113,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 diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md index 387e733d621f3..2977168121811 100644 --- a/docs/data/introduction/support/support.md +++ b/docs/data/introduction/support/support.md @@ -40,7 +40,7 @@ You can browse the documentation, find an example close to your use case, and th -- [Data Grid](/x/react-data-grid/#mit-version-free-forever) +- [Data Grid](/x/react-data-grid/#mit-license-free-forever) - [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component) - [Charts](/x/react-charts/getting-started/#single-charts) - [Tree View](/x/react-tree-view/#simple-tree-view)