Comments (5)
@russ0133 in the meantime could you try to replicate this in a minimal live code example? It looks like you have some customization regarding the placement and content of the columns panel in place, right?
Especially helpful would be to know if you memoize the panel in some way or not!
There's no memoization. And yeah, the component itself is inside a MUI Popper and we pass the ref to the button to the columns panel component, the anchorEl being the "Columns" button in the toolbar.
I've tried setting the anchorEl without the ref and instead through slotProps in but with no success. Will try to get a minimal live code going and debug further. This seems to only happen when the server updates - if it's only on the frontend side, then it doesn't "remount" the component.
from mui-x.
Hey @russ0133 and thanks for opening an issue here.
I suspect this is due to the improvement we made on the header rendering.
Let me look into this.
@romgrk if you have any hint please feel free to comment as well! 👍🏼
from mui-x.
@russ0133 in the meantime could you try to replicate this in a minimal live code example?
It looks like you have some customization regarding the placement and content of the columns panel in place, right?
Especially helpful would be to know if you memoize the panel in some way or not!
from mui-x.
Resolved the issue by not passing props directly to the toolbar function:
toolbar: (props) => TableToolbar({ ...props, tableId, filterButtonRef, columnPanelRef })
Instead passing the props on the slotProps in the DataGrid:
slotProps={{
toolbar: {
setFilterButtonEl,
tableId,
filterButtonRef,.
columnPanelRef,
},
}}
Also followed this codesandbox and instead of useRef, I'm using useState
https://codesandbox.io/p/sandbox/old-forest-9dlvdd?file=%2Fsrc%2FDemo.tsx%3A12%2C31-16%2C2
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.
@russ0133: 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)
- [data grid] Select/deselect all is not working as expected in data grid premium with row grouping HOT 4
- [data grid] Customize grouping Rows HOT 12
- [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 2
- [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 2
- [tree view] `apiRef` type is `Partial<{}>` which causes Typescript compilation to fail HOT 5
- [pickers][DatePicker] Calendar not fully displayed and next arrow unresponsive HOT 5
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.