Comments (10)
@flaviendelangle Thanks for the help and suggestions.
from mui-x.
Hey @cbrainee and thanks for raising an issue here.
Could you please provide us with a minimal working reproduction example?
It's way easier and less error prone if you could do that.
from mui-x.
https://codesandbox.io/p/sandbox/eloquent-voice-lq5rz4?file=%2Fsrc%2FDemo.js%3A18%2C13
from mui-x.
@cbrainee could you make that sandbox public? I cannot access it
from mui-x.
@michelengelen Done
from mui-x.
OK, I see that it is not working the way one would expect.
I am not familiar with how the inner workings of the row grouping look like.
@flaviendelangle you have introduced that feature if I am not mistaken
Could you please have a look here?
from mui-x.
Hi,
You need to use the groupingValueGetter
prop (doc) to retrieve the grouping value.
And if some value have no org, they will remain at the top level (doc).
If you want to group them as well, you must put a default value.
Here is what the final column could look like:
{
field: "customerOrg",
headerName: "Customer Org",
width: 150,
renderCell: (data) => {
if (data.rowNode.type === "group") {
return data.value;
}
return <p>{data.formattedValue}</p>;
},
valueGetter: (value, row) => {
return row.customerInfo?.customerOrg;
},
groupingValueGetter: (value, row) => {
return row.customerInfo?.customerOrg ?? 'No organization';
},
},
By the way, in the renderCell
, I would advise you to use data.formattedValue
instead of re-accessing it from the row.
from mui-x.
By the way, you might not do this in your real application, but getRowId
should be memoized, otherwise you will end up with terrible performances.
The doc is here
from mui-x.
@cbrainee if this solution fits your use-case please feel free to close the issue.
from mui-x.
The issue has been inactive for 7 days and has been automatically closed.
from mui-x.
Related Issues (20)
- [data grid] infinite loop occurs under certain circumstances HOT 10
- New component Barcode & QRCode & scanner HOT 1
- [pickers] DateBuilderReturnType provides wrong type with no arg HOT 3
- [data grid] Add support for async valueOptions callback HOT 1
- [pickers][DateTimePicker] page scrolls when mouse is moved outside of it when using hour/minute picker HOT 3
- [docs] Tree View: check children, uncheck parents HOT 3
- [data grid] Column resizing doesn't work from group HOT 1
- [pickers][Datepicker][AdapterDateFnsV3] unable to set single digit day of month format HOT 4
- [charts] LineChart doesn't draw graph on page load HOT 1
- [charts][LineChart] unwanted horizontal line when rendering 100 data points HOT 4
- [data grid] Improve localization dx for custom filters
- [tree view][RichTreeView] Custom styling not working HOT 8
- [data grid] Support edit functionality with server-side data source
- [data grid] Add height property, analog to Chart HOT 1
- [data grid] Upgrade v6 => v7 breaks existing styles applied HOT 1
- [data grid] GridHeaderCheckbox.js failed to compile x-data-grid after upgrading to v7 HOT 3
- [data grid] Replace ExcelJS HOT 1
- [data grid] adding a new row with the autoHeight prop causes first row flicker.
- The `column groups` do not appear in the data grid of my Next.js application
- [charts] Missing documentation about how to add tooltip with composition HOT 4
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.