[data grid] Sorting with treeData does not seem to work about mui-x HOT 7 CLOSED

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.