Comments (3)
That's because the rowGrouping
column does have its own colDef
properties which you can customize using the groupingColDef
prop.
I tried to update your codesandbox to do that for one grouping column: https://codesandbox.io/s/lucid-parm-7jqzc2?file=/Demo.tsx:759-773 (Note that if you want to have a custom tooltip for multiple columns grouping you have to update the code accordingly)
You can see more details in these documentation sections:
- Custom grouping column
- Multiple grouping columns
- Row grouping (in general)
Let me know if this answers your concerns.
Thank You!
Sidenote: You should have stable references of the columns
prop and groupingColDef
prop to avoid unnecessary re-renders of the grid and have stable performance, I tried to memoize the objects in your example.
from mui-x.
Thank you a lot, it works!
As the documentation for 'custom grouping column' says 'To customize the rendering of the grouping column, use the groupingColDef prop. You can override the headerName or any property of the GridColDef interface, ..'
Given the documentation, I assumed that all properties are available and using 'groupingColDef' will simply allow you to costomize / override properties.
Now, understanding the 'groupingColDef' prop, it seems to me more like it is used to add missing properties and allows manipulation.
from mui-x.
Glad it worked!
Now, understanding the 'groupingColDef' prop, it seems to me more like it is used to add missing properties and allows manipulation.
Yes. The grouping column is not the same column as the actual column on the basis on which it's grouped, it's internally created and it has its own colDef
which is defined inside the Grid
, using groupingColDef
you can override the default properties or add some optional ones.
Since you have the solution now, I'll go ahead and close the issue. Feel free to further clarify if you have more questions.
from mui-x.
Related Issues (20)
- [data grid] Height Set Using Percentages doesn't display as expected HOT 10
- [data grid] Scrollbar overlap HOT 1
- vite build with vite-plugin-javascript-obfuscator will cause x-data-grid error:TypeError: e.current.state.rows.dataRowIds.at is not a function HOT 2
- [pickers][DateRangePicker] timezones handled incorrectly with `dayjs` when timezone extensions are enabled HOT 14
- [data grid] Search and filters are not working on array values. HOT 5
- [charts] Charts don't pass className to root element HOT 7
- [question] Why are the columns shifting and no longer aligned after exporting as Excel? HOT 9
- [data grid] Need a way to show different Checkbox status when one of the children is not selected HOT 12
- [data grid] sorting is not working for DD/MM/YYYY and MM/DD/YYYY date format it is only working for YYYY/MM/DD. HOT 5
- [data grid] add a "does not contain" filter HOT 3
- [data grid] How do I fix this? - `GridVirtualScrollbar.js:88 Uncaught TypeError: Cannot set properties of null (setting 'scrollTop')` HOT 7
- [charts] `ChartsTooltip` often not working properly when assigning `innerRadius` in series and using `ResponsiveChartContainer` HOT 2
- [data grid] Upgrading `@mui/x-data-grid-premium` to `v7` produces emotion error HOT 19
- [data grid] `checkboxSelection` Issue HOT 4
- [data grid] Print issue HOT 2
- [data grid] How to change the default DataGrid density to compact? HOT 3
- [data grid] customized sort tooltip flashes during server-side sort HOT 2
- [charts] Allow basic customization of Sparkline y-axis HOT 7
- Move @mui/internal-test-utils to devdepedencies. HOT 7
- [pickers] Toolbar components are not using the set `timezone` HOT 8
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.