# 항목 슬라이서

## Content

항목 슬라이서를 사용하여 데이터를 필터링할 수 있습니다.

[GeneralSlicerData](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Slicers.GeneralSlicerData) 및 [TableSlicerData](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.TableSlicerData) 클래스는 필터링할 데이터를 포함하며 필터 정보 속성도 제공합니다. [ItemSlicer](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.ItemSlicer) 클래스는 이 슬라이서 데이터와 함께 사용할 수 있습니다. 항목 슬라이서는 슬라이서 구성 요소이며 시트와는 독립적으로 동작합니다. [style](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.ItemSlicer#style) 메서드를 사용하여 항목 슬라이서의 스타일을 설정할 수 있습니다.

>type=warning
> **참고:** SpreadJS 워크시트에서 항목 슬라이서를 사용하려면 다음 플러그인을 참조해야 합니다:
>
> * `gc.spread.sheets.all.js`
> * `gc.spread.sheets.slicers.js`

아래 이미지는 항목 슬라이서를 보여줍니다.
![item-slicer.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/item-slicer.379c4a.png)

## 코드 사용

다음 예제는 테이블을 생성하고 항목 슬라이서를 추가합니다.

```JavaScript
//테이블 생성
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);
var slicerData = table.getSlicerData();
// 항목 슬라이서를 생성하고 슬라이서 데이터 연결
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
// 항목 슬라이서를 DOM 트리에 추가
// "slicerHost"는 슬라이서를 추가할 div입니다.
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div>
```

>type=warning
> **참고:** 새로운 슬라이서로 업그레이드하려면 [릴리스 소식](/spreadjs/docs/v18/rnotes/release-notes-for-version-1520) 문서를 참고하시기 바랍니다.