[data grid] Support the custom header filter height that is independent from the column header height about mui-x HOT 9 CLOSED

feels incoherent to have one prop be affected by it and the other not.

Sounds good to me on a rethought. I was relating it more to a fixed height value (just like we set using CSS), but for an internal prop, I agree that honoring the density does make sense.

from mui-x.

Changing the height on the header filter row can be done like this:

<DataGridPremium
  columns={columns}
  rows={rows}
  headerFilters
  sx={{
    [`& .${gridClasses.headerFilterRow}`]: {
      height: 200,
    },
  }}
/>

This will result in this:

I do agree although that the columnHeaderHeight prop will restrict the column header height when not overwritten with sx as well. If your implementation allows for that you can also do this via sx:

sx={{
  [`& .${gridClasses.columnHeader}`]: {
    height: 100,
  },
  [`& .${gridClasses.headerFilterRow}`]: {
    height: 200,
  },
}}

Does this help your use case?

from mui-x.

@cherniavskii should we add this to the board to explore 2 separate props columnHeaderHeight and columnHeaderFilterHeight?

from mui-x.

@michelengelen Thanks for the answer. It kind of works. But the header filter cell does not stretch to fit the height of the parent element.

To fix this I had to add one more css rule

sx={{
  [`& .${gridClasses.columnHeader}`]: {
    height: 40,
  },
  [`& .${gridClasses.headerFilterRow}`]: {
    height: 52,
    [`& .${gridClasses.columnHeader}`]: {
      height: "100%!important",
    },
  },
}}

from mui-x.

But there is one problem with the current solution.

Now it is possible to scroll the table content even there is enough space to fit all rows. You can see it in the attached video.

I have autoPageSize option turned on.

from mui-x.

I am guessing this is because we overwrote dimensions only in the CSS, but the dimensions in the internal state were not adjusted accordingly, so features that depend on internal dimensions such as scrolling don't work as expected.

from mui-x.

Now it is possible to scroll the table content even there is enough space to fit all rows. You can see it in the attached video.

That's because we use fake scrollbars internally and they use a function called getTotalHeaderHeight to compute when to start a scroll. Even if you increase the height using the sx prop, this method will use the standard height resulting in incorrect behavior related to the scrollbar.

IMO introducing a separate optional prop like columnHeaderFilterRowHeight could be a possible solution.
It could default to columnHeaderHeight if not provided.

Since it will be kind of an override, I'd prefer not to take into account the densityFactor once it's provided.

Wdyt @mui/xgrid?

from mui-x.

Yes, columnHeaderFilterHeight sounds good to me. Not sure about density, feels incoherent to have one prop be affected by it and the other not.

from mui-x.

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@layerok: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

from mui-x.