# 도구 패널

도구 패널은 열 표시나 필터 설정처럼 여러 열에 걸친 작업을 한 곳에 모읍니다. 표 안의 데이터 공간과 설정 공간을 나누고 필요할 때만 여는 방식입니다.

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

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

## 동작 원리와 선택 기준

sideBar를 true로 지정하면 패널 탭을 제공하고, columns 또는 filters 문자열로 지정하면 해당 패널을 처음부터 엽니다. 앱에서도 공개 메서드로 패널을 열고 닫을 수 있습니다.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

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

## 예제 1. 열 관리부터 시작

열 숨김·표시를 자주 바꾸는 보고서에 적합합니다.

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

결과 확인: 사용자가 전체 열 목록을 보고 화면에 필요한 열을 선택할 수 있습니다.

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

## 예제 2. 필터 도구 열기

앱의 검색 설정 버튼에서 패널을 엽니다.

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

결과 확인: 반환값으로 실제 열렸는지 확인합니다. 없는 패널 ID를 보냈다고 패널이 새로 생성되는 것은 아닙니다.

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

## 예제 3. 좁은 화면에서 공간 확보

설정이 끝나면 패널을 닫고 표에 공간을 돌려줍니다.

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

결과 확인: 필터 자체를 지우는 동작과 패널을 닫는 동작은 다릅니다. 적용 중인 필터는 별도로 안내하세요.

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

## 조합할 때와 문제를 해결할 때

앱의 외부 설정 화면과 Grid 패널이 같은 값을 서로 덮어쓰지 않도록 상태 변경 이벤트를 통해 동기화합니다.

모바일에서도 패널을 닫고 표로 돌아오는 경로가 보이는지 확인합니다.

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

## 이 기능에 사용하는 API

- [sideBar](https://grid.syidax.com/ko/docs/options/sideBar.md) — 열·필터 도구 패널과 기본 열림 패널을 구성합니다. true는 탭을 제공하고 문자열은 지정 패널을 엽니다.
- [openToolPanel](https://grid.syidax.com/ko/docs/methods/openToolPanel.md) — ID로 열·필터 도구 패널을 열고 성공 여부를 반환합니다.
- [closeToolPanel](https://grid.syidax.com/ko/docs/methods/closeToolPanel.md) — 현재 열린 열·필터 도구 패널을 닫습니다. 적용 중인 설정은 지우지 않습니다.
- [getOpenedToolPanel](https://grid.syidax.com/ko/docs/methods/getOpenedToolPanel.md) — 현재 열린 도구 패널 ID 또는 null을 읽습니다.
- [toolPanelToggled](https://grid.syidax.com/ko/docs/events/toolPanelToggled.md) — 열·필터 도구 패널의 열림 상태가 바뀌었을 때 발생합니다.

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

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/tool-panels) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.