Comments (2)
Since mobile doesn't have hover state, this change was done to avoid triggering the sorting when tapping on the column menu button. The old behavior can be restored with CSS, but note that this odd behavior will return. Below is an example for the column menu button. You can check the old behavior in https://v5.mui.com/x/react-data-grid/column-definition/
<DataGrid
sx={{
'@media (hover: none)': {
'&& .MuiDataGrid-menuIcon': {
width: 0,
visibility: 'hidden',
}
},
'&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
width: 'auto',
visibility: 'visible',
}
}}
/>
from mui-x.
@m4theushw very useful!
I have been able to almost replicate the old behaviour (show header icons on tap) with
const StyledDataGrid = styled(DataGrid)({
'@media (hover: none)': {
'&& .MuiDataGrid-menuIcon': {
width: 0,
visibility: 'hidden',
},
'&& .MuiDataGrid-sortIcon': {
width: 0,
visibility: 'hidden',
}
},
'&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-menuIcon': {
width: 'auto',
visibility: 'visible',
},
'&& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon': {
width: 'auto',
visibility: 'visible',
}
});
The column labels are were tightest do still lose 2 or 3 characters, but it is more readable now.
Desktop
Mobile
Mobile and Desktop used to look identical
Mobile with CSS fix above
from mui-x.
Related Issues (20)
- [TreeView] Scroll to programmatically selected tree item HOT 1
- [DataGrid] Missing eslint import/no-cycle in MUI X / flatten grid folder HOT 2
- [question] is it okay to use undocumented events such as virtualScrollerContentSizeChange HOT 6
- [pickers] Inform what shortcut is currently being selected HOT 2
- [question] Data grid premium - The button to expand all the detail panels at once HOT 4
- [DatePicker] Unexpected behavior when inserting an invalid date after a valid date HOT 2
- [pickers] MobileDatePicker In year selection current year is scrolled out of view HOT 1
- I'll like to be able to expand sub table for more than one column. (given that a row can only have one expanded sub table) HOT 2
- [docs] Demo PickersPlaygroundWrapper crashes HOT 2
- [pickers] DateCalendar issue with customized Dialog TransitionComponent HOT 3
- TreeDataPath is not updating the treeTable after apiRef.current.updateRows modified data HOT 4
- [charts] slotProps error HOT 1
- slotProps - panel - anchorEl types missing for mui-x-grid-pro HOT 2
- [question] Pricing for x-chart HOT 3
- [charts] Feedback/issues found while migrating the Toolpad chart component to x-charts HOT 10
- [pickers] With NVDA, openTo='year' cursor does not move HOT 1
- Regression on DataGrid type definition - no way to overload interfaces HOT 6
- [data grid] Base UI support, component API HOT 3
- [charts] Add grid layout HOT 2
- [chart] Make item interactives HOT 1
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.