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] GridToolBarColumnsButton HOT 1
- [data grid] Data Grid is failing AXE accessibility test with the message "Certain ARIA roles must contain particular children" HOT 3
- [tree view] failed to excute "querySelectorAll" on "Element" HOT 2
- [charts] Refine line charts highlight HOT 2
- [question] Multiple versions of @mui/x-data-grid on the same project. HOT 1
- [data grid] tries to sort skeleton rows HOT 3
- [pickers] AM/PM Behavior in the Calendar control HOT 2
- [pickers] Render empty input when value is null HOT 11
- [pickers] `DatePicker` character editing fails with timezone "Europe/London", Dayjs adapter HOT 2
- [question] Is it possible to add a column header in the row on a new "line"?
- [pickers] Date-Time picker is auto-closed when selecting PM/AM option HOT 2
- [data grid] AutoComplete looses focus on first selection after user starts typing HOT 4
- [data grid-premium] Copy and Paste content from origin column cell selection to an another column doesn't maintain the sorting set HOT 1
- [charts] Axis Highlight on horizontal bar charts can't be band. It used to exist in v7.6.2. HOT 2
- Multiple checkbox selection restriction in @mui/x-data-grid-pro HOT 2
- Grouping Columns in @mui/x-data-grid-pro Not working
- [DataGrid] `processRowUpdate` misbehaves when row is removed right before it fires HOT 3
- [data grid] QuickSearchToolbar loses focus for bad user experience HOT 1
- [data grid] How do I stop the grid from issuing double fetchRows calls? HOT 2
- [DataGrid] Allow filter behavior to be customized HOT 2
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.