This section covers how to configure the Side Bar which contains Tool Panels.
Configuring the Side Bar
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:
Type | Description |
---|---|
undefined / null | No Side Bar provided. |
boolean | Set to true to display the Side Bar with default configuration. |
string / string[] | Set to 'columns' or 'filters' to display the Side Bar with just one of Columns or Filters Tool Panels or an array of one or both of these values. |
SideBarDef (long form) | An object of type SideBarDef (explained below) to allow detailed configuration of the Side Bar. Use this to configure the provided Tool Panels (e.g. pass parameters to the columns or filters panel) or to include custom Tool Panels. |
Boolean Configuration
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
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
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.
Properties available on the SideBarDef
interface.
A list of all the panels to place in the side bar. The panels will be displayed in the provided order from top to bottom.
|
The panel (identified by ID) to open by default. If none specified, the side bar is initially displayed closed. |
To hide the side bar by default, set this to true . If left undefined the side bar will be shown. |
Sets the side bar position relative to the grid. |
The toolPanels
property follows the ToolPanelDef
interface:
Properties available on the ToolPanelDef
interface.
The unique ID for this panel. Used in the API and elsewhere to refer to the panel. |
The key used for localisation for displaying the label. The label is displayed in the tab button. |
The default label if labelKey is missing or does not map to valid text through localisation. |
The min width of the tool panel. |
The max width of the tool panel. |
The initial width of the tool panel. |
The key of the icon to be used as a graphical aid beside the label in the side bar. |
The tool panel component to use as the panel. The provided panels use components agColumnsToolPanel and agFiltersToolPanel . To provide your own custom panel component, you reference it here.
|
Customise the parameters provided to the toolPanel component. |
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
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
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
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
The list below details all the API methods relevant to the Tool Panel.
Returns the current side bar configuration. If a shortcut was used, returns the detailed long form. |
Show/hide the entire side bar, including any visible panel and the tab buttons. |
Returns true if the side bar is visible. |
Sets the side bar position relative to the grid. Possible values are 'left' or 'right' . |
Opens a particular tool panel. Provide the ID of the tool panel to open. |
Closes the currently open tool panel (if any). |
Returns the ID of the currently shown tool panel if any, otherwise null . |
Returns true if the tool panel is showing, otherwise false . |
Force refresh all tool panels by calling their refresh method. |
Gets the tool panel instance corresponding to the supplied id . |
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
Now that we covered the Side Bar, continue to the next section to learn about the Columns Tool Panel.