[data grid] How to use `renderCell` for `defaultGroupColumn` when server-side loading

[levi7x]

The problem in depth

Hello MUI X Support Team,

Problem: I am trying to customize the grouping cell in a tree data structure while retaining the default behavior for expanding and collapsing rows, as well as triggering the getRows method for fetching child rows. However, when I implement a custom cell using renderCell, the default arrow for expanding rows is missing, and consequently, the getRows method is not triggered.

Expected Behavior: Default Behavior: Clicking the default arrow in the grouping cell should expand or collapse the row and trigger the getRows method to fetch child rows from the server. Custom Cell: I want to add custom content (like icons and tooltips) while preserving the default arrow functionality for expanding/collapsing and fetching rows.

Actual Behavior: When using a custom cell implementation, the default arrow is not displayed, and clicking on the cell does not trigger the getRows method to fetch data. The params provided to renderCell do not include children, which seems to be a requirement for the default arrow to function correctly.

If I understand correctly as long as we provide descendantCount for getChildrenCount in the dataSource: GridDataSource (for unstable_dataSource) we can fetch data by clicking on the 'arrow' in the row that will trigger getRows where we fetch children.

The best example of what I am trying to do would be https://mui.com/x/react-data-grid/server-side-data/tree-data/- here by adding renderCell it seems we lost the functionality to fetch rows. When I tried to print the params

it doesn't have children (since we would like to fetch on demand) but there is prop that contains number of children on server therefore the 'arrow' should be present in the cell ? (or can we add it somehow to trigger getRows ?) Is there a way to keep functionality of the default group column ? As a workaround I used valueFormatter to customize the cell but I know it's not recommended.

I tried to look into issues or solutions related to this case but I wasn't able to find solution.

The basic idea is combination of https://mui.com/x/react-data-grid/server-side-data/tree-data/ & https://mui.com/x/react-data-grid/server-side-data/tree-data/

import * as React from "react";
import {
  DataGridPro,
  useGridApiRef,
  GridInitialState,
  GridToolbar,
  GridDataSource,
  DataGridProProps,
  GridRenderCellParams,
  useGridApiContext,
  useGridSelector,
  gridFilteredDescendantCountLookupSelector,
} from "@mui/x-data-grid-pro";
import Button, { ButtonProps } from "@mui/material/Button";
import { useMockServer } from "@mui/x-data-grid-generator";
import { Box } from "@mui/system";
import { IconButton } from "@mui/material";

const pageSizeOptions = [5, 10, 50];
const dataSetOptions = {
  dataSet: "Employee" as const,
  rowLength: 1000,
  treeData: { maxDepth: 3, groupingField: "name", averageChildren: 5 },
};

export default function ServerSideTreeData() {
  const apiRef = useGridApiRef();

  const { fetchRows, columns, initialState } = useMockServer(dataSetOptions);

  const initialStateWithPagination: GridInitialState = React.useMemo(
    () => ({
      ...initialState,
      pagination: {
        paginationModel: {
          pageSize: 5,
        },
        rowCount: 0,
      },
    }),
    [initialState]
  );

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      // need to trigger from our custom render cell if has children with the 'arrow'
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
          groupKeys: JSON.stringify(params.groupKeys),
        });
        const getRowsResponse = await fetchRows(`https://mui.com/x/api/data-grid?${urlParams.toString()}`);
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
      getGroupKey: (row) => row[dataSetOptions.treeData.groupingField],
      getChildrenCount: (row) => row.descendantCount,
    }),
    [fetchRows]
  );

  function CustomGridTreeDataGroupingCell(props: GridRenderCellParams) {
    const { id, field, rowNode, formattedValue } = props;
    const apiRef = useGridApiContext();
    const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
    const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;

    const handleClick: ButtonProps["onClick"] = (event) => {
      if (rowNode.type !== "group") {
        return;
      }

      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
      apiRef.current.setCellFocus(id, field);
      event.stopPropagation();
    };

    console.log("CustomGridTreeDataGroupingCell", filteredDescendantCount);

    // something custom

    return (
      <Box sx={{ ml: rowNode.depth * 4 }}>
        <div>
          {filteredDescendantCount > 1 ? (
            <>
              <IconButton onClick={handleClick} tabIndex={-1} size="small" />
              {filteredDescendantCount}/{filteredDescendantCount} {formattedValue}
            </>
          ) : (
            formattedValue
          )}
        </div>
      </Box>
    );
  }

  const groupingColDef: DataGridProProps["groupingColDef"] = {
    headerName: "My own header",
    renderCell: (params) => {
      return <CustomGridTreeDataGroupingCell {...params} />;
    },
  };

  return (
    <div style={{ width: "100%" }}>
      <Button onClick={() => apiRef.current.unstable_dataSource.cache.clear()}>Reset cache</Button>
      <div style={{ height: 400 }}>
        <DataGridPro
          columns={columns}
          unstable_dataSource={dataSource}
          treeData
          apiRef={apiRef}
          pagination
          pageSizeOptions={pageSizeOptions}
          initialState={initialStateWithPagination}
          slots={{ toolbar: GridToolbar }}
          slotProps={{ toolbar: { showQuickFilter: true } }}
          groupingColDef={groupingColDef}
        />
      </div>
    </div>
  );
}

Thank you for you support in advance!

Your environment

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: TreeData groupColumn renderCell getRows Order ID: 95972

[michelengelen]

Hey @levi7x ... in theory this is possible, but it will require quite a bit of rewriting stuff thats already implemented.

May I ask what you are trying to achieve first? Maybe there is another way without the heavy customization.

[levi7x]

Thank you for quick response,

I am trying to achieve a tree structure in the grid where the hierarchy consists of three distinct entities: A, B, and C.

A is at the top level, and it can have multiple children of type B. B can either have more children of type B or type C C is always a leaf node in the tree, i.e., it has no children.

Requirements: Single Column Display: I want to display all three entity types in a single column called "Name", so all entities (A, B, and C) should appear in one column.

On-Demand Fetching: I want to fetch child entities on demand (when the user clicks to expand a node), meaning B entities are loaded only when expanding A, and C entities are loaded only when expanding the relevant B node.

Custom Icons for Each Entity: I need to display a different icon for each entity type in the "Name" column:

A will have one icon. B will have another icon. C will have a different icon.

Default Expand/Collapse Behavior: I want to retain the default behavior of the expand/collapse arrow next to each entity (for A and B), so that clicking it will trigger the fetching of child rows and allow the user to navigate through the hierarchy.

The problem occures when I customize the cell to include my icons, I lose the default expand 'arrow' and the ability to trigger the getRows method to fetch child entities. The main thing is I need a way to customize the cell's content (to show icons) while preserving the default functionality for expanding and collapsing rows.

[michelengelen]

OK, so if you want to render custom components inside the cell there is no way around providing a custom cell renderer. It is a lot more difficult for the server side grouping cell than it is for the others though.

I think this would validate a feature request to implement some kind of a renderGroupingCellContent method.

WDYT @MBilalShafi ?

Related issue: #14198

[MBilalShafi]

@levi7x, thank you for reaching out.

I think it should be fairly easy to set up your custom grouping cell for the server-side tree data.

Take a look at the grouping cell code: https://github.com/mui/mui-x/blob/eee1c241f27ee2f99e553ead33fd767ce6d8eead/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx

It uses the API method unstable_dataSource.fetchRows to trigger a getRows call on each expand or get the data from the cache if available. You could use this component as a starting point for your custom grouping cell, modify it as required, and keep the part with the expand/collapse icon. Pass the modified component in groupingColDef.renderCell prop to have it replace the default grouping cell.

Let me know if it solves your issue.

P.S. If you could provide what you have achieved uptil now with a minimal code reproduction example, I may be able to help you with your specific problem on a code level. Here's a guide on how you can provide a live reproduction: https://mui.com/x/introduction/support/#bug-reproductions

[levi7x]

@MBilalShafi thank you for advice! I tried and managed to customize the cell based on the original grouping cell code (unstable_datasource.fetchRows is what I was looking for)

I would like to ask two questions:

In the GridDataSourceTreeDataGroupingCell.tsx component we select the error for given row with gridDataSourceErrorSelector I couldn't find it available from the package so had to recreate this selector in the code, is this the recommended ? I basically copied the selector from the hooks/features/datasource export const gridDataSourceStateSelector = (state: GridStatePro) => state.dataSource; export const gridDataSourceErrorSelector = createSelectorV8(gridDataSourceStateSelector, (dataSource, id: GridRowId) => dataSource.errors[id]);

I wonder how I should make my grouping cell work when I expect same value for multiple cells at same depth. I know groups are based on the path but is there a way to distinguish paths between same grouping cells. This is example from docs https://stackblitz.com/edit/react-exqcgl?file=Demo.tsx with modification where we can expect the same value for column which is used for grouping, because its possible for two people to have same name. (original https://mui.com/x/react-data-grid/server-side-data/tree-data/) Maybe its not as much related question for grouping cell as groupingKey ?

[MBilalShafi]

I couldn't find it available from the package

Which version of the application are you using? These selectors are fairly new and available in or after v7.14.0.

I know groups are based on the path but is there a way to distinguish paths between same grouping cells.

The Data Grid distinguishes if a certain row belongs to a certain parent based on the groupingKey (or the path on client-side implementation), it must be unique. However, it is definitely possible to have two persons with the same names be each other's siblings. The trick is to make the key unique and combine it with groupingColDef.renderCell to have a custom component that shows the name value.

For example, consider this data (name, id):

• John, 10
  • Abraham, 99
  • Joseph, 11
  • Abraham, 34

The Abraham name repeats you could return a combined key in getGroupKey to make it unique:

function getGroupKey(row) {
    return `${row.name}-${row.id}`
}

The custom renderCell implementation (that you previously customized on top of GridDataSourceTreeDataGroupingCell) could extract the name only and show it to the users.

Let me know if you have further questions related to this.

[levi7x]

I've been using version 7.15.0 for x-data-grid-pro, just updated to latest still having trouble importing gridDataSourceErrorSelector dirrectly

I actually implemented similar approach (I saw someone asking similar thing in other issue) but thought of it as a workaround since we have to process the groupingKey into some sort of composite groupKey. This seems to be working fine for me, especially when I need to send Id's as part of the request for backend where I extract them from groupingKey inside getRows. Only difference I made is extracting name inside the valueFormatter instead of renderCell and used only formattedValue inside the custom cell. I'm generally satisfied with this, as long as there's no better way to handle duplicates.

The last thing I've been struggling is default expansion. I need to be able to expand certain group by default and this isGroupExpandedByDefault feature is exactly what I need. On initial load it works nicely, the problem I am having is very specific, when I try to fetch data for certain node, all of already expaned nodes became broken and loose their parent, and are assigned with "auto-generated-group-node-root". This expanded nodes are properly saved in cache- so when I try to expand their parent again it takes value from cache and is fine. It is kind of hard to explain I want to show what I mean.

I recreated simplified version of code that I am working with-> using the mocked data (In my original code, I fetch data with RTK Query, and the incoming server data is in the same form as the example). But in this recreated example it is working correctly https://stackblitz.com/edit/react-exqcgl?file=FakeGrid.tsx so I think there are some suspicious rerenders and problems with handling async state I was hoping you could maybe have an idea from the displayed behavior what could be the problem since using defaultGroupingExpansionDepth is working correctly.

VISUAL EXAMPLE FROM THE APP

no default expansion set

works correctly 

using defaultGroupingExpansionDepth={1}

on initial render the roots are expanded and everything work correctly 

using isGroupExpandedByDefault

extracting original group key and checking if it is equal to 'ROOT' ``` const isGroupExpandedByDefault = (node: GridGroupNode) => { if (node.depth === 0 && node.groupingKey?.toString().split("-")[1] === "ROOT") { return true; } return false; }; ``` 

[MBilalShafi]

I think there are some suspicious rerenders and problems with handling async state

It does seem to be the case. It'll be great to have a live reproduction of the problem, but if it's not possible due to the complexity of the code, could you prepare a git repository and share it on some public channel (like GitHub) where the problem could be reproduced?

As a general rule, you should be trying to optimize the excessive re-rendering of the component as much as possible. That is the reason in our demos, we have the data source wrapped with React.useMemo to stabilize its reference.

As an example, in the stackblitz demo you attached, you could easily move CustomGridTreeDataGroupingCell and groupingColDef outside the component to prevent them from recomputing on every render.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.

[KuberAroraVinove]

Hie @levi7x , Hope you are doing good. I also want to implement the same functionality and after adding icon tree expansion button goes away and couldn't expand it. Moreover, i want to make sure to show different icons if folder is expanded or collapsed two different icons. Can you please share if it is resolved . Hie @MBilalShafi if you have something on this please tell. Thank you in advance.

[levi7x]

Hi, I think you are searching for custom GroupingCell implementation, just look at this comment above https://github.com/mui/mui-x/issues/14598#issuecomment-2355374857. Personally for me using the apiRef.unstable_dataSource.fetchRows worked fine for fetching rows, and made custom implementation usingrenderCell: (params) => <CustomGroupingCell {...params} /> you get the row information you need such as row, rowNode, formattedValue.

I think inside your grouping cell you can use something like this code and based on rowNode.childrenExpanded assign icon to be displayed.

const apiRef = useGridPrivateApiContext() as React.MutableRefObject<GridPrivateApiPro>;

if (!rowNode.childrenExpanded) 
{
      apiRef.current.unstable_dataSource.fetchRows(rowNode.id);
} 
else
{
      apiRef.current.setRowChildrenExpansion(rowNode.id, !rowNode.childrenExpanded);
}

const expansionIcon = rowNode.childrenExpanded ? "Icon1" : "Icon2";

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @levi7x 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.

[levi7x]

I think we can close this issue, since my last question wasn't related to the render custom cell topic.