Expand All

  Getting Started



  Row Models





Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Tool Panel

The tool panel is where you can change the state of the columns. This includes show / hide, move and group.

The tool panel panel can be shown be default by setting 'showToolPanel=true' property, or after the grid is initialised by calling the api function showToolPanel(show). You can query if the tool panel is showing with the api isToolPanelShowing().

Suppress Values

If you don't want to show the values list in the tool panel, set toolPanelSuppressValues=true property. This is useful if you don't want aggregation, or you have provided your own aggregation function (which would then not use the values selected here).

Suppress Group

If you don't want to show the group row, set toolPanelSuppressRowGroups=true property. This is used if you just want simple column visibility and reordering functionality in the tool panel. Note that hiding the group has the impact of also hiding the values, as it doesn't make sense to have values if you are not grouping.

Tool Panel Actions

Show / Hide Columns

All columns are visible by default. To hide a column when first displaying the grid, mark the column definition with hide = true.

To hide a column using the tool panel, click the icon beside the columns name.

Group by Columns

To group by a column, drag the column down to the group GUI. The order of the column in the group list can be changed by dragging, with the first value been the top most group.

Aggregate Columns

To mark a column as a value (for aggregation), drag the column down to the value GUI. From here you can select the aggregation function (sum, min or max). This aggregation function will only work when you are using the default aggregation (ie you are not providing your own aggregation function).

Styling Columns in Tool Panel

You can add a CSS class to the columns in the tool panel by specifying toolPanelHeaderClass in the column definintion as follows:

colDefs = {
    // set as string
    {headerName: "Gold", field: "gold", toolPanelClass: 'tp-gold'},

    // set as array of strings
    {headerName: "Silver", field: "silver", toolPanelClass: ['tp-silver']},

    // set as function returning string or array of strings
    {headerName: "Bronze", field: "bronze",
        toolPanelClass: function(params) {
            return 'tp-bronze';

Tool Panel Example

The example below demonstrates the tool panel. Note the following:

  • suppressRowGroup and suppressAggregation are used so that the 'number of wins' columns cannot be grouped and the other columns cannot be aggregated (as doing either of these just wouldn't make sense).
  • The gold, silver and bronze columns have style applied using toolPanelClass
  • The country column uses a headerValueGetter to give the column a slightly different name when dependent on where it appears using the location parameter.

Suppress Example

Below shows using the suppress properties that can be used with the toolpanel as follows:

  • Grid Property toolPanelSuppressRowGroups: When true, the row group section does not appear in the tool panel.
  • Grid Property toolPanelSuppressValues: When true, the value section does not appear in the tool panel.
  • Grid Property toolPanelSuppressPivots: When true, the pivot section does not appear in the tool panel.
  • Grid Property toolPanelSuppressPivotMode: When true, the pivot mode section does not appear in the tool panel.
  • Column Property suppressToolPanel: When true, the column will not appear in the tool panel or in the column section of the column menu. This is useful when you have a column working in the background, eg a column you want to group by, but not present to the user.

Read Only Functions

By setting the property functionsReadOnly=true, the grid will prevent changes to group, pivot or values through the GUI. This is useful if you want to show the user the group, pivot and values panel, so they can see what columns are used, but prevent them from making changes to the selection.