Vue Data GridSide Bar

This section covers how to configure the Side Bar which contains Tool Panels.

Configuring the Side Bar Copy

The Side Bar is configured using the grid property sideBar. The property takes multiple forms to allow easy configuration or more advanced configuration. The different forms for the sideBar property are as follows:

Boolean Configuration Copy

The default Side Bar contains the Columns and Filters Tool Panels. To use the default Side Bar, set the grid property sideBar=true. The Columns panel will be open by default.

The default configuration doesn't allow customisation of the Tool Panels.

String Configuration Copy

To display just one of the provided Tool Panels, set either sideBar='columns' or sideBar='filters'. This will display the desired item with default configuration. Alternatively pass one or both as a string[], i.e sideBar=['columns','filters'].

The example below demonstrates using the string configuration. Note the following:

• The grid property sideBar is set to 'filters'.
• The Side Bar is displayed showing only the Filters panel.

SideBarDef Configuration Copy

The previous configurations are shortcuts for the full fledged configuration using a SideBarDef object. For full control over the configuration, you must provide a SideBarDef object.

The toolPanels property follows the ToolPanelDef interface:

The following snippet shows configuring the Tool Panel using a SideBarDef object:

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

this.sideBar = {
    toolPanels: [
        {
            id: 'columns',
            labelDefault: 'Columns',
            labelKey: 'columns',
            iconKey: 'columns',
            toolPanel: 'agColumnsToolPanel',
            minWidth: 225,
            maxWidth: 225,
            width: 225
        },
        {
            id: 'filters',
            labelDefault: 'Filters',
            labelKey: 'filters',
            iconKey: 'filter',
            toolPanel: 'agFiltersToolPanel',
            minWidth: 180,
            maxWidth: 400,
            width: 250
        }
    ],
    position: 'left',
    defaultToolPanel: 'filters'
};

The snippet above is demonstrated in the following example:

Configuration Shortcuts Copy

The boolean and string configurations are shortcuts for more detailed configurations. When you use a shortcut the grid replaces it with the equivalent long form of the configuration by building the equivalent SideBarDef.

The following code snippets show an example of the boolean shortcut and the equivalent SideBarDef long form.

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

// shortcut
this.sideBar = true;

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

// equivalent detailed long form
this.sideBar = {
    toolPanels: [
        {
            id: 'columns',
            labelDefault: 'Columns',
            labelKey: 'columns',
            iconKey: 'columns',
            toolPanel: 'agColumnsToolPanel',
        },
        {
            id: 'filters',
            labelDefault: 'Filters',
            labelKey: 'filters',
            iconKey: 'filter',
            toolPanel: 'agFiltersToolPanel',
        }
    ],
    defaultToolPanel: 'columns',
};

The following code snippets show an example of the string shortcut and the equivalent SideBarDef long form.

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

// shortcut
this.sideBar = 'filters';

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

// equivalent detailed long form
this.sideBar = {
    toolPanels: [
        {
            id: 'filters',
            labelDefault: 'Filters',
            labelKey: 'filters',
            iconKey: 'filter',
            toolPanel: 'agFiltersToolPanel',
        }
    ],
    defaultToolPanel: 'filters',
};

You can also use shortcuts inside the toolPanel.items array for specifying the Columns and Filters items.

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

// shortcut
this.sideBar = {
    toolPanels: ['columns', 'filters']
};

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

// equivalent detailed long form
this.sideBar = {
    toolPanels: [
        {
            id: 'columns',
            labelDefault: 'Columns',
            labelKey: 'columns',
            iconKey: 'columns',
            toolPanel: 'agColumnsToolPanel',
        },
        {
            id: 'filters',
            labelDefault: 'Filters',
            labelKey: 'filters',
            iconKey: 'filter',
            toolPanel: 'agFiltersToolPanel',
        }
    ]
};

Side Bar Customisation Copy

If you are using the long form (providing a SideBarDef object) then it is possible to customise. The example below changes the filter label and icon.

Providing Parameters to Tool Panels Copy

Parameters are passed to Tool Panels via the toolPanelParams object. For example, the following code snippet sets suppressRowGroups: true and suppressValues: true for the Columns Tool Panel.

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

this.sideBar = {
    toolPanels: [
        {
            id: 'columns',
            labelDefault: 'Columns',
            labelKey: 'columns',
            iconKey: 'columns',
            toolPanel: 'agColumnsToolPanel',
            toolPanelParams: {
                suppressRowGroups: true,
                suppressValues: true,
            }
        }
    ]
};

See the Columns Tool Panel documentation for the full list of possible parameters to this Tool Panel.

Side Bar API Copy

The list below details all the API methods relevant to the Tool Panel.

The example below demonstrates different usages of the Tool Panel API methods. The following can be noted:

• Initially the Side Bar is not visible as sideBar.hiddenByDefault=true.
• Visibility Buttons: These toggle visibility of the Tool Panel. Note that when you make visible=false, the entire Tool Panel is hidden including the tabs. Make sure the Tool Panel is left visible before testing the other API features so you can see the impact.
• Open / Close Buttons: These open and close different Tool Panel items.
• Reset Buttons: These reset the Tool Panel to a new configuration. Notice that shortcuts are provided as configuration however getSideBar() returns back the long form.
• Position Buttons: These change the position of the Side Bar relative to the grid.

Next Up Copy

Now that we covered the Side Bar, continue to the next section to learn about the Columns Tool Panel.