Vue Data Grid

Columns Tool Panel

vue logo

The Columns Tool Panel provides functions for managing the grid's columns.


Below shows an example of the Columns Tool Panel. The following can be noted:

  • Grid property sideBar='columns' which shows only the Columns Tool Panel.
  • Grid property defaultColDef has enableValue, enableRowGroup and enablePivot set. This means all columns can be dragged to any of the Row Groups, Values and Column sections. Although each column can be dragged to these sections, it does not make sense to do so. For example, it does not make sense to aggregate the country column, but it does make sense to group rows by country.

Things to try:

  • Checking / unchecking columns will show / hide the columns.

  • Drag and Drop a column inside the columns sections to reorder columns in the grid.

  • Drag a column (e.g. Country) to Row Groups to group rows.

  • Drag a column (e.g. Gold) to Values to aggregate.

  • Reset (refresh) the demo and do the following:

    • Click 'Pivot Mode'.
    • Drag 'Country' to 'Row Groups'.
    • Drag 'Year' to 'Column Labels'.
    • Drag 'Gold' to 'Values'.

    You will now have a pivot grid showing total gold medals for each country (rows showing countries) by year (columns showing years).

Remember to mark the column definitions with enableRowGroup for grouping, enablePivot for pivoting and enableValue for aggregation, otherwise you won't be able to drag and drop the columns to the desired sections.

Selection Action

Selecting columns means different things depending on whether the grid is in pivot mode or not as follows:

  • Pivot Mode Off: When pivot mode is off, selecting a column toggles the visibility of the column. A selected column is visible and an unselected column is hidden. With allowDragFromColumnsToolPanel=true, you can drag a column from the tool panel onto the grid and it will become visible.
  • Pivot Mode On: When pivot mode is on, selecting a column will trigger the column to be either aggregated, grouped or pivoted depending on what is allowed for that column.

Columns Tool Panel Sections

The Columns Tool Panel is split into different sections as described from the top:

  • Top area
    • Pivot Mode Section: Check the 'Pivot Mode' checkbox to turn the grid into Pivot Mode. Uncheck to take the grid out of pivot mode.
    • Expand / Collapse All: Toggle to expand or collapse all column groups.
  • Columns Section
    • This section displays all columns, grouped by column groups, that are available to be displayed in the grid. By default the order of the columns is kept in sync with the order they are shown in the grid, but this behaviour can be disabled.
    • Select / Unselect All: Toggle to select or unselect all columns in the columns section.
    • Select / Unselect Column (or Group): Each column can be individually selected. The Selection Action depends on pivot mode.
    • Drag Handle: Each column can be dragged either with the mouse or via touch on touch devices. The column can then be dragged to one of the following:
      1. Row Groups Section
      2. Values (Pivot) Section
      3. Column Labels Section
      4. Onto the grid (when gridOptions.allowDragFromColumnsToolPanel=true)
      5. Inside Columns Section to reorder columns (see Suppress Column Reordering)
  • Row Groups Section
  • Values Section
    • Columns here will form the grid's Aggregations. The grid calls this function 'Aggregations', however for the UI we follow the Excel naming convention and call it 'Values'.
  • Column Labels (Pivot) Section
    • Columns here will form the grid's Pivot. The grid calls this function 'Pivot', however for the UI we follow the Excel naming convention and call it 'Column Labels'.

Section Visibility

It is possible to remove items from the tool panel. Items are suppressed by setting one or more of the following toolPanelParams to true whenever you are using the agColumnsToolPanel component properties:

{% interfaceDocumentation interfaceName="ToolPanelColumnCompParams" exclude="["api", "columnApi"] config={"overrideBottomMargin":"1rem"} /%}

To remove a particular column from the tool panel, set the column property suppressColumnsToolPanel to true. This is useful when you have a column working in the background, e.g. a column you want to group by, but not visible to the user.