# Item Slicer

## Content

The item slicer can be used to filter the data.
The [GeneralSlicerData](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Slicers.GeneralSlicerData) and [TableSlicerData](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.TableSlicerData) classes contain the data to filter and also provide filter information properties. The [ItemSlicer](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.ItemSlicer) class can be used with the slicer data. The item slicer is a slicer component and is independent of the sheet. The [style](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Slicers.ItemSlicer#style) method can be used to set styles for the item slicer.

> **Note**: To work with item slicers in a SpreadJS worksheet, users need to reference the following plugins:
> gc.spread.sheets.all.js
> gc.spread.sheets.slicers.js

The following image displays an item slicer.
![item-slicer.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/item-slicer.379c4a.png)

## Using Code

This example creates a table and adds an item slicer.

```JavaScript
//create table
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();
//create item slicer and add slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
//Add the item slicer to the dom tree.
//The "slicerHost" is the div you want to add the slicer's dom to.
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div>
```

> **Note:** To upgrade to the new slicers, see [Breaking Changes](/spreadjs/docs/v16/rnotes/release-notes-for-version-1520).