Skip to content

[data grid] Add "No columns" overlay#16543

Merged
kenanyusuf merged 11 commits into
mui:masterfrom
kenanyusuf:no-columns-overlay
Feb 12, 2025
Merged

[data grid] Add "No columns" overlay#16543
kenanyusuf merged 11 commits into
mui:masterfrom
kenanyusuf:no-columns-overlay

Conversation

@kenanyusuf

@kenanyusuf kenanyusuf commented Feb 11, 2025 •
edited
Loading

Copy link
Copy Markdown
Member

Closes #14396 and #14395

https://deploy-preview-16543--material-ui-x.netlify.app/x/react-data-grid/overlays/#no-columns-overlay

No columns

<DataGrid columns={[]} />

localhost_3001_playground_

No visible columns

Screenshot 2025-02-11 at 16 14 26

localhost_3001_playground_ (2)

Changelog

Breaking changes

  • The main--hasSkeletonLoadingOverlay class has been renamed to main--hiddenContent and is now also applied when the "No columns" overlay is displayed.

@kenanyusuf kenanyusuf added scope: data grid Changes related to the data grid. feature: Column visibility design This is about UI or UX design, please involve a designer. labels Feb 11, 2025
@mui-bot

mui-bot commented Feb 11, 2025 •
edited
Loading

Copy link
Copy Markdown

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

  • Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

    [l10n] Improve Swedish (sv-SE) locale
    [l10n] Add Danish (da-DK) locale

  • Update the documentation of supported locales by running pnpm l10n
  • Clean files with pnpm prettier.

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

Updated pages:

Generated by 🚫 dangerJS against d0764c6

@kenanyusuf
kenanyusuf marked this pull request as ready for review February 12, 2025 09:01
@kenanyusuf
kenanyusuf requested a review from a team February 12, 2025 09:02
@kenanyusuf kenanyusuf added breaking change Introduces changes that are not backward compatible. v8.x labels Feb 12, 2025
kenanyusuf
kenanyusuf commented Feb 12, 2025
View reviewed changes
Comment thread packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
role="row"
aria-rowindex={depth + 1}
ownerState={rootProps}
style={{ height: groupHeaderHeight }}

@kenanyusuf kenanyusuf Feb 12, 2025 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Not sure whether this could be classified as a breaking change or not. The height of the headers are applied to the header rows rather than header cells so that it does not collapse when there are no cells in it.

@arminmeh arminmeh Feb 12, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would say no, since it is a direct style and not class move
otherwise we would not be able to change anything

arminmeh
arminmeh reviewed Feb 12, 2025
View reviewed changes
Comment thread packages/x-data-grid/src/locales/hrHR.ts Outdated
Comment thread packages/x-data-grid/src/locales/hrHR.ts Outdated
Comment thread packages/x-data-grid/src/locales/nlNL.ts Outdated
Comment thread packages/x-data-grid/src/locales/nlNL.ts Outdated
Comment thread packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
role="row"
aria-rowindex={depth + 1}
ownerState={rootProps}
style={{ height: groupHeaderHeight }}

@arminmeh arminmeh Feb 12, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I would say no, since it is a direct style and not class move
otherwise we would not be able to change anything

Comment thread packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx
Comment thread packages/x-data-grid/src/components/containers/GridRootStyles.ts Outdated
kenanyusuf and others added 2 commits February 12, 2025 09:57
@kenanyusuf @arminmeh
Apply suggestions from code review
528d3c1 
Co-authored-by: Armin Mehinovic <[email protected]>
Signed-off-by: Kenan Yusuf <[email protected]>
@kenanyusuf
fix
4653e8e
@kenanyusuf kenanyusuf mentioned this pull request Feb 12, 2025
Merged
31 tasks
@kenanyusuf
kenanyusuf merged commit 9b36487 into mui:master Feb 12, 2025
@kenanyusuf
kenanyusuf deleted the no-columns-overlay branch February 12, 2025 15:09
@michelengelen michelengelen mentioned this pull request Jun 4, 2025
Closed
@mahirhir mahirhir mentioned this pull request Jun 29, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@arminmeh arminmeh arminmeh approved these changes

Assignees

No one assigned

Labels

breaking change Introduces changes that are not backward compatible. design This is about UI or UX design, please involve a designer. feature: Column visibility scope: data grid Changes related to the data grid. v8.x

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[data grid] Add "no visible columns" overlay

3 participants

@kenanyusuf @mui-bot @arminmeh