Skip to content

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 scope: data grid Changes related to the data grid. 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
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 scope: data grid Changes related to the data grid. type: new feature Expand the scope of the product to solve a new problem.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Improved Toolbar
8 participants