Is there way to customise ag grid child count?

Question

I m working with ag grid react, I have done row group. Now Parent row showing child row counts with numeric values. Is there any function to customise row count style. And I want to calculate rows count based on children rows cell values.

I'm new working with ag grid. Can anyone have solution about my issue.

Answer 1

I think this is exactly what you are looking for

https://www.ag-grid.com/examples/grouping-group-rows/full-width-groups-rendering/modules/reactFunctional/index.html

Basically you are going to suppress group count and use a custom renderer

index.js

import GroupRowInnerRenderer from './groupRowInnerRenderer.jsx'
// ...

const GridExample = () => {
  const groupRowRendererParams = useMemo(() => {
    return {
      innerRenderer: GroupRowInnerRenderer,
      suppressCount: true,
    }
  }, [])

  // ...

  return (
    <AgGridReact
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={defaultColDef}
      columnTypes={columnTypes}
      groupDisplayType={'groupRows'}
      groupRowRendererParams={groupRowRendererParams}
      onGridReady={onGridReady}
    />
  )
}

and define your GroupRowInnerRenderer

groupRowInnerRenderer.jsx

export default (props) => {
  // customize it according to your needs
}

You can read more here https://www.ag-grid.com/react-data-grid/grouping-group-rows/#configuring-group-cell-renderer

UPDATE

Alright, I have not much time but I know how to accomplish what you want

Working Plunker: https://plnkr.co/plunk/PzN5J6FJ5tCj4SAP

Do your calculation in the inner renderer component and set leafChildren. You need to put your own calculation logic here, the rest is easy.

You're going to dig leafChildren. Each children of every country in it has a data prop. This is what you are looking for.

FINAL UPDATE

To move expand icon, you need to follow something different: cellRenderer

cellRenderer.jsx

import React, { useCallback, useEffect, useState } from 'react'

export default (props) => {
  const { node, value } = props
  const [expanded, setExpanded] = useState(node.expanded)

  useEffect(() => {
    const expandListener = (event) => setExpanded(event.node.expanded)

    node.addEventListener('expandedChanged', expandListener)

    return () => {
      node.removeEventListener('expandedChanged', expandListener)
    }
  }, [])

  const onClick = useCallback(() => node.setExpanded(!node.expanded), [node])
  return (
    <React.Fragment>
      {node.group ? (
        <div
          style={{
            position: 'absolute',
            right: 10,
          }}
        >
          <div
            style={{
              cursor: 'pointer',
              transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
              display: 'inline-block',
            }}
            onClick={onClick}
          >
            &rarr;
          </div>
        </div>
      ) : (
        value
      )}
    </React.Fragment>
  )
};

Now use it on your last column: Sport

{ field: 'sport', cellRenderer: CellRenderer },

Do not forget to remove the original expand icon returning nothing inside cellRendererSelector param of autoGroupColumnDef

const autoGroupColumnDef = useMemo(() => {
  return {
    headerName: 'Country',
    minWidth: 300,
    cellRendererSelector: (params) => {
      return
    },
  }
}, [])

Here's the updated Plunker

https://plnkr.co/plunk/g6vz7zg5aWlgENqS