# 표 슬라이서

## Content

표 슬라이서는 데이터를 빠르게 필터링할 수 있는 기능을 제공합니다. 드롭다운 목록을 사용하지 않고도 필터링 상태를 확인할 수 있으며, 현재 필터링된 상태를 시각적으로 표시해줍니다.
표 슬라이서는 `ShapeBase`를 기반으로 하며 다음과 같은 기능을 지원합니다:

* **그라데이션 채우기 (Gradient Fill)**: 슬라이서 항목에 마우스를 올리면 그라데이션 효과가 나타납니다.
* **다중 선택 모드 (Multi-Select Mode)**: 슬라이서 오른쪽 상단에 있는 다중 선택 버튼을 클릭하여 한 번에 여러 필터 항목을 선택할 수 있습니다. 다중 선택 버튼을 비활성화하면 한 번에 하나의 항목만 선택할 수 있습니다.
* **향상된 성능 (Improved Performance)**: `ShapeForm` 컨트롤로 구현되어 워크시트에서 대량의 데이터를 필터링할 수 있습니다.
* **최적화된 스타일 렌더링 (Optimized style rendering)**: 스타일 렌더링에 대한 자세한 내용은 [표 슬라이서 스타일](/spreadjs/docs/v19/features/tablegen/slicer#%ED%91%9C-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EC%84%9C-%EC%8A%A4%ED%83%80%EC%9D%BC) 문서를 참조하시기 바랍니다.

>type=warning
> **참고**: SpreadJS 워크시트에서 표 슬라이서를 사용하려면 다음 플러그인을 참조해야 합니다:
> `gc.spread.sheets.all.js`
> `gc.spread.sheets.shapes.js`
> `gc.spread.sheets.slicers.js`
> slicers 플러그인은 shapes 플러그인에 의존하므로, 먼저 shapes 플러그인을 가져와야 합니다.

표 슬라이서 구성 요소는 슬라이서 헤더와 슬라이서 본문으로 구성됩니다. 슬라이서 헤더는 슬라이서 캡션, 다중 선택 버튼, 필터 초기화 버튼으로 구성됩니다.

![table-slicer-elements.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/table-slicer-elements.e6d127.png)
표 슬라이서는 표에 종속되므로, 슬라이서를 생성하려면 먼저 표를 추가해야 합니다. 슬라이서를 추가하려면 `add` 메서드를 사용하며, 슬라이서에 대한 옵션은 `Slicers` 클래스를 통해 설정할 수 있습니다.
![table-slicer-data.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/table-slicer-data.330814.png)
다음 코드는 표와 슬라이서를 생성하는 예제입니다:

```JavaScript
//표 생성
datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]
];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);

// 시트에 슬라이서를 추가하고 슬라이서 인스턴스를 반환
var slicer = activeSheet.slicers.add("slicer1", table.name(), "Name");
// 슬라이서 속성을 변경
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(GC.Spread.Sheets.Slicers.SlicerStyles.dark4());
```

슬라이서는 이동, 크기 조정, 삭제, 잘라내기, 복사, 붙여넣기, 실행 취소 또는 다시 실행할 수 있습니다.
다른 슬라이서에 의해 필터링된 항목은 "데이터 있음 항목(has data items)" 및 "데이터 없음 항목(no data items)"으로 분류됩니다. 슬라이서에 의해 필터링된 항목은 "선택된 항목(selected items)" 및 "선택되지 않은 항목(unselected items)"으로 분류됩니다.

| 항목 유형 | 설명 |
| ----- | --- |
| no data items | 다른 슬라이서에 의해 필터링된 항목 |
| has data items | 다른 슬라이서에 의해 필터링되지 않은 항목 |
| selected items | 해당 슬라이서에 의해 필터링된 항목 |
| unselected items | 해당 슬라이서에 의해 필터링되지 않은 항목 |

슬라이서는 표 필터와 동기화됩니다. 다음과 같은 표 변경은 슬라이서의 변경을 유발합니다.

| 표 변경 | 슬라이서 변경 |
| ---- | ------- |
| 데이터 수정 | 슬라이서 항목 변경됨 |
| 열 이름 수정 | 슬라이서 캡션 변경됨 |
| 행 추가 | 슬라이서 항목 변경됨 |
| 열 추가 | 변경 없음 |
| 행 삭제 | 슬라이서 항목 변경됨 |
| 열 삭제 | 해당 열에 연결된 슬라이서 제거됨 |
| 표 제거 | 해당 표에 연결된 모든 슬라이서 제거됨 |

[Slicers](/spreadjs/api/v19/modules/GC.Spread.Sheets.Slicers) 클래스를 사용하여 슬라이서에 대한 옵션을 설정할 수 있습니다. 슬라이서의 표시 여부 또는 잠금 여부는 각각 [isVisible](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.Slicer#isVisible) 또는 [isLocked ](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.Slicer#isLocked)메서드를 사용하여 지정할 수 있습니다. `isLocked` 메서드는 시트가 보호된 경우에만 적용됩니다. `slicers.`[add](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.SlicerCollection#add) 메서드로 슬라이서를 추가할 수 있으며, `slicers.`[remove](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.SlicerCollection#remove) 메서드로 슬라이서를 제거할 수 있습니다.
행 또는 열을 이동하거나 크기를 조정하면 [dynamicMove](/spreadjs/api/v19/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicMove) 및 [dynamicSize](/spreadjs/api/v19/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicSize) 메서드의 설정에 따라 슬라이서의 위치 및 크기가 변경될 수 있습니다. 아래 표는 `dynamicMove` 및 `dynamicSize` 설정에 따른 결과를 보여줍니다.

| DynamicMove | DynamicSize | 결과 |
| ----------- | ----------- | --- |
| true | true | 슬라이서가 이동 및 크기 조정됨 |
| true | false | 슬라이서가 이동되지만 크기 조정되지 않음 |
| false | true 또는 false | 슬라이서가 이동되거나 크기 조정되지 않음 |

## 표 슬라이서 데이터 사용

[TableSlicerData](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.TableSlicerData) 클래스는 슬라이서에 대한 표 데이터 및 필터링 정보를 제공합니다. `TableSlicerData`에 사용되는 데이터 원본은 SpreadJS `SheetTable`입니다. `TableSlicerData`를 사용하려면 생성자에 `SheetTable`을 설정해야 합니다.
다음 코드 샘플은 표를 만들고 `TableSlicerData` 클래스를 사용하여 슬라이서를 추가하는 방법을 보여줍니다.

```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"는 슬라이서의 DOM을 추가할 div입니다.
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div>       
```

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

## 표 슬라이서 스타일

내장 스타일을 사용하거나, 헤더와 같은 특정 영역에 대해 스타일을 설정할 수 있습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/sliderclear.png)
[SlicerStyles](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.SlicerStyles) 클래스를 참조하면 사용할 수 있는 내장 스타일 목록을 확인할 수 있습니다. [SlicerStyles](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.SlicerStyles) 클래스는 특정 스타일 영역을, [SlicerStyleInfo](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.SlicerStyleInfo)클래스는 변경 가능한 스타일 속성을 제공합니다. [SlicerStyleInfo](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.SlicerStyleInfo) 클래스를 사용하면 스타일에 테두리를 생성할 수 있습니다.

다음 코드 샘플은 표를 만들고 헤더 스타일이 지정된 슬라이서를 추가하는 방법을 보여줍니다.

```javascript
//표 생성
datas = [
    ["1", "NewYork", "1968/6/8", "80", "180"],
    ["4", "NewYork", "1972/7/3", "72", "168"],
    ["4", "NewYork", "1964/3/2", "71", "179"],
    ["5", "Washington", "1972/8/8","80", "171"],
    ["6", "Washington", "1986/2/2", "89", "161"],
    ["7", "Washington", "2012/2/15", "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
hstyle.backColor("red");
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
style1.headerStyle(hstyle);
// 시트에 슬라이서를 추가하고 슬라이서 인스턴스를 반환
var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
// 슬라이서 속성 변경
slicer.width(200);
slicer.height(200);
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(style1);
```