Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/javascript-data-grid/grouping-group-rows/ below:

JavaScript Grid: Row Grouping - Group Rows

Full width group rows can be used to represent the group structure in the grid.

The example above demonstrates that both country and year are grouped. No group column is generated, instead using full width rows to display the group value cells.

Group Rows can be enabled by setting the groupDisplayType grid option to "groupRows" as shown below:

const gridOptions = {
    groupDisplayType: 'groupRows',

    
}

The group rows use the agGroupCellRenderer component to display the group information, as well as the chevron control for expanding and collapsing rows.

This can be configured with several Group Renderer Properties using the groupRowRendererParams grid option. The example below removes the row count. Checkboxes are enabled for row selection with the checkboxLocation property.

The example above demonstrates the following configuration:

const gridOptions = {
    columnDefs: [
        { field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
        
    ],
    groupRowRendererParams: {
        suppressCount: true,
    },
    rowSelection: { 
        mode: 'singleRow', 
        checkboxLocation: 'autoGroupColumn',
    },

    
}

boolean

Set to true to not include any padding (indentation) in the child rows.

boolean

Set to true to suppress expand on double click.

boolean

Set to true to suppress expand on ↵ Enter

string | TotalValueGetterFunc

The value getter for the total row text. Can be a function or expression.

boolean

If true, count is not displayed beside the name.

any

The renderer to use for inside the cell (after grouping functions are added)

any

Additional params to customise to the innerRenderer.

Function

Callback to enable different innerRenderers to be used based of value of params.

The agGroupCellRenderer can be configured to show checkboxes for row selection. Setting the Row Selection checkboxLocation property to 'autoGroupColumn' does not hide the Checkbox Column but does prevent any columns configured with agGroupCellRenderer from showing checkboxes.

The example above demonstrates the following configuration:

const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        selectAll: 'all',
        checkboxLocation: 'autoGroupColumn',
    },

    
}

When using the group cell renderer, the agGroupCellRenderer component will inherit the grouped columns renderer and display this inside of the group cell, adjacent to any configured checkboxes, cell count, and the expand/collapse chevron control.

This inner renderer can be overridden with a Custom Cell Component by setting the innerRenderer and innerRendererParams properties on the groupRowRendererParams grid option.

The example above uses the following configuration to provide a custom inner renderer to the group column:

const gridOptions = {
    autoGroupColumnDef: {
        cellRendererParams: {
            innerRenderer: CustomMedalCellRenderer,
        },
    },

    
}

The Group Cell Renderer can be entirely replaced with a Custom Cell Component by setting the groupRowRenderer grid option.

The example above sets a custom cell renderer using the following configuration:

const gridOptions = {
    groupRowRenderer: CustomGroupCellRenderer,

    
}

Continue to the next section to learn about the Row Group Panel.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4