Tool panel PRO
Adjust columns and filters beside the Grid.
Options
Changes below update the Grid and code immediately.
Built-in tool panel tabs are enabled here. Click Columns or Filters beside the Grid to open a panel.
View code
Sample data included in the code · 6 rows
Usage guide
#Provide side panels for managing many columns and filters in one place.
Try it yourself
- Find panel tabs
Built-in tool panel tabs are enabled here. Click Columns or Filters beside the Grid to open a panel.
- Change the column configuration
Hide a column in the Columns panel, then show it again. Verify it disappears and returns in the table.
- Close panel
Close the panel to widen the table. Toggle Tool panels below to compare availability.
Adjust columns and filters without navigating to a separate app settings screen.
sideBar: true provides tabs but does not initially expand a panel. The common options below the documentation and the Grid's internal tool panels are separate UI.
Useful terms
- sideBar
- Settings for the Grid's built-in tool panel area.
- Columns / Filters
- A panel managing column visibility / a panel managing filters.
Using this feature in your product requires the Pro runtime and a valid license.
API reference
#Other properties1
| Attribute / Property | Type / Default | Description |
|---|---|---|
PRO sideBar | boolean | string | { panels?: ReadonlyArray<{ id: string } | string>; defaultOpen?: string }Default: undefined | tool-panel side bar right of the grid body (columnDefs mode only). `true` (attribute `side-bar`) docks both built-in panels closed; `'columns'` / `'filters'` docks that single panel OPENED (AG shorthand); the object form declares panels by name: `{ panels: [{ id: 'columns' | 'filters' }], defaultOpen?: id }`. Unknown ids warn once and are skipped. ships the dock frame with read-only panel bodies; Days 246/247 make them interactive. |
Events1
| Events | Detail type | Description |
|---|---|---|
PRO | { id: SideBarPanelId; open: boolean } | fires when a side-bar tool panel opens or closes. |
Methods3
| Method / Arguments | Return type | Description |
|---|---|---|
PRO id: string | Promise<boolean> | open a side-bar tool panel; false = unknown/undeclared id. |
PRO | Promise<void> | close the open tool panel (no-op when already closed). |
PRO | Promise<string | null> | the open tool panel id, or null. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.