[DataGrid] Transpose columns into rows

[jasonsturges]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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

Motivation 🔦

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

Order ID 💳 (optional)

No response

[m4theushw]

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.

[jasonsturges]

@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]

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.

[aimad-majdou]

Hello, any updates on this ?

[davidnir1]

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

[cherniavskii]

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 https://github.com/mui/mui-x/issues/214 - maybe this is what you're looking for? Thanks!

[shahamran]

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]

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

[stevstrong]

https://github.com/mui/mui-x/issues/3285#issuecomment-984855059

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]

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