[question] Can you manually adjust the height of the aggregation display row?

[nessj1994]

Order ID

70732

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I have a datagrid that has a column for total values (Second column from the right in the image below). I would like to aggregate those, but also apply some additional fees. I am hoping to display that data as MUI Typography components stacked on top of each other vertically. Here is an image of the bottom of my table with the aggregated values displayed

Note the blue text (ignore the values since I'm just arbitrarily using the same number to check if it would indeed get cut off) stacking and how it gets cut off. Is there a way I can manually increase the height of that generated row so that the text isn't cut off? Ideally something that doesn't require too much weird CSS hacking where I make edits by some random html class or ID outside of the datagrid customization / style logic. CSS hacks would work too though if necessary since any way to do it is better than nothing.

The primary reason I decided to do it via the aggregation row is that I hope to also have the values exported with the built in CSV / Excel export too. I'm not sure if that will function correctly the way I've set things up, but I can cross that bride when I get there.

Alternatively, I considered customizing the footer, but I also want things to line up with the total column cells. I didn't see a way to output data into a certain column via the footer. This way probably also prevents me from exporting though. I didn't see any documentation on how to include the footer in various export formats.

Any help is greatly appreciated on this.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1928.0), Chromium (115.0.1901.188)
  npmPackages:
    @emotion/react: ^11.10.0 => 11.10.0
    @emotion/styled: ^11.9.3 => 11.9.3
    @mui/base: ^5.0.0-alpha.91 => 5.0.0-alpha.91
    @mui/core-downloads-tracker:  5.10.17
    @mui/icons-material: ^5.10.16 => 5.10.16
    @mui/material: ^5.8.6 => 5.10.17
    @mui/private-theming:  5.10.16
    @mui/styled-engine:  5.10.16
    @mui/system:  5.10.17
    @mui/types:  7.2.2
    @mui/utils:  5.10.16
    @mui/x-data-grid:  6.10.0
    @mui/x-data-grid-premium: ^6.10.0 => 6.10.0
    @mui/x-data-grid-pro:  6.10.0
    @mui/x-date-pickers: ^5.0.0 => 5.0.0
    @mui/x-license-pro:  6.10.0
    @types/react: ^18.0.15 => 18.0.15
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: 4.4.4 => 4.4.4

    Browser: Chrome Version 115.0.5790.171

[romgrk]

You should find what you need in the following links:

https://mui.com/x/react-data-grid/row-height/#variable-row-height

https://codesandbox.io/s/agitated-surf-rghlwv?file=/Demo.js

Does that answer your question?

[nessj1994]

This does indeed fix that, but it also causes other issues. Any way to set this without it causing overflow of columns that were previously working?

With it enabled I get this issue where my part descriptions overflow into my quantity column. Without this setting it was fine and would truncate at the end of the column as expected.

[romgrk]

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. Thank you!

[nessj1994]

Working on that recreation. Trying to simplify things as much as possible because our table is pretty heavy on custom cellRenderers and feature implementations. I'll probably have a link to it bright and early tomorrow.

Edit: Still working on this. Can't seem to get it to replicate just yet. Trying to find what settings in mine are different without fully recreating my whole setup.

[nessj1994]

I actually figured it out. I can post the example if you'd like or you can just close it. In my custom cell renderer there was an overlap with some old tailwind css code that I accidentally left in that was causing it to not wrap properly.

In case anyone ever needs it for their own diagnosis, or just so you guys have it here's the problematic code and also the link to my sandbox setup

const PartCell = (params): JSX.Element => {
  return (
    <Stack>
      <Typography
        variant="subtitle1"
        fontWeight={"bold"}
        textTransform="uppercase"
        noWrap={false}
        sx={{ textDecoration: !params.row?.enabled ? "line-through" : "" }}
      >
        {params.row.part_num}
      </Typography>

      <Typography
        fontWeight="light"
        title={params.row?.part_description}
        className="truncate text-ellipsis" <- this line here
        variant="body2"
      >
        {params.row?.part_description}
      </Typography>
    </Stack>
  );
};

Sandbox: https://codesandbox.io/s/frosty-saha-rpqhlq

Thank you for your help along the way.

[romgrk]

👍