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] Improve data grid pageSizeOptions prop documentation #11682

Merged
merged 4 commits into from
Jan 14, 2024

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jan 14, 2024

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation component: data grid This is the name of the generic UI component, not the React module! labels Jan 14, 2024
@mui-bot
Copy link

mui-bot commented Jan 14, 2024

@oliviertassinari oliviertassinari added the feature: Pagination Related to the data grid Pagination feature label Jan 14, 2024
@oliviertassinari oliviertassinari changed the title [data grid][docs] Improve docs [data grid][docs] Improve pageSizeOptions docs Jan 14, 2024
@@ -11,14 +11,20 @@ By default, each page contains 100 rows. The user can change the size of the pag

### Page size options

You can configure the page size the user can choose from with the `pageSizeOptions` prop.
Copy link
Member Author

Choose a reason for hiding this comment

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

The first two sentences says the same thing.

You should either provide an array of:

- **numbers**, each number will be used for the option's label and value.

- **objects**, the `value` and `label` keys will be used respectively for the value and label of the option (useful for language strings such as 'All').
Copy link
Member Author

Choose a reason for hiding this comment

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

useful for language strings such as 'All'

is false information.

  <DataGrid pageSizeOptions={[{ value: -1, label: 'All' }]}>

Doesn't work

Copy link
Member

Choose a reason for hiding this comment

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

Interesting. Should we support this use case anyways? I wonder if it'd be solved better by turning pagination off rather than supporting it with pageSizeOptions.

You can configure the page size the user can choose from with the `pageSizeOptions` prop.

It's possible to customize the options shown in the "Rows per page" select using the `pageSizeOptions` prop.
You should either provide an array of:
Copy link
Member Author

@oliviertassinari oliviertassinari Jan 14, 2024

Choose a reason for hiding this comment

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

This is wrong, it's not Array<number> | Array<object> but Array<number | object>.

Signed-off-by: Olivier Tassinari <[email protected]>
@MBilalShafi MBilalShafi changed the title [data grid][docs] Improve pageSizeOptions docs [DataGrid][docs] Improve pageSizeOptions docs Jan 14, 2024
@MBilalShafi MBilalShafi changed the title [DataGrid][docs] Improve pageSizeOptions docs [docs] Improve data grid pageSizeOptions prop documentation Jan 14, 2024
@oliviertassinari oliviertassinari merged commit 86ac3d2 into mui:next Jan 14, 2024
17 checks passed
@oliviertassinari oliviertassinari deleted the pageSizeOptions branch January 14, 2024 23:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation feature: Pagination Related to the data grid Pagination feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants