React Data Grid

Provided Group Cell Component

react logo
Enterprise

The Provided Group Cell Component is the default Cell Component for showing expand and collapse functionality.

The Provided Group Cell Component covers almost all use cases.

Configuration

The key for the provided Group Cell Component is agGroupCellRenderer.

The Cell Component takes many parameters to configure it. Here is an example of a Column and its configuration:

const [columnDefs, setColumnDefs] = useState([
    // column definition configured to show group values with the cell renderer set to 'group'
    {
        showRowGroup: true,
        cellRenderer:'agGroupCellRenderer',
        // provide extra params to the cellRenderer
        cellRendererParams: {
            // turn off the row count
            suppressCount: true,
            // turn off double click for expand
            suppressDoubleClickExpand: true,
            // enable checkbox selection
            checkbox: true,
            // provide an inner renderer
            innerRenderer: myInnerRenderer,
            // provide an inner renderer
            innerRendererParams: {foo: 'bar'},
            // provide a total row value getter
            totalValueGetter: myTotalValueGetter
        }
    }
]);

<AgGridReact columnDefs={columnDefs} />

The full set of parameters for the group cell renderer are defined on IGroupCellRendererParams and include: