Ag-grid Row Grouping showing same data in all the rows

Question

I want to use row group renderer. Notice [ groupRowRendererFramework: groupRowInnerRenderer ] in the below code. I have added group renderer. When i run the code then in all the rows i see 'Hello World'. I just want to see 'Hello World' in one row and then i want to display other column values. 'Hello World' is coming from my custom group renderer. Can you please help, what piece of the code i am missing in my custom group row renderer?

Code

import GroupRowInnerRenderer from './GroupRowInnerRenderer';

const App = () => {
  
  const [rowData, setRowData] = useState();

  useEffect(() => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then(result => result.json())
    .then(rowData => setRowData(rowData))
  }, []);

  const defaultColDef = useMemo( ()=> ( {
    resizable: true, 
  }), []);  

  const [columnDefs, setColumnDefs] = useState([
    { field: 'athlete'},
    { field: 'age', headerName: 'Age12' },
    { field: 'country' , rowGroup: true  },
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
    { field: 'total' }
  ]);

  const gridOptions:GridOptions = {
    suppressMovableColumns: true,
    suppressContextMenu: true,
    enableRangeSelection: true,
    suppressRowTransform: true,
    columnDefs: [...columnDefs],
    defaultColDef,
    singleClickEdit: true,
    groupUseEntireRow: true,
    animateRows: true,
    groupRowRendererFramework: GroupRowInnerRenderer
  }

  return (
    <>
       <div className="ag-theme-alpine" style={{height: 700, width: '100%'}}>
           <AgGridReact
               animateRows={true} 
               rowData={rowData}
               gridOptions={gridOptions}
               autoGroupColumnDef={{ minWidth: 200 }}
               >
           </AgGridReact>
       </div>
    </>
   );
};
export default App;

Source For : GroupRowInnerRenderer.jsx

import React, { useEffect, useState } from 'react';
export default (props) => {
    console.log('props=',props)
    return (
        <div>
            <span>Hello World</span>
        </div>
    );
}

Answer 1

Working Plunker: https://plnkr.co/plunk/8FhpsTWT6FVjyf1g

Details

Changed your groupRowInnerRenderer.jsx file like that

import React, { useState } from 'react'

export default (props) => {
  const node = props.node
  const aggData = node.aggData
  const [countryName] = useState(node.key)
  const [goldCount] = useState(aggData.gold)
  const [silverCount] = useState(aggData.silver)
  const [bronzeCount] = useState(aggData.bronze)

    console.log('props=',props)

    return (
        <div>
            <span>Hello World</span>
            <span> - Country Name: {countryName}</span>
            <span> - Gold Count: {goldCount}</span>
            <span> - Silver Count: {silverCount}</span>
            <span> - Bronze Count: {bronzeCount}</span>
        </div>
    )
}

and imported it in your main app like that

import GroupRowInnerRenderer from './groupRowInnerRenderer.jsx'

There is no option like 'groupRowRendererFramework', used groupRowRendererParams instead

const gridOptions = {
  suppressMovableColumns: true,
  suppressContextMenu: true,
  enableRangeSelection: true,
  suppressRowTransform: true,
  columnDefs: [...columnDefs],
  defaultColDef,
  singleClickEdit: true,
  animateRows: true,
}

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

Removed total from your columnDefs

const [columnDefs] = useState([
  { field: 'athlete', minWidth: 200 },
  { field: 'country', rowGroup: true, hide: true },
  { field: 'age' },
  { field: 'gold', type: 'number' },
  { field: 'silver', type: 'number' },
  { field: 'bronze', type: 'number' },
  { field: 'year', filter: true },
  { field: 'date' },
  { field: 'sport', minWidth: 200 },
])

Added columnTypes

const columnTypes = useMemo(() => {
  return {
    number: {
      editable: true,
      // editing works with strings, need to change string to number
      valueParser: (params) => {
        return parseInt(params.newValue)
      },
      aggFunc: 'sum',
    },
  }
}, [])

Fetched your data in onGridReady

const onGridReady = useCallback((params) => {
  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then((resp) => resp.json())
    .then((data) => setRowData(data))
}, [])