[data grid] Same column in different column groups

[MiraHariri]

The problem in depth

I have data:

data = [
  {
    id: "1",
    cost_2022: "20",
    variation_2022_2023: "10",
    cost_2023: "30",
    variation_2023_2024: "20",
    cost_2024: "50",
  },
  {
    id: "2",
    cost_2022: "10",
    variation_2022_2023: "20",
    cost_2023: "30",
    variation_2023_2024: "10",
    cost_2024: "40",
  },
];

I want to create groups:

group = [
  {
    groupId: "2022_2023",
    headerName: "2022 - 2023 Variation",
    children: [
      { field: "cost_2022" },
      { field: "variation_2022_2023" },
      { field: "cost_2023" },
    ],
  },
  {
    groupId: "2023_2024",
    headerName: "2023 - 2024 Variation",
    children: [
      { field: "cost_2023" },
      { field: "variation_2023_2024" },
      { field: "cost_2024" },
    ],
  },
];

where the field "cost_2023" exists in both groups

How is this doable?

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Duplicate column group
Order ID: 78698

[michelengelen]

Hey @MiraHariri ... what component are you referring to? TreeView?

And could you please provide a minimal live example? That would help us a lot in understanding your problem! Thanks! 🙇🏼

[MiraHariri]

@michelengelen I'm referring to columnGroupingModel

<DataGridPremium
  apiRef={apiRef}
  rows={[
    {
      id: "1",
      cost_2022: "20",
      variation_2022_2023: "10",
      cost_2023: "30",
      variation_2023_2024: "20",
      cost_2024: "50",
    },
    {
      id: "2",
      cost_2022: "10",
      variation_2022_2023: "20",
      cost_2023: "30",
      variation_2023_2024: "10",
      cost_2024: "40",
    },
  ]}
  columns={[
    {
      headerName: "ID",
      field: "id",
    },
    {
      headerName: "Cost 2022",
      field: "cost_2022",
    },
    {
      headerName: "Variation 2022 2023",
      field: "variation_2022_2023",
    },
    {
      headerName: "Cost 2023",
      field: "cost_2023",
    },
    {
      headerName: "Variation 2023 2024",
      field: "variation_2023_2024",
    },
    {
      headerName: "Cost 2024",
      field: "cost_2024",
    },
  ]}
  columnGroupingModel={[
    {
      groupId: "2022_2023",
      headerName: "2022 - 2023 Variation",
      children: [
        { field: "cost_2022" },
        { field: "variation_2022_2023" },
        { field: "cost_2023" },
      ],
    },
    {
      groupId: "2023_2024",
      headerName: "2023 - 2024 Variation",
      children: [
        { field: "cost_2023" },
        { field: "variation_2023_2024" },
        { field: "cost_2024" },
      ],
    },
  ]}
/>;

I have the field `cost_2023' is duplicated in the 2 groups

This returned an error that a field can't be in multiple groups

Is there a way to achieve this? or a workaround?

[michelengelen]

Hi @MiraHariri ... as the docs state:

:warning: a column can only be associated with one group

So, this is not possible and I am not aware of any workarounds for this. The only thing that you could do is probably duplicate that column, but from the structure of your data I would guess this can get out of hand if you scale this up, right?

[MiraHariri]

Okay, yes I had this option to duplicate data with different column names in mind, and it is doable. But thought if there is a way from the table would be better

Thank you @michelengelen

[michelengelen]

Yeah ... it would have been better. If we can help you with anything else please feel free to open up a new issue! Thanks! 🙇🏼

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @MiraHariri?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[michelengelen]

Hi @MiraHariri ... well, we can definitely improve on this. On the other hand a built-in solution should be preferred. I will try to improve the workaround, but also add this to the board for the team to build a more profound solution. 💪🏼

[michelengelen]

Sry, this is the wrong issue ... the original issue was #12222 ... closing this again