Comments (9)
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:
![Screenshot 2024-04-03 at 15 48 20](https://private-user-images.githubusercontent.com/32863416/319212675-b2acd5e1-a688-4a72-9e03-c734b590ad2e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTMyMDAsIm5iZiI6MTcyNDYxMjkwMCwicGF0aCI6Ii8zMjg2MzQxNi8zMTkyMTI2NzUtYjJhY2Q1ZTEtYTY4OC00YTcyLTllMDMtYzczNGI1OTBhZDJlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MDgyMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE1MzcwMDhhNGI5ZDQ5MDE5YjViMGZhMWQzZGNlNTlmYTE4MzY3NGQ0ZDE0MTBiOTMzMGFhZWZmMGI3MjE2MTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.C9p_e5WUhR8kaybQIi0BmsJcM_7NmoQ8NSFXFbtnne8)
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.
![image](https://private-user-images.githubusercontent.com/18424848/319271390-317a19e6-8a16-4165-82d2-eb1ac3fef8d3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTMyMDAsIm5iZiI6MTcyNDYxMjkwMCwicGF0aCI6Ii8xODQyNDg0OC8zMTkyNzEzOTAtMzE3YTE5ZTYtOGExNi00MTY1LTgyZDItZWIxYWMzZmVmOGQzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDE5MDgyMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU4ZWRhZDg0ZTUwYjRjOWEwZjQ1NThmZWE4NDAwODc4MDVhMWQyYWVhZTczNWUyNjllZDc3ZDZlNWJlM2UyODAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.r0HLfS7njLrU1gQIGG7dBngIG0Y9QP5lgYg4R8QGJ-U)
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.
mui-scrolling-issue.mov
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.
mui-x/packages/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts
Lines 432 to 441 in a1975c6
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.
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.
Related Issues (20)
- [pickers] Handle `TextField` slots with `@mui/material@6`
- [data grid] Selection Column has no aria-label for screen reader a11y HOT 5
- [data grid] In column filter dropdowns HOT 2
- [data grid] Overlays aren't sticky in RTL mode HOT 1
- [x-license] MUI Missing license key HOT 1
- [charts] line charts not rendering on page load, only on mouse over HOT 3
- DatePicker format issue when format='DD/MMM/YYYY' UI shows "DD/MMMM/YYYY" HOT 2
- [tree view] Cursor navigation interferes with browser shortcut keys HOT 1
- [data grid] State change in component when `groupingColDef` and `pinnedColumns` leads to mis-render in Group column HOT 5
- [data grid] Warning: A props object containing a "key" prop is being spread into JSX HOT 2
- [data grid] Update `indeterminateCheckboxAction` default value
- [data grid] How to setup clickable value (like links) in input field HOT 1
- [charts] Generate chart images on the backend / from an HTTP API
- [charts] Missing `themeAugmentation` in pro plan HOT 1
- Not getting the data for target values in itemContent callback for customizing tooltip
- [charts-pro] Dependency local workspace reference causes runtime errors on ``createAxisFilterMapper``
- [bug] Numbers and boleans are returned as strings when filtering a DataGrid HOT 1
- DataGridPro: Column Width Persistence Fails During Data Updates and Auto-Sizing
- [data grid] Wrap default checkbox in tooltip
- Charts - BarChart horizontal now breaks the series value passing
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.