[DataGrid] How to have a column have different data types. In effect, flipping (transposing) the functionality of rows and columns

[7ruth]

The problem in depth

I would like to be able to have different data types in a single column, because my first column will list rows with each having a different data type and definitions and each new column will be a new version across time. Something like a financial income statement over different annual period. Here is an example of a table I have in mind, is this possible?

Col 1.     Col 2.    Col 3.    Col 4.   Col 5.
Year.      2024.    2023.    2022.   Change

Unit 1       50.        30.         15         35+
Unit 2       50.        20.        10.         40+
Sales.       100.      50.        25.         75+

Spread.    3.4%.    3.2%.    3.1%.    .3%
Structure  1-2.       2-1.       4-3.       - 
Base       Market. $312.     $231.    - 

Thank you for your help!

Your environment

`npx @mui/envinfo`

Using Brave browser

 System:
    OS: macOS 13.5
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 9.6.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 120.0.6099.199
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.7.1 => 11.10.4
    @emotion/styled: ^11.6.0 => 11.10.4
    @mui/base:  5.0.0-alpha.99
    @mui/core-downloads-tracker:  5.11.0
    @mui/icons-material: ^5.2.5 => 5.10.6
    @mui/lab: ^5.0.0-alpha.70 => 5.0.0-alpha.101
    @mui/material: ^5.2.6 => 5.10.7
    @mui/private-theming:  5.11.0
    @mui/styled-engine:  5.11.0
    @mui/styles: ^5.2.3 => 5.10.7
    @mui/system:  5.11.0
    @mui/types:  7.2.12
    @mui/utils:  5.15.3
    @mui/x-data-grid: ^5.17.8 => 5.17.9
    @mui/x-data-grid-generator: ^6.18.6 => 6.18.6
    @mui/x-data-grid-premium: ^5.17.9 => 5.17.9
    @mui/x-data-grid-pro:  5.17.9
    @mui/x-date-pickers: ^5.0.3 => 5.0.3
    @mui/x-license-pro: ^5.17.0 => 5.17.0
    @types/react:  18.0.21
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    styled-components: ^5.2.0 => 5.3.6

Search keywords: Datagrid, how to have rows serve as columns
Order ID: 12849

[michelengelen]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. This codesandbox.io template may be a good starting point. You can find more codesandbox templates in our docs.

Thank you! 🙇🏼

[7ruth]

Thats the problem, I can't find a way to implement what I want using the DataGrid and I am asking if it feasible since you are the product experts. I found a related issue after more research, is this still not possible: #3285

[michelengelen]

Well ... I am not sure if thats possible. Will have a look later, but in the meantime: Did you try reversing the structure?

From this:

Col 1	Col 2	Col 3	Col 4	Col 5
Year	2024	2023	2022	Change
Unit 1	50	30	15	35+
Unit 2	50	20	10	40+
Sales	100	50	25	75+
Spread	3.4%	3.2%	3.1%	0.3%
Structure	1-2	2-1	4-3	-
Base	Market	$312	$231	-

To this:

	Year	Unit 1	Unit 2	Sales	Spread	Structure	Base
Row 1	2024	50	50	100	3.4%	1-2	Market
Row 2	2023	30	20	50	3.2%	2-1	$312
Row 3	2022	15	10	25	3.1%	4-3	$231
Change	-	35+	40+	75+	0.3%	-	-

Where Change can be an aggregation row

Would that help?

[7ruth]

Thank you for your response. While your solution can be implemented, it won't fit my requirements unfortunately, our users are used to a specific format and I need to replicate it to communicate important financial information to them.

Deviation from that format will require re-educating a lot of internal and external users and would lead to operational issues where any potential misunderstandings will have huge fallout effects (someone making a wrong decision with a large financial impact based on information that they didn't understand correctly due to format).

Sounds like I might have to try and squeeze more out of the table component, and feature-full datagrid component would have yielded a nicer end product. Thank you for taking a look!

[michelengelen]

Ok, I will check if this is possible in a way.

[joserodolfofreitas]

The use case you mentioned looks like table pivoting (#214), @7ruth.
We aim to deliver it in the next couple of months on the Premium plan.

[cherniavskii]

Hey @7ruth
You can also explore the pivoting PoC in #9877 to have an idea how it could work and if it applies to your use case.

One thing to note here is that Data Grid does not support columns with different data types.
The reason for this is that we need values of the same type for sorting, filtering, and aggregation to work as expected.
This is not going to change in the foreseeable future.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.