[DataGrid] New Toolbar component #14611
Conversation
KenanYusuf
added
component: data grid
|
Deploy preview: https://deploy-preview-14611--material-ui-x.netlify.app/ Updated pages: |
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
removed
the
PR: out-of-date
| --- | ||
| title: React Data Grid - Toolbar component | ||
| productId: x-data-grid | ||
| components: ToolbarRoot, ToolbarButton |
There was a problem hiding this comment.
This adds API links to the bottom of the page. Waiting on mui/material-ui#44992 to be released & upgraded on X docs before these will work.
| @@ -0,0 +1,94 @@ | |||
| # Data Grid - Components | |||
There was a problem hiding this comment.
@samuelsycamore keen to get your thoughts on the structure/contents of the new "Components" section. In summary:
- We are introducing some new composable components to the Data Grid to help users to extend the data grid.
- The composition and customization APIs are slightly different to what Data Grid and Material UI users are used to, which is why I have included this "Overview" page (maybe "Usage" would be a better name?) to explain some of the new concepts.
There was a problem hiding this comment.
+1 for naming this page Usage since we already have Overview pages elsewhere that serve a different purpose.
There was a problem hiding this comment.
here's an incomplete review of the docs—great job overall @KenanYusuf! As I dug deeper I realized there was a lot of repeated copy in which my notes from one doc would also apply to the others, so I'll leave it to you incorporate it across the board and then I'll be happy to give this a full review.
| The default elements can be replaced using the `render` prop. See [Grid components—Customization](/x/react-data-grid/components/overview/#customization). | ||
|
|
||
| See the [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example. |
There was a problem hiding this comment.
- passive –> active and imperative ("Use X to achieve Y result" is usually the preferred structure for this kind of sentence in our docs)
- I don't love the back-to-back links but I think we can get away with it by combining them into one sentence
| The default elements can be replaced using the `render` prop. See [Grid components—Customization](/x/react-data-grid/components/overview/#customization). | |
| See the [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example. | |
| Use the `render` prop to replace default elements. | |
| See [Grid components—Customization](/x/react-data-grid/components/overview/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example. |
There was a problem hiding this comment.
The fact that we need to link to two different docs here makes me think that this section ought to be fleshed out more to avoid this. Maybe not necessary for this PR but worth circling back to later.
There was a problem hiding this comment.
The fact that we need to link to two different docs here makes me think that this section ought to be fleshed out more to avoid this
Right, there will be a lot more to show here once the Column Panel component has been built. Right now, it feels a bit much to include a demo of customizing just the trigger, but that's open to debate.
| <Export.Excel /> | ||
| ``` | ||
|
|
||
There was a problem hiding this comment.
Same for the other components on this page
|
|
||
| ## Recipes | ||
|
|
||
| Below are some ways the Export component can be used. | ||
|
|
There was a problem hiding this comment.
This feels unnecessary given that there's only one demo. I would cut it and just go straight from ## Excel to ### Toolbar export menu
There was a problem hiding this comment.
This feels unnecessary given that there's only one demo
Yeah, fair point. I was trying to create a structure that works across all of the component pages, some of which will have multiple recipes. Probably not necessary though.
There was a problem hiding this comment.
Ah I see, if it's helpful on other pages then I'm all for it—I'd rather see consistency across similar pages, so the reader knows exactly what to expect as they move between them.
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: