Results:
Loading...
Framework:Javascript Data GridReact Data GridAngular Data GridVue Data Grid

Vue Data Grid: Tool Panels

This section covers Tool Panels, available via the grid's Side Bar, which allow for easy access to powerful grid operations such as grouping, pivoting, and filtering. Custom Tool Panels can also be provided to the grid.

Overview

Tool Panels are panels that sit in the Side Bar to the right of the grid. The Side Bar allows access to the tool panels via buttons that work like tabs. The Side Bar and a Tool Panel are highlighted in the screenshot below.

Side Bar

Provided Tool Panels

The grid provides the following Tool Panels:

Custom Tool Panel Components

In addition to the provided Tool Panels, it is also possible to provide custom Tool Panels.

For more details refer to the section: Custom Tool Panel Components.

API

The gridApi has the following methods that can be used to interact with the tool panel.

openToolPanel
Function
Opens a particular tool panel. Provide the ID of the tool panel to open. 
openToolPanel = (key: string) => void;
closeToolPanel
Function
Closes the currently open tool panel (if any). 
closeToolPanel = () => void;
getOpenedToolPanel
Function
Returns the ID of the currently shown tool panel if any, otherwise null. 
getOpenedToolPanel = () => string | null;
isToolPanelShowing
Function
Returns true if the tool panel is showing, otherwise false. 
isToolPanelShowing = () => boolean;
refreshToolPanel
Function
Force refresh all tool panels by calling their refresh method. 
refreshToolPanel = () => void;
getToolPanelInstance
Function
Gets the tool panel instance corresponding to the supplied id. 
getToolPanelInstance = (id: string) => TToolPanel | undefined;

Events

The following events are emitted from the tool panel.

toolPanelVisibleChanged
ToolPanelVisibleChangedEvent
The tool panel was hidden or shown. Use api.isToolPanelShowing() to get status. 
onToolPanelVisibleChanged = (
    event: ToolPanelVisibleChangedEvent<TData>
) => void;

interface ToolPanelVisibleChangedEvent<TData = any> {
  source: string | undefined;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
  // Event identifier 
  type: string;
}
toolPanelSizeChanged
ToolPanelSizeChangedEvent
The tool panel size has been changed. 
onToolPanelSizeChanged = (
    event: ToolPanelSizeChangedEvent<TData>
) => void;

interface ToolPanelSizeChangedEvent<TData = any> {
  // Event identifier 
  type: 'toolPanelSizeChanged';
  // True if this is the first change to the Tool Panel size. 
  started: boolean;
  // True if this is the last change to the Tool Panel size. 
  ended: boolean;
  // New width of the ToolPanel component. 
  width: number;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

Next Up

Before covering the Tool Panels in detail, continue to the next section to learn about the Side Bar.