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

[docs] Document grouping, aggregation within the pro plan #3453

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all 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
11 changes: 10 additions & 1 deletion docs/data/toolpad/studio/components/data-grid/DataGridPro.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,16 @@ const COLUMNS = [
export default function DataGridPro() {
return (
<AppHostProvider plan="pro">
<DataGrid rows={ROWS} columns={COLUMNS} height={300} />
<DataGrid
rows={ROWS}
columns={COLUMNS}
height={300}
initialState={{
rowGrouping: {
model: ['Location'],
},
}}
/>
</AppHostProvider>
);
}
17 changes: 11 additions & 6 deletions docs/data/toolpad/studio/components/data-grid/data-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,17 @@ From the `type` drop down you can also [customize a column](/toolpad/studio/how-
Your browser does not support the video tag.
</video>

### Grouping and aggregating (Pro)

When you use the Toolpad [pro plan](/toolpad/studio/getting-started/roadmap/#pro-plan), the DataGrid gains grouping and aggregating capabilities. You can turn this off for individual columns.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
If you have [X Premium license](https://mui.com/x/introduction/licensing/#premium-plan), then you can use this feature inside Toolpad Studio through a custom component. Check out this [example](https://github.com/mui/mui-toolpad/tree/master/examples/datagrid-premium) for more.

<video controls width="100%" height="auto" style="contain" alt="datagrid-columns">
<source src="/static/toolpad/docs/studio/components/datagrid/datagrid_grouping.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

{{"demo": "DataGridPro.js", "hideToolbar": true, "bg": "inline"}}

### Id field

Id field property is used to identify which column contains the id column. By default, the data grid looks for a property named `id` in the data set to get that identifier. If the row's identifier is not called `id`, then you need to use this prop to tell the data grid where it's located.
Expand Down Expand Up @@ -73,12 +84,6 @@ This prop is used to show – or hide – the toolbar from the data grid. The fo

{{"demo": "DataGridHideToolbar.js", "hideToolbar": true, "bg": "inline"}}

### Grouping and aggregating (PRO)

When you use the [Toolpad pro plan](/), the DataGrid gains grouping and aggregating capabilities. You can turn this off for individual columns.

{{"demo": "DataGridPro.js", "hideToolbar": true, "bg": "inline"}}

## API

See the documentation below for a complete reference to all props available to the datagrid component in Toolpad Studio.
Expand Down
13 changes: 12 additions & 1 deletion docs/data/toolpad/studio/getting-started/roadmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ The roadmap does not represent a commitment, obligation, or promise to deliver a

To learn more about our plans for Material UI in general, visit the [global roadmap](/material-ui/discover-more/roadmap/).

## Paid Plan
## Pro Plan

A few features in Toolpad Studio are proposed to be placed under a paid plan. These:

Expand All @@ -32,6 +32,17 @@ The following features are currently planned to be included within this scope:

Features allowing you to grant conditional access to pages based on user roles are part of this proposed paid plan. Read more about this feature on [authorization](/toolpad/studio/concepts/rbac/).

- ### Grouping and Aggregation

Feature which allows you to configure grouping and aggregation features on the data grid through visual controls. Read more about this feature on the [data grid](/toolpad/studio/components/data-grid/#grouping-and-aggregating-pro) page.

:::info
The following Pro features are included with an [X Premium license](https://mui.com/x/introduction/licensing/#premium-plan):
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not implemented at the moment

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should remove the info section from here and instead let users read everything about grouping and aggregation from the data grid page, as suggested here: https://github.com/mui/mui-toolpad/pull/3453/files#r1580645306

Copy link
Member Author

@bharatkashyap bharatkashyap Apr 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll create an issue asking for upvotes about whether we should make the aggregating and grouping feature auto-available in the built-in data grid if a user already has an X Premium license.

#3481


- **Grouping and Aggregation**

:::

## How to upgrade

Currently, accessing these features requires you to add the following to your `application.yml`:
Expand Down
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ function GridColumnEditor({
Grouping/aggregation
<UpgradeChip
sx={{ ml: 1 }}
url="https://mui.com/toolpad/studio/components/data-grid/#grouping"
url="https://mui.com/toolpad/studio/components/data-grid/#grouping-and-aggregating-pro"
/>
</Typography>
)}
Expand Down
Loading