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

[DataGrid] New Toolbar component #14611

Merged
merged 195 commits into from
Mar 3, 2025
Merged

Conversation

KenanYusuf
Copy link
Member

@KenanYusuf KenanYusuf commented Sep 13, 2024

Adds a redesigned Toolbar component through a new composition API, documented here:

There are several related components that users can use to build a custom toolbar:

Note

This PR only adds the building blocks to create custom toolbars, and documentation for those components. I'm hoping we can release these in v7 for users to try out. There will be a follow up to update the default grid toolbar for v8 to use the new components. #15823

Closes #11584


Follow-up tasks:

@KenanYusuf KenanYusuf added component: data grid This is the name of the generic UI component, not the React module! design This is about UI or UX design, please involve a designer proof of concept Studying and/or experimenting with a to be validated approach labels Sep 13, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 18, 2024
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 1, 2024
@arminmeh
Copy link
Contributor

Besides the latest open points LGTM
Really like the demos in the docs 💯

Comment on lines +16 to +18
<ColumnsPanelTrigger render={<ToolbarButton />}>
<ViewColumnIcon fontSize="small" />
</ColumnsPanelTrigger>
Copy link
Member

Choose a reason for hiding this comment

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

If I understood correctly, it makes more sense to use render prop if there's a need to access props or state.

<ColumnsPanelTrigger render={(props) => <ToolbarButton {...props} />}>
  <ViewColumnIcon fontSize="small" />
</ColumnsPanelTrigger>

Is it possible to skip the render prop for simple use cases?

<ColumnsPanelTrigger>
  <ToolbarButton>
    <ViewColumnIcon fontSize="small" />
  </ToolbarButton>
</ColumnsPanelTrigger>

@KenanYusuf KenanYusuf merged commit ad5f90d into mui:master Mar 3, 2025
16 checks passed
@KenanYusuf KenanYusuf deleted the experimental-toolbar branch March 3, 2025 11:21
@KenanYusuf KenanYusuf added the feature: Toolbar Related to the data grid Toolbar feature label Mar 18, 2025
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! customization: dom Component's DOM customizability, e.g. slot design This is about UI or UX design, please involve a designer feature: Toolbar Related to the data grid Toolbar feature new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Improved Toolbar
8 participants