# GC.Spread.Sheets.Slicers.ItemSlicer

## Content

# Class: ItemSlicer

[Sheets](../modules/GC.Spread.Sheets).[Slicers](../modules/GC.Spread.Sheets.Slicers).ItemSlicer

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.Slicers.ItemSlicer#constructor)

### Methods

- [captionName](GC.Spread.Sheets.Slicers.ItemSlicer#captionname)
- [columnCount](GC.Spread.Sheets.Slicers.ItemSlicer#columncount)
- [getDOMElement](GC.Spread.Sheets.Slicers.ItemSlicer#getdomelement)
- [getStyleName](GC.Spread.Sheets.Slicers.ItemSlicer#getstylename)
- [height](GC.Spread.Sheets.Slicers.ItemSlicer#height)
- [itemHeight](GC.Spread.Sheets.Slicers.ItemSlicer#itemheight)
- [name](GC.Spread.Sheets.Slicers.ItemSlicer#name)
- [showHeader](GC.Spread.Sheets.Slicers.ItemSlicer#showheader)
- [showNoDataItems](GC.Spread.Sheets.Slicers.ItemSlicer#shownodataitems)
- [showNoDataItemsInLast](GC.Spread.Sheets.Slicers.ItemSlicer#shownodataitemsinlast)
- [sortState](GC.Spread.Sheets.Slicers.ItemSlicer#sortstate)
- [style](GC.Spread.Sheets.Slicers.ItemSlicer#style)
- [visuallyNoDataItems](GC.Spread.Sheets.Slicers.ItemSlicer#visuallynodataitems)
- [width](GC.Spread.Sheets.Slicers.ItemSlicer#width)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new ItemSlicer**(`name`, `slicerData`, `columnName`)

Represents an item slicer.

**`example`**
```javascript
//This example creates an item slicer.
var activeSheet = spread.getActiveSheet();
//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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
document.getElementById("slicerHost").appendChild(slicer.getDOMElement());
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | The name of the item slicer. |
| `slicerData` | [`GeneralSlicerData`](GC.Spread.Slicers.GeneralSlicerData) | An instance of the GeneralSlicerData or TableSlicerData. |
| `columnName` | `string` | The column name that relates to the item slicer. |

## Methods

### <a id="captionname" name="captionname"></a> captionName

▸ **captionName**(`value?`): `any`

Gets or sets the caption name of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.captionName();
console.log(oldValue);
slicer.captionName('Slicer_Caption');
var newValue = slicer.captionName();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `string` | The caption name of the item slicer. captionName property is displayed in the header of the slicer. |

#### Returns

`any`

If no value is set, returns the caption name of the item slicer; otherwise, returns the item slicer.

___

### <a id="columncount" name="columncount"></a> columnCount

▸ **columnCount**(`value?`): `any`

Gets or sets the column count of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.columnCount();
console.log(oldValue);
slicer.columnCount(3);
var newValue = slicer.columnCount();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `number` | The column count of the item slicer.  The columnCount property of a slicer specifies the number of columns displayed per row within the slicer. |

#### Returns

`any`

If no value is set, returns the column count of the item slicer; otherwise, returns the item slicer.

___

### <a id="getdomelement" name="getdomelement"></a> getDOMElement

▸ **getDOMElement**(): `HTMLElement`

Gets the dom element of the item slicer.

**`example`**
```javascript
//This example creates an item slicer.
//create table
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
document.getElementById("slicerHost").appendChild(slicer.getDOMElement());
```

#### Returns

`HTMLElement`

The dom element of the item slicer.

___

### <a id="getstylename" name="getstylename"></a> getStyleName

▸ **getStyleName**(): `undefined` \| `string`

Gets or sets a style name for the table item slicer.

#### Returns

`undefined` \| `string`

returns the table item slicer style name.

___

### <a id="height" name="height"></a> height

▸ **height**(`value?`): `any`

Gets or sets the height of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.height();
console.log(oldValue);
slicer.height(120);
var newValue = slicer.height();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `number` | The height of the item slicer. The height property of a slicer specifies the vertical dimension or height of the slicer, determining its size along the y-axis. |

#### Returns

`any`

If no value is set, returns the height of the item slicer; otherwise, returns the item slicer.

___

### <a id="itemheight" name="itemheight"></a> itemHeight

▸ **itemHeight**(`value?`): `any`

Gets or sets the item height of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.itemHeight();
console.log(oldValue);
slicer.itemHeight(34);
var newValue = slicer.itemHeight();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `number` | The item height of the item slicer. The ItemHeight property of a slicer specifies the height of each item or row within the slicer control. |

#### Returns

`any`

If no value is set, returns the item height of the item slicer; otherwise, returns the item slicer.

___

### <a id="name" name="name"></a> name

▸ **name**(`value?`): `any`

Gets or sets the name of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set slicer data to item slicer.
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
var oldValue = slicer.name();
console.log(oldValue);
slicer.name('SlicerA');
var newValue = slicer.name();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `string` | The name of the item slicer. The name property of a slicer specifies the unique identifier or label assigned to the slicer, allowing for identification and reference within the workbook or programmatic interactions. |

#### Returns

`any`

If no value is set, returns the name of the item slicer; otherwise, returns the item slicer.

___

### <a id="showheader" name="showheader"></a> showHeader

▸ **showHeader**(`value?`): `any`

Gets or sets whether to show the header of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.showHeader();
console.log(oldValue);
slicer.showHeader(false);
var newValue = slicer.showHeader();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `boolean` | The show header setting of the item slicer. The showHeader property of a slicer specifies whether the header, which includes the title and filter-related controls, is displayed in the slicer. |

#### Returns

`any`

If no value is set, returns whether to show the header of the item slicer; otherwise, returns the item slicer.

___

### <a id="shownodataitems" name="shownodataitems"></a> showNoDataItems

▸ **showNoDataItems**(`value?`): `any`

Gets or sets whether to show the no data items of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.showNoDataItems();
console.log(oldValue);
slicer.showNoDataItems(false);
var newValue = slicer.showNoDataItems();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `boolean` | The show no data items setting of the slicer. The showNoDataItems property of a slicer specifies whether to display items with no associated data in the connected PivotTable or data source within the slicer control. |

#### Returns

`any`

If no value is set, returns whether to show the no data items of the item slicer; otherwise, returns the item slicer.

___

### <a id="shownodataitemsinlast" name="shownodataitemsinlast"></a> showNoDataItemsInLast

▸ **showNoDataItemsInLast**(`value?`): `any`

Gets or sets whether to show the no data items last.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.showNoDataItemsInLast();
console.log(oldValue);
slicer.showNoDataItemsInLast(false);
var newValue = slicer.showNoDataItemsInLast();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `boolean` | The show no data items in last setting of the slicer. The showNoDataItemsInLast property specifies whether items without associated data should be displayed at the end of the slicer\u2019s list. |

#### Returns

`any`

If no value is set, returns whether to show the no data items last; otherwise, returns the item slicer.

___

### <a id="sortstate" name="sortstate"></a> sortState

▸ **sortState**(`value?`): `any`

Gets or sets the sort state of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.sortState();
console.log(oldValue);
slicer.sortState(GC.Spread.Sheets.SortState.descending);
var newValue = slicer.sortState();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | [`SortState`](../enums/GC.Spread.Sheets.SortState) | The sort state of the item slicer. The sortState property of a slicer specifies the current sorting state applied to the items within the slicer, indicating whether they are sorted in ascending, descending order, or not sorted. |

#### Returns

`any`

If no value is set, returns the sort state of the item slicer; otherwise, returns the item slicer.

___

### <a id="style" name="style"></a> style

▸ **style**(`value?`): [`SlicerStyle`](GC.Spread.Sheets.Slicers.SlicerStyle) \| [`ItemSlicer`](GC.Spread.Sheets.Slicers.ItemSlicer)

Gets or sets the style of the item slicer.

**`example`**
```javascript
The style is json data, its json schema is as follows:
{
     "$schema" : "http://json-schema.org/draft-04/schema#",
     "title" : "style",
     "type" : "object",
     "properties" : {
         "wholeSlicerStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "headerStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "selectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "selectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "unSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "unSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredUnSelectedItemWithDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         },
         "hoveredUnSelectedItemWithNoDataStyle" : {
             "$ref" : "#/definitions/StyleInfo"
         }
     },
     "definitions" : {
         "StyleInfo" : {
             "type" : "object",
             "properties" : {
                     "backColor" : {
                             "type" : "string"
                     },
                     "foreColor" : {
                             "type" : "string"
                     },
                     "font" : {
                             "type" : "string"
                     },
                     "borderLeft" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderTop" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderRight" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                     "borderBottom" : {
                             "$ref" : "#/definitions/SlicerBorder"
                     },
                 "textDecoration":{
                     "type" : "string"
                 }
             }
         },
         "SlicerBorder":{
             "type":"object",
             "properties":{
                 "borderWidth":{
                         "type":"number"
                 },
                 "borderStyle":{
                         "type":"string"
                 },
                 "borderColor":{
                         "type":"string"
                 }
          }
         }
     }
 }
using sample:
var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
style.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '16pt Calibri'));
style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'green'));
style.selectedItemWithDataStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, undefined, undefined, new GC.Spread.Sheets.LineBorder('pink', GC.Spread.Sheets.LineStyle.double)));
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.style();
console.log(oldValue);
slicer.style(style);
var newValue = slicer.style();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `string` \| [`SlicerStyle`](GC.Spread.Sheets.Slicers.SlicerStyle) | The style or style name of the item slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer control, defining its overall look and presentation. |

#### Returns

[`SlicerStyle`](GC.Spread.Sheets.Slicers.SlicerStyle) \| [`ItemSlicer`](GC.Spread.Sheets.Slicers.ItemSlicer)

If no value is set, returns The style of the item slicer; otherwise, returns the item slicer.

___

### <a id="visuallynodataitems" name="visuallynodataitems"></a> visuallyNoDataItems

▸ **visuallyNoDataItems**(`value?`): `any`

Gets or sets whether to visually distinguish the items with no data. NoDataItems represent slicer items that are determined to have no corresponding data under the current filter and data context (possibly due to filtering applied by other slicers).

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.visuallyNoDataItems();
console.log(oldValue);
slicer.visuallyNoDataItems(false);
var newValue = slicer.visuallyNoDataItems();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `boolean` | The setting for items with no data. The visuallyNoDataItems property of a slicer specifies the visual representation or handling of items with no associated data within the slicer control. |

#### Returns

`any`

If no value is set, returns whether to visually distinguish the items with no data; otherwise, returns the item slicer.

___

### <a id="width" name="width"></a> width

▸ **width**(`value?`): `any`

Gets or sets the width of the item slicer.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.TableSlicerData(table)
//Set 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.
var slicerHost = document.getElementById("slicerHost");
slicerHost.appendChild(slicer.getDOMElement());
var oldValue = slicer.width();
console.log(oldValue);
slicer.width(120);
var newValue = slicer.width();
console.log(newValue);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `value?` | `number` | The width of the item slicer. The width property of a slicer specifies the horizontal dimension or width of the slicer, determining its size along the x-axis. |

#### Returns

`any`

If no value is set, returns the width of the item slicer; otherwise, returns the item slicer.