[data grid] How to override grid density factors to change what Compact/Standard/Comfortable means?

[yay]

Order ID 💳

48149

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Hi,

We need to use our custom row height values depending on the density selected and currently achieve this like so:

const getRowHeightByDensity = (density: DataGridPremiumProps['density']): number => {
  switch (density) {
    case 'standard': return 49;
    case 'compact': return 32;
    case 'comfortable': return 65;
    default: return 49;
  }
};

// then later in grid props
rowHeight={rowHeight || getRowHeightByDensity(gridProps.density)}

I've noticed that the row height is set via inline style rather than CSS classes. I guess this is to support variable row height as well, not just 3 predefined row height settings.

If overriding what each density level means via CSS is not an option, is it possible to override the density factor constants?
Or is the way we currently handle this already optimal?

export const COMPACT_DENSITY_FACTOR = 0.7;
export const COMFORTABLE_DENSITY_FACTOR = 1.3;

Thanks.

Your environment 🌎

`npx @mui/envinfo`

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

[m4theushw]

Or is the way we currently handle this already optimal?

Yes, that's the way we expect users would customize the final row height depending on the density.

For the header height we have a discussion in #602 (comment) about allowing to use CSS to customize the final header height.

[yay]

Thank you!