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

[data grid] View rows side-by-side in List View. #15726

Open
TheOneTheOnlyJJ opened this issue Dec 4, 2024 · 3 comments
Open

[data grid] View rows side-by-side in List View. #15726

TheOneTheOnlyJJ opened this issue Dec 4, 2024 · 3 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: List view Related to the data grid liist view feature new feature New feature or request waiting for 👍 Waiting for upvotes

Comments

@TheOneTheOnlyJJ
Copy link

TheOneTheOnlyJJ commented Dec 4, 2024

Summary

I want to be able to view Data Grid rows side-by-side in List View mode. This would allow me to better illustrate rows that emphasize an image rather than the data itself while getting all the pagination/filtering benefits of the Data Grid.

Examples

GridView
This image illustrates exactly what I'm trying to achieve.
Instead of "Product" I would have Cards with dynamic content based on the data.

Motivation

While the List View mode allows placing more emphasis on the individual rows, I would like to place more of these emphasized rows in a single view while maintaining the versatility of the List View. My target devices are desktops, and having List View rows stretch the entire screen is a waste of space.
The best solution would be to have List View rows side-by-side in a grid pattern, like in the image above.

If there are already ways to solve this, please point me to them.

Search keywords: data grid list view rows side by

@TheOneTheOnlyJJ TheOneTheOnlyJJ added new feature New feature or request status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 4, 2024
@michelengelen
Copy link
Member

The overall purpose of the list view is to make the grid data be accessible for mobile devices. If you are targeting desktop devices you should probably try a different component like the ImageList.

@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information feature: List view Related to the data grid liist view feature and removed new feature New feature or request status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 4, 2024
@michelengelen michelengelen changed the title View rows side-by-side in Data Grid List View. [data grid] View rows side-by-side in Data Grid List View. Dec 4, 2024
@michelengelen michelengelen changed the title [data grid] View rows side-by-side in Data Grid List View. [data grid] View rows side-by-side in List View. Dec 4, 2024
@TheOneTheOnlyJJ
Copy link
Author

The overall purpose of the list view is to make the grid data be accessible for mobile devices. If you are targeting desktop devices you should probably try a different component like the ImageList.

The docs are not clear about supporting Card as ImageListItem components.
Also, there is no built-in pagination, sorting or filtering on the ImageList.
I've opened this issue with this example in mind, as this is the design I'm aiming for. The utility of allowing more columns to be displayed for larger screens would be great.

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 4, 2024
@michelengelen
Copy link
Member

All right ... I will handle this as a feature request then! 👍🏼

@michelengelen michelengelen added new feature New feature or request waiting for 👍 Waiting for upvotes and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 4, 2024
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Dec 4, 2024
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! feature: List view Related to the data grid liist view feature new feature New feature or request waiting for 👍 Waiting for upvotes
Projects
Status: 🆕 Needs refinement
Development

No branches or pull requests

2 participants