[DataGrid] New Toolbar component #14611

KenanYusuf · 2024-09-13T15:06:43Z

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

Data Grid - Components

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:

Explore having an "overflow menu" for items that do not fit on the toolbar
Replace custom toolbar with the new experimental toolbar in the list view demo [DataGrid] List View #14393
Add toolbar-specific background color theme override/css variable
Anchor filter panel and columns panel to triggers
Row grouping toolbar demo
[data grid] Add indication (badge) to GridToolbarColumnsButton #8765
Component state documentation [DataGrid] New Toolbar component #14611 (comment)
Update prop descriptions for extended Material UI components [DataGrid] New Toolbar component #14611 (comment)
Use QuickFilter components in GridToolbarQuickFilter

mui-bot · 2024-09-13T15:10:25Z

Deploy preview: https://deploy-preview-14611--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 1756f26

github-actions · 2024-10-18T17:38:52Z

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

mapache-salvaje

this is mostly repetitive and minor style stuff—the bulk of the content is in great shape.

docs/data/data-grid/components/columns-panel/columns-panel.md

mapache-salvaje · 2025-02-25T16:11:50Z

docs/data/data-grid/components/components.md

@@ -50,6 +50,13 @@ As mentioned above, the column menu is a component slot that can be recomposed e

 ### Toolbar

+:::warning
+
+The examples below use the `<GridToolbar />`, `<GridToolbarContainer />`, and various toolbar button components.


solid example of the component case in action - this text could be harder to understand if it was plain text 👍

mapache-salvaje · 2025-02-25T16:22:37Z

docs/translations/api-docs/data-grid/columns-panel-trigger/columns-panel-trigger.json

+    "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "disableElevation": { "description": "If <code>true</code>, no elevation is used." },
+    "disableFocusRipple": {
+      "description": "If <code>true</code>, the  keyboard focus ripple is disabled."


Suggested change

"description": "If <code>true</code>, the keyboard focus ripple is disabled."

"description": "If <code>true</code>, the keyboard focus ripple is disabled."

mapache-salvaje · 2025-02-25T16:23:31Z

docs/translations/api-docs/data-grid/columns-panel-trigger/columns-panel-trigger.json

+      "description": "The component used to render a link when the <code>href</code> prop is provided."
+    },
+    "onFocusVisible": {
+      "description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."


Suggested change

"description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."

"description": "Callback fired when the component is focused with a keyboard. Also triggers an <code>onFocus</code> callback."

mapache-salvaje · 2025-02-25T16:24:25Z

docs/translations/api-docs/data-grid/columns-panel-trigger/columns-panel-trigger.json

+    },
+    "startIcon": { "description": "Element placed before the children." },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."


Suggested change

"description": "The system prop that allows defining system overrides as well as additional CSS styles."

"description": "The system prop for defining system overrides and additional CSS styles."

docs/translations/api-docs/data-grid/toolbar-button/toolbar-button.json

mapache-salvaje · 2025-02-25T16:26:38Z

docs/translations/api-docs/data-grid/toolbar-button/toolbar-button.json

+      "description": "The component used to render a link when the <code>href</code> prop is provided."
+    },
+    "onFocusVisible": {
+      "description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."


Suggested change

"description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."

"description": "Callback fired when the component is focused with a keyboard. Also triggers an <code>onFocus</code> callback."

Thanks for the suggestions on these . The remaining suggestions are prop descriptions that are being generated from the Material UI components they extend. I will add a follow-up item to update these at the source.

packages/x-data-grid/src/hooks/utils/useGridComponentRenderer.tsx

cherniavskii · 2025-02-27T12:29:48Z

docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js

+        <ColumnsPanelTrigger render={<ToolbarButton />}>
+          <ViewColumnIcon fontSize="small" />
+        </ColumnsPanelTrigger>


Are these 2 snippets equal?

<ColumnsPanelTrigger render={<ToolbarButton />}> <ViewColumnIcon fontSize="small" /> </ColumnsPanelTrigger>

<ColumnsPanelTrigger render={<ToolbarButton><ViewColumnIcon fontSize="small" /></ToolbarButton>} />

They are, it comes down to preference. Do you think it's worth documenting this on the usage page?

Yes, I think it's worth clarifying that children are automatically passed to the render element. Otherwise, it might be a bit "magical" for an average user 😅

Mentioned it here - let me know how that sounds.

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>

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

That's a reason to pass a function to the render prop. The other case is to merge functionality and change the element rendered by a component.

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

In this example, no. The <ColumnsPanelTrigger /> and <ToolbarButton /> both render a <button />, so you would end up with this:

<button> <button> <svg /> </button> </button>

By using the render prop like: <ColumnsPanelTrigger render={<ToolbarButton />}><ViewColumnIcon /></ColumnsPanelTrigger>, the styled button element rendered by <ToolbarButton /> is the only element that gets rendered but with the merged attributes from both elements:

<button> <svg /> </button>

I will update the usage doc to try to explain this better.

I've made some updates to the Usage doc. Let me know if there's anything that could be clarified further.

test/regressions/index.test.ts

packages/x-data-grid/src/components/quickFilter/QuickFilter.tsx

docs/translations/api-docs/data-grid/toolbar-button/toolbar-button.json

packages/x-data-grid/src/components/filterPanel/FilterPanelTrigger.tsx

scripts/x-data-grid-premium.exports.json

Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Signed-off-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>

arminmeh · 2025-02-27T17:03:19Z

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

MBilalShafi · 2025-02-27T18:31:48Z

packages/x-data-grid-premium/src/components/export/ExportExcel.tsx

+  },
+);
+
+ExportExcel.propTypes = {


Sidenote: Should we stop generating propTypes for new components since they are already deprecated and on a path to being removed in subsequent React versions?

I think that at this point, the CI would complain. For me it is fine if it is done together whit other propTypes being removed

Should we stop generating propTypes for new components

I think they are required for API docs generation too currently.

@KenanYusuf Correct

MBilalShafi · 2025-02-27T19:25:28Z

docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js

+        <ColumnsPanelTrigger render={<ToolbarButton />}>
+          <ViewColumnIcon fontSize="small" />
+        </ColumnsPanelTrigger>


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>

packages/x-data-grid/src/components/toolbarV8/Toolbar.tsx

KenanYusuf added 4 commits September 13, 2024 15:39

[DataGrid] Experimental toolbar

658c881

fix build

cbf114e

codegen

a363c4b

Merge branch 'master' into experimental-toolbar

a789cec

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

KenanYusuf added 8 commits September 13, 2024 16:17

fix import

94cf2db

anchor grid panel to filter/columns buttons

dfcae22

export GridToolbarV8

ed540c5

popover slot

370af60

animate filter and columns panels

0a57490

fix panel animation transform origin

ef8f266

Merge branch 'master' into experimental-toolbar

a96e5fc

improve composition

b1d2eb2

This was referenced Oct 16, 2024

[DataGrid] List View #14393

Merged

[data grid] List view implementation improvements #14997

Open

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 18, 2024

Merge branch 'master' into experimental-toolbar

9e84da1

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

KenanYusuf added 8 commits November 1, 2024 15:26

export parts

cf939e9

update column icon

b7c8f44

update density item

76ba05e

Merge branch 'master' into experimental-toolbar

e7ed369

docs

206faaa

Merge branch 'mui:master' into experimental-toolbar

cfee71e

GridToolbarButton

fe3f01d

docs concept

2c7b3c8

Merge branch 'master' into experimental-toolbar

581940d

KenanYusuf requested review from mapache-salvaje and a team February 25, 2025 11:55

cherniavskii mentioned this pull request Feb 25, 2025

[data grid] Improve the filtering panel UX #6419

Open

mapache-salvaje reviewed Feb 25, 2025

View reviewed changes

KenanYusuf and others added 2 commits February 25, 2025 16:48

copy updates

7380c84

Merge branch 'master' into experimental-toolbar

561df77

cherniavskii reviewed Feb 27, 2025

View reviewed changes

packages/x-data-grid/src/hooks/utils/useGridComponentRenderer.tsx Outdated Show resolved Hide resolved

cherniavskii reviewed Feb 27, 2025

View reviewed changes

test/regressions/index.test.ts Outdated Show resolved Hide resolved

cherniavskii reviewed Feb 27, 2025

View reviewed changes

packages/x-data-grid/src/components/quickFilter/QuickFilter.tsx Outdated Show resolved Hide resolved

cherniavskii reviewed Feb 27, 2025

View reviewed changes

docs/translations/api-docs/data-grid/toolbar-button/toolbar-button.json Show resolved Hide resolved

arminmeh reviewed Feb 27, 2025

View reviewed changes

packages/x-data-grid/src/components/filterPanel/FilterPanelTrigger.tsx Show resolved Hide resolved

arminmeh reviewed Feb 27, 2025

View reviewed changes

scripts/x-data-grid-premium.exports.json Outdated Show resolved Hide resolved

KenanYusuf and others added 10 commits February 27, 2025 13:58

Update packages/x-data-grid/src/hooks/utils/useGridComponentRenderer.tsx

4844209

Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Signed-off-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>

use tailwind script from unpkg.com

51f4b63

remove tailwind scripts and styles on unmount

a611325

update error message

f7b1915

make useGridComponentRenderer private

7b016cf

simplify type

07fc89e

docs

456a5f9

Merge branch 'master' into experimental-toolbar

ea49f71

sync quick filter models

6398a67

fix tw demo styles

eae23b1

arminmeh approved these changes Feb 27, 2025

View reviewed changes

fix race condition in TailwindDemoContainer

b582ff3

MBilalShafi reviewed Feb 27, 2025

View reviewed changes

KenanYusuf added 2 commits February 28, 2025 12:16

docs

fc25f34

Merge branch 'master' into experimental-toolbar

1756f26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] New Toolbar component #14611

[DataGrid] New Toolbar component #14611

KenanYusuf commented Sep 13, 2024 •

edited

Loading

mui-bot commented Sep 13, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024

mapache-salvaje left a comment

mapache-salvaje Feb 25, 2025

mapache-salvaje Feb 25, 2025

mapache-salvaje Feb 25, 2025

mapache-salvaje Feb 25, 2025

mapache-salvaje Feb 25, 2025

KenanYusuf Feb 27, 2025

cherniavskii Feb 27, 2025

KenanYusuf Feb 27, 2025

cherniavskii Feb 27, 2025

KenanYusuf Feb 27, 2025

MBilalShafi Feb 27, 2025

KenanYusuf Feb 28, 2025 •

edited

Loading

KenanYusuf Feb 28, 2025

arminmeh commented Feb 27, 2025

MBilalShafi Feb 27, 2025

arminmeh Feb 28, 2025

KenanYusuf Feb 28, 2025

cherniavskii Feb 28, 2025

MBilalShafi Feb 27, 2025

	"description": "If <code>true</code>, the keyboard focus ripple is disabled."
	"description": "If <code>true</code>, the keyboard focus ripple is disabled."

	"description": "Callback fired when the component is focused with a keyboard. We trigger a <code>onFocus</code> callback too."
	"description": "Callback fired when the component is focused with a keyboard. Also triggers an <code>onFocus</code> callback."

	"description": "The system prop that allows defining system overrides as well as additional CSS styles."
	"description": "The system prop for defining system overrides and additional CSS styles."

[DataGrid] New Toolbar component #14611

Are you sure you want to change the base?

[DataGrid] New Toolbar component #14611

Conversation

KenanYusuf commented Sep 13, 2024 • edited Loading

mui-bot commented Sep 13, 2024 • edited Loading

github-actions bot commented Oct 18, 2024

mapache-salvaje left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KenanYusuf Feb 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arminmeh commented Feb 27, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KenanYusuf commented Sep 13, 2024 •

edited

Loading

mui-bot commented Sep 13, 2024 •

edited

Loading

KenanYusuf Feb 28, 2025 •

edited

Loading