Comments (8)
For v7:
const dimensions = apiRef.current.getRootDimensions()
const hasScroll = dimensions.columnsTotalWidth > dimensions.viewportOuterSize.width
Needs to run in an effect, after the dimensions have been calculated.
For v6, probably checking the .clientWidth
and .offsetWidth
of the virtual scroller element could work.
from mui-x.
@MartinTiangco I am almost 100% sure that we do not have a public API for this, however you could still do a manual calculation by targeting .MuiDataGrid-virtualScroller
, which is the element that restricts the view, and .MuiDataGrid-topContainer
, which will overflow that container. This seems rather hack though.
@romgrk you have worked on the scrolling recently ... do you have a better idea, or maybe a method readily available for this?
from mui-x.
@MartinTiangco would that be a sufficient solution for you?
from mui-x.
Hey thanks for the solutions. I used VirtualScroller
's scrollWidth
and offsetWidth
Just a followup: If grid resizing is a possibility, I attached these checks in the onResize
eventHandler of the grid. I wouldn't suppose there's a better alternative?
const [isGridOverflowing, setIsGridOverflowing] = useState(false);
<DataGrid
...
onResize={() => {
const { offsetWidth } = ref.current.querySelector(
'.MuiDataGrid-virtualScroller',
);
const { scrollWidth } = ref.current.querySelector(
'.MuiDataGrid-virtualScroller',
);
const isOverflow = scrollWidth > offsetWidth;
if (isOverflow === isGridOverflowing) {
// Do nothing as it is the same;
return;
}
setIsGridOverflowing(isOverflow);
}}
/>
from mui-x.
No, that solution seems good.
from mui-x.
ok cool, thanks for the help!
from mui-x.
Sure, let us know if you need anything else.
from mui-x.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.
How did we do @MartinTiangco?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.
from mui-x.
Related Issues (20)
- [data grid] Customize grouping Rows HOT 10
- [TreeView] Use selectors on `TreeItem` instead of `instance` methods
- [pickers] The monthly label moves up with quickly switch between months HOT 5
- [DataGrid] Improve keyboard navigation based on the ARIA spec
- [data grid] Unexpected keyboard tab navigation behaviour within cells HOT 9
- [docs] Add a recipe for persisting filters on page refresh HOT 2
- [data grid] Add new rows on paste HOT 1
- @mui/x-license 7.12.1 not available HOT 1
- [data grid] Exception when printing styled Data Grid with hidden columns "Cannot read properties of null (reading 'cloneNode')" HOT 4
- [data grid] Editing row from example code not working HOT 1
- [data grid] Apply page level filtering once all filter are selected and click on button like 'Apply Filters' HOT 2
- [pickers] How to extend type for `slotProps`? HOT 3
- Date Time Range Picker HOT 1
- [data grid] Copy & Paste on Cells using localize keyboard HOT 3
- [data grid] Bundle size win opportunities
- [pickers] Customization DX, ideas
- [data grid] TanStack Query integration demos HOT 1
- [tree view] `apiRef` type is `Partial<{}>` which causes Typescript compilation to fail HOT 2
- [pickers][DatePicker] Calendar not fully displayed and next arrow unresponsive HOT 1
- [question] Clipboard paste not working on data grid when one cell is selected and current page is > 0
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.