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

[DataGrid] Transpose columns into rows #3285

Open
2 tasks done
jasonsturges opened this issue Nov 26, 2021 · 10 comments
Open
2 tasks done

[DataGrid] Transpose columns into rows #3285

jasonsturges opened this issue Nov 26, 2021 · 10 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request waiting for 👍 Waiting for upvotes

Comments

@jasonsturges
Copy link

jasonsturges commented Nov 26, 2021

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Summary 💡

Feature request to transpose the grid - reverse columns and rows.

Similar to pivot tables in #214, but just a matrix transform operation.

Changing from this:

Header 1 Header 2
A 1 B 1
A 2 B 2

...into this:

Header 1 A 1 A 2
Header 2 B 1 B 2

Examples 🌈

Spreadsheets such as Microsoft Excel have a similar notion of transposing columns into rows, such as here or here

image

image

Motivation 🔦

Stems from a discussion in #3282 where I hoped to use editable data grids for property panels, such as in Unity:

image

Order ID 💳 (optional)

No response

@jasonsturges jasonsturges added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 26, 2021
@m4theushw
Copy link
Member

Looking at the example you gave from Unity, couldn't your consider the param name as a column and the value as another column? It's basically reshaping the data to be rendered in a grid. The only thing missing is the ability to hide the headers.

@m4theushw m4theushw added support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 2, 2021
@jasonsturges
Copy link
Author

@m4theushw Yes, I originally convoluted this together in #3282, but cleaned that issue up to isolate hiding headers.

Here, I was thinking either:

  • Transpose / pivot / rotate table matrix to have columns as rows, which stacks headers in the first column
  • Introduce the idea of Row Headers, like some grids / spreadsheets have

But you're right, this could be a two-column key / value pair grid - logic for that might be a bit more obtuse to handle, as there seemed to be an elegance if the data model was expressed via Data Grid columns.

If this feature request of transposing columns to rows, or introducing row headers doesn't resonate with the roadmap of Material UI Data Grids, I'll understand - this might simply be outside the intended usage here.

@m4theushw m4theushw added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request waiting for 👍 Waiting for upvotes and removed support: question Community support but can be turned into an improvement labels Dec 3, 2021
@m4theushw
Copy link
Member

It's not in our roadmap, at least for now. I added the "waiting for 👍" label so other users with the same pain can upvote and we know if we should allocate time for it. The possibility of hiding the column headers is something we need to address.

@m4theushw m4theushw changed the title Transpose columns into rows [DataGrid] Transpose columns into rows Dec 3, 2021
@aimad-majdou
Copy link

Hello, any updates on this ?

@davidnir1
Copy link

Hello,
Was there any progress made on this?
Our users are driving us crazy asking for this :)

@cherniavskii
Copy link
Member

Hey @aimad-majdou @davidnir1,
Could you please provide more details on your use case?
What is your data format and why would you want to transpose it?
Also, you might want to take a look at the pivoting issue #214 - maybe this is what you're looking for?
Thanks!

@shahamran
Copy link

Hi @cherniavskii, I can share my use case if it helps.

I have data with much more "columns" (headers) than "rows" (data points). Also, the header text can be quite long. Since text is arbitrarily wide, but only as high as the font size, it's more efficient (in terms of information density) to stack the headers vertically.

Consider this table:

my very long column 1 my very long column 2 my very long column 3 ... my very long column N
0 1 2 ... N

this takes a lot of horizontal space, and will quickly need a scrollbar. But in this table:

my very long column 1 1
my very long column 2 2
... ...
my very long column N N

the same information is displayed in a much more compact form. This remains true as long as there aren't many data points (in which case horizontal scrolling feels unnatural).

Hope this is clear :)

Also, I'm open for alternative ideas.

@jasonsturges
Copy link
Author

Still interested in this - most simple example: pivot a column into a row in database query:

pivot

@stevstrong
Copy link

stevstrong commented May 6, 2024

#3285 (comment)

Looking at the example you gave from Unity, couldn't your consider the param name as a column and the value as another column? It's basically reshaping the data to be rendered in a grid.

@m4theushw or anyone else
I would really appreciate if you could give an example how to implement that.
Thanks in advance.

@MaximeDauphinot
Copy link

Hello, any news on it ? it would be awesome to possibly do this

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! new feature New feature or request waiting for 👍 Waiting for upvotes
Projects
Status: 🆕 Needs refinement
Development

No branches or pull requests

8 participants