# Tool panel

Tool panels collect cross-column tasks such as visibility and filter settings. They separate data space from settings space and open only when needed.

Canonical: https://grid.syidax.com/docs/features/tool-panels/

<a id="understand"></a>

## How it works and when to use it

Set sideBar to true for panel tabs, or to columns or filters to open that panel initially. The app can also open and close panels through public methods.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Start with column management

Useful for reports where column visibility changes frequently.

```javascript
grid.sideBar = 'columns';
```

Verify the result: Users can review the full column list and choose which columns to show.

<a id="example-2"></a>

## Example 2. Open filter tools

Open the panel from the app's search-settings button.

```javascript
grid.sideBar = true;
const opened = await grid.openToolPanel('filters');
console.log(opened, await grid.getOpenedToolPanel());
```

Verify the result: Check the return value to confirm it opened. Passing an unknown panel ID does not create a panel.

<a id="example-3"></a>

## Example 3. Recover space on narrow screens

Close the panel after configuration to return space to the table.

```javascript
await grid.closeToolPanel();
```

Verify the result: Closing a panel does not clear its filters. Indicate active filters separately.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Synchronize through state-change events so external app settings and Grid panels do not overwrite each other.

Check that mobile users can see how to close the panel and return to the table.

<a id="related-api"></a>

## APIs used by this feature

- [sideBar](https://grid.syidax.com/docs/options/sideBar.md) — Configures column/filter tool panels and the initially open panel. true provides tabs; a string opens the specified panel.
- [openToolPanel](https://grid.syidax.com/docs/methods/openToolPanel.md) — Opens a column/filter tool panel by ID and returns success.
- [closeToolPanel](https://grid.syidax.com/docs/methods/closeToolPanel.md) — Closes the open column/filter panel without clearing applied settings.
- [getOpenedToolPanel](https://grid.syidax.com/docs/methods/getOpenedToolPanel.md) — Reads the open tool panel ID or null.
- [toolPanelToggled](https://grid.syidax.com/docs/events/toolPanelToggled.md) — Emitted when column/filter tool panel visibility changes.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/tool-panels) — The guide describes which interactions are available to try.