# 표 슬라이서

## Content

SpreadJS 디자이너 컴포넌트를 사용하여 표에 슬라이서를 만들 수 있습니다.
슬라이서를 추가하는 방법은 다음과 같습니다.

1. 데이터를 입력한 후, 삽입 탭의 표 옵션을 사용하여 표를 삽입합니다.
<br>
    ![1.01a11c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/1.01a11c.8778f4.gif?width=600)
<br>
2. **테이블 디자인**(TABLE DESIGN) 탭의 **도구**(Tools) 그룹에서 ‘**슬라이서 삽입**(Insert Slicer)’ 옵션을 선택합니다.
<br>
    ![2.8c2e8c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/2.8c2e8c.dd0977.png?width=800)
<br>
3. ‘**슬라이서 삽입**(Insert Slicer)’ 대화 상자가 표시되면, 슬라이서를 만들 컬럼을 하나 이상 선택하세요.
<br>
    ![3.7b95f1.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/3.7b95f1.79512b.png?width=800)
<br>
4. **슬라이서**(SLICER) 탭에서 캡션, 높이, 너비, 열 수, 스타일 등을 설정할 수 있습니다.
<br>
    ![4.41745c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.41745c.f72108.png?width=800)
<br>
5. **슬라이서** 섹션의 ‘**슬라이서 설정**(Slicer Settings)’ 대화 상자를 사용하여 헤더 표시 여부 등 추가 옵션을 설정할 수 있습니다.
<br>
    ![5.be1dac.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/5.be1dac.edb398.png)

슬라이서에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴를 표시할 수 있습니다.

![6.470bad.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/6.470bad.e2b315.png?width=800)

메뉴의 ‘**크기 및 속성**(Size and Properties)’ 옵션을 선택하면 다음과 같은 ‘**슬라이서 서식**(Format Slicer)’ 대화 상자가 표시됩니다. 이 대화 상자는 **위치 및 레이아웃**(Position and Layout), **크기**(Size), **속성**(Properties) 탭으로 구성되어 있습니다.
‘**슬라이서 서식**’ 대화 상자에서는 슬라이서의 가로 및 세로 위치, 열 수, 크기 조절 및 이동 비활성화 여부, 원래 크기를 기준으로 한 너비와 높이의 비율 조정, 셀에 맞춰 이동 및 크기 조절 여부 등을 설정할 수 있습니다.
![7.3e434b.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/7.3e434b.dae1da.png)

![8.e62a78.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/8.e62a78.e08938.png)

![9.ae12fc.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/9.ae12fc.cbea4f.png)