Question 207717 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is there way to customise ag grid child count?

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.

current functionality working

we want functionality same as screenshot with second image

Tags:

2

Answers


  1. 0

    You can modify the group header count by using

    cellRendererParams

    There are multiple options available for cellRendererParams, If you intend to change the design then use innerRenderer in cellRendererParams

    Adding the url link and example

    Ag grid doc: https://www.ag-grid.com/react-data-grid/group-cell-renderer

    DEMO: https://plnkr.co/edit/WXykbAkY5iOK1FDp?open=index.jsx

    -Help 🙂

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search