Vue Data Grid

Side Bar

vue logo

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:

undefined / nullNo Side Bar provided.
booleanSet 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.
(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. More detailed configuration are explained below.

In the following example note the following:

  • The grid property sideBar is set to true.
  • The Side Bar is displayed with Tool Panels Columns and Filters.
  • The Columns panel is displayed by default.

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.