Comments (7)
Hey @genepaul the sorting in this demo is not using the group field, but the recruitmentDate
:
const [sortModel, setSortModel] = React.useState<GridSortModel>([
{ field: 'recruitmentDate', sort: 'asc' },
]);
Sorting the grouping column is possible with the GRID_TREE_DATA_GROUPING_FIELD
constant.
const [sortModel, setSortModel] = React.useState<GridSortModel>([
{ field: GRID_TREE_DATA_GROUPING_FIELD, sort: 'asc' },
]);
from mui-x.
Ok, I see where my issue was, and I used the wrong example to demonstrate the problem. This is a problem with the integration between Aggregation and Tree Data, and may be a misunderstanding on my part of how we should do aggregation of the group column. What I'm trying to accomplish is allowing to set an aggregation on the Grouping column. When I do that, the grouping column's value
gets set to the aggregated value for that group, rather than the grouping field information. This messes up the display of the grouping column, as well as the sorting. The values that get passed to the sortComparator
become that aggregated value rather than the grouping key:
https://codesandbox.io/p/sandbox/nice-forest-98pwp4?file=%2Fsrc%2FDemo.tsx
Is what I'm trying to do even possible or recommended? I'm creating a component that wraps DataGrid and want to give my users the ability to create custom aggregations to show in the footer of the grouping column (like calculating the size at each level of the tree).
from mui-x.
Yes, I think that is possible and we had a similar case a few weeks ago... I'll try to find it, but I know that @cherniavskii did come up with a solution for it, so he will know for sure.
from mui-x.
@genepaul Are you saying that you only want the top-level aggregation in the footer, but not for the grouping rows? Instead, the grouping rows should display the data from the corresponding field in the row itself.
Do I understand this correctly?
from mui-x.
Correct.
from mui-x.
Interesting, I believe It's the first time we're asked about this.
I think the getAggregationPosition
prop should help here.
In your case, you only want to aggregate the top-level rows (the ones with null
parent):
getAggregationPosition={groupNode => groupNode.parent === null ? "footer" : null}
Here's a working demo: https://codesandbox.io/p/sandbox/hopeful-shannon-l7f573?file=%2Fsrc%2FDemo.tsx%3A44%2C56&workspaceId=91a5c27a-eb18-443d-ad50-311c5bb7f22d
Out of curiosity, do you allow users to change the aggregation type for the column? What would happen if they select a different aggregation?
from mui-x.
The issue has been inactive for 7 days and has been automatically closed.
from mui-x.
Related Issues (20)
- [TreeView] Expose the item slots at the tree view level
- [data grid] Is Clipboard cut available? HOT 1
- [data grid] Save / Restore state with dynamic columns HOT 7
- [pickers] dayjs with default timezone broke picker HOT 2
- [pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper HOT 5
- [charts] Improve default color contrast in dark mode HOT 9
- [RFC] Move to a more modular structure for tests in code and CI HOT 4
- Add Audio Player/Waveform component HOT 2
- [charts] Cannot scroll the page when touch inside the chart HOT 7
- [data grid] Pivoting ETA HOT 4
- Pie Chart shows a slice for 0 value whenever the object representing a 0 is last in the array HOT 2
- [DataGrid] CSV export negative numbers in string has quotation HOT 3
- [data grid] Is there a way to override the default copy/paste functionality in DataGrid? HOT 7
- New sets of components HOT 6
- [charts] BarChart legend overlaps charts area HOT 3
- [pickers] Recipes HOT 1
- [data grid] I want to add Apply and Cancel buttons to the GridToolbarFilterButton HOT 5
- [pickers][DateTimeRangePicker] Manually selecting the date then selecting the time in the popover reverts the date to today HOT 2
- [charts] Support single color area chart HOT 9
- [data grid] Row pinning with Server-side tree data HOT 3
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.