Class: DOMTableSlicer

Sheets.Slicers.DOMTableSlicer

Hierarchy

• FloatingObject

  ↳ DOMTableSlicer

Table of contents

Constructors

• constructor

Properties

• typeName

Methods

• allowMove
• allowResize
• alt
• captionName
• cloneContent
• columnCount
• content
• disableResizingAndMoving
• dynamicMove
• dynamicSize
• endColumn
• endColumnOffset
• endRow
• endRowOffset
• fixedPosition
• getHost
• height
• isLocked
• isSelected
• isVisible
• itemHeight
• name
• refreshContent
• showHeader
• showNoDataItems
• showNoDataItemsInLast
• sortState
• startColumn
• startColumnOffset
• startRow
• startRowOffset
• style
• toImageSrc
• toImageSrcAsync
• visuallyNoDataItems
• width
• x
• y

Constructors

constructor

• new DOMTableSlicer(name, table, columnName)

Represents a slicer.

Parameters

Name	Type	Description
name	string	The slicer name.
table	Table	The table that relates to the slicer.
columnName	string	The name of the table's column.

Overrides

FloatingObject.constructor

Properties

typeName

• typeName: string

Represents the type name string used for supporting serialization.

Inherited from

FloatingObject.typeName

Methods

allowMove

▸ allowMove(value?): any

Gets or sets whether to disable moving the floating object.

example

//This example prevents you from moving or resizing the floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.allowResize(false);
customFloatingObject.allowMove(false);
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns the setting for whether to disable moving the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.allowMove

---

allowResize

▸ allowResize(value?): any

Gets or sets whether to disable resizing the floating object.

example

//This example prevents you from moving or resizing the floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.allowResize(false);
customFloatingObject.allowMove(false);
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns the setting for whether to disable resizing the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.allowResize

---

alt

▸ alt(value?): any

Gets or sets the alternative text of the floating object for screen readers.

example

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1', 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
customFloatingObject.alt("A button");
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	string

Returns

any

The alternative text of the floating object.

Inherited from

FloatingObject.alt

---

captionName

▸ captionName(value?): any

Gets or sets the caption name of the slicer.

example

//This example uses the captionName method.
//create a table
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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]);
//slicer style
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
 //change the slicer properties.
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.captionName("S1");
slicer.style(style1);

Parameters

Name	Type
value?	string

Returns

any

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

---

cloneContent

▸ cloneContent(): HTMLElement

Gets a copy of the current content of the instance.

example

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1', 10, 10, 64, 30);
customFloatingObject.content(createButton('button 1', '64px', '30px'));
activeSheet.floatingObjects.add(customFloatingObject);

var btn = customFloatingObject.cloneContent();
btn.innerText = 'button 2';
customFloatingObject.content(btn);

function createButton (text, width, height) {
    var btn = document.createElement('button');
    btn.style.width = width;
    btn.style.height = height;
    btn.innerText = text;
    return btn;
}

Returns

HTMLElement

A copy of the current content of the instance.

Inherited from

FloatingObject.cloneContent

---

columnCount

▸ columnCount(value?): any

Gets or sets the column count for the slicer.

example

//This example changes the slicer column count
//create a table
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 spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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]);
//add a slicer to the sheet and return the slicer instance.
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
console.log(slicer.columnCount());
slicer.columnCount(3);
console.log(slicer.columnCount());

Parameters

Name	Type
value?	number

Returns

any

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

---

content

▸ content(value?): any

Gets or sets the content of the custom floating object.

example

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1', 10, 10, 64, 30);
customFloatingObject.content(createButton('button 1', '64px', '30px'));
activeSheet.floatingObjects.add(customFloatingObject);

console.log(customFloatingObject.content()); // get current content, the result is button element with the text "button 1".
customFloatingObject.content(createButton('button 2', '64px', '30px')); // set new content.

function createButton (text, width, height) {
    var btn = document.createElement('button');
    btn.style.width = width;
    btn.style.height = height;
    btn.innerText = text;
    return btn;
}

Parameters

Name	Type
value?	HTMLElement

Returns

any

If no value is set, returns the content of the custom floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.content

---

disableResizingAndMoving

▸ disableResizingAndMoving(value?): any

Gets or sets whether to disable resizing and moving the slicer.

example

//This example prevents moving or resizing the slicer.
//create a table
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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]);
//slicer style
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//change the slicer properties.
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.disableResizingAndMoving(true);
slicer.style(style1);

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns whether to disable resizing and moving the slicer; otherwise, returns the slicer.

---

dynamicMove

▸ dynamicMove(value?): any

Gets or sets whether the object moves when hiding or showing, resizing, or moving rows or columns.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isVisible(true);
customFloatingObject.dynamicSize(true);
customFloatingObject.dynamicMove(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns whether this floating object dynamically moves; otherwise, returns the floating object.

Inherited from

FloatingObject.dynamicMove

---

dynamicSize

▸ dynamicSize(value?): any

Gets or sets whether the size of the object changes when hiding or showing, resizing, or moving rows or columns.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isVisible(true);
customFloatingObject.dynamicSize(true);
customFloatingObject.dynamicMove(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns whether this floating object dynamically changes size; otherwise, returns the floating object.

Inherited from

FloatingObject.dynamicSize

---

endColumn

▸ endColumn(value?): any

Gets or sets the end column index of the floating object position.

example

//Creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
//Position the lower right corner of the floating object by cell anchors.
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the end column index of the floating object position; otherwise, returns the floating object.

Inherited from

FloatingObject.endColumn

---

endColumnOffset

▸ endColumnOffset(value?): any

Gets or sets the offset relative to the end column of the floating object.

example

//Creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
//Position the lower right corner of the floating object by cell anchors.
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the offset relative to the end column of the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.endColumnOffset

---

endRow

▸ endRow(value?): any

Gets or sets the end row index of the floating object position.

example

//Creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
//Position the lower right corner of the floating object by cell anchors.
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the end row index of the floating object position; otherwise, returns the floating object.

Inherited from

FloatingObject.endRow

---

endRowOffset

▸ endRowOffset(value?): any

Gets or sets the offset relative to the end row of the floating object.

example

//Creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);
//Position the lower right corner of the floating object by cell anchors.
customFloatingObject.endRow(7);
customFloatingObject.endColumn(5);
customFloatingObject.endRowOffset(10);
customFloatingObject.endColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the offset relative to the end row of the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.endRowOffset

---

fixedPosition

▸ fixedPosition(value): any

Gets or sets whether the position of the floating object is fixed. When fixedPosition is true, dynamicMove and dynamicSize are disabled.

example

//This example sets the position of the object to fixed.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.fixedPosition(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value	boolean

Returns

any

If no value is set, returns whether the position of the floating object is fixed; otherwise, returns the floating object.

Inherited from

FloatingObject.fixedPosition

---

getHost

▸ getHost(): HTMLElement[]

Gets the dom host of the custom content.

Returns

HTMLElement[]

Inherited from

FloatingObject.getHost

---

height

▸ height(value?): any

Gets or sets the height of a floating object.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the height of a floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.height

---

isLocked

▸ isLocked(value?): any

Gets or sets whether this floating object is locked.

example

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
customFloatingObject.isLocked(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
activeSheet.options.isProtected = true;

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns whether this floating object is locked; otherwise, returns the floating object.

Inherited from

FloatingObject.isLocked

---

isSelected

▸ isSelected(value?): any

Gets or sets whether this floating object is selected.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isSelected(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns whether this floating object is selected; otherwise, returns the floating object.

Inherited from

FloatingObject.isSelected

---

isVisible

▸ isVisible(value?): any

Gets or sets whether this floating object is visible.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
customFloatingObject.isVisible(true);
customFloatingObject.dynamicSize(true);
customFloatingObject.dynamicMove(true);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	boolean

Returns

any

If no value is set, returns whether this floating object is visible; otherwise, returns the floating object.

Inherited from

FloatingObject.isVisible

---

itemHeight

▸ itemHeight(value?): any

Gets or sets the item height for the slicer.

example

//This example changes the slicer item height.
//create a table
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 spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
console.log(slicer.itemHeight()); // 21
slicer.itemHeight(35);
console.log(slicer.itemHeight()); // 35

Parameters

Name	Type
value?	number

Returns

any

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

---

name

▸ name(value?): any

Gets or sets the name of the slicer.

Parameters

Name	Type
value?	string

Returns

any

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

Overrides

FloatingObject.name

---

refreshContent

▸ refreshContent(): void

Refresh the content in floatingObject.The user should override this method to make their content synchronize with the floatingObject.

Returns

void

Inherited from

FloatingObject.refreshContent

---

showHeader

▸ showHeader(value?): any

Gets or sets whether to show the slicer header.

example

//This example hides the slicer header.
//create a table
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 spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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]);
//slicer style
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
//add a slicer to the sheet and return the slicer instance.
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.showHeader(false);
slicer.style(style1);

Parameters

Name	Type
value?	boolean

Returns

any

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

---

showNoDataItems

▸ showNoDataItems(value?): any

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

example

//create a table
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//change the slicer properties.
slicer.showNoDataItems(false);

Parameters

Name	Type
value?	boolean

Returns

any

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

---

showNoDataItemsInLast

▸ showNoDataItemsInLast(value?): any

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

example

//create a table
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//change the slicer properties.
slicer.showNoDataItemsInLast(false);

Parameters

Name	Type
value?	boolean

Returns

any

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

---

sortState

▸ sortState(value?): any

Gets or sets the sort state of the slicer.

example

//This example sets the sort order of the items in the slicer.
//create a table
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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]);
// slicer style
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//set slicer properties
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.sortState(GC.Spread.Sheets.SortState.descending);
slicer.style(style1);

Parameters

Name	Type
value?	SortState

Returns

any

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

---

startColumn

▸ startColumn(value?): any

Gets or sets the starting column index of the floating object position.

example

//Creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the starting column index of the floating object position; otherwise, returns the floating object.

Inherited from

FloatingObject.startColumn

---

startColumnOffset

▸ startColumnOffset(value?): any

Gets or sets the offset relative to the start column of the floating object.

example

//Creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the offset relative to the start column of the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.startColumnOffset

---

startRow

▸ startRow(value?): any

Gets or sets the starting row index of the floating object position.

example

//Creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the starting row index of the floating object position; otherwise, returns the floating object.

Inherited from

FloatingObject.startRow

---

startRowOffset

▸ startRowOffset(value?): any

Gets or sets the offset relative to the start row of the floating object.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
//Position the upper left corner of the floating object by cell anchors.
customFloatingObject.startRow(2);
customFloatingObject.startColumn(2);
customFloatingObject.startRowOffset(10);
customFloatingObject.startColumnOffset(10);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the offset relative to the start row of the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.startRowOffset

---

style

▸ style(value?): any

Gets or sets the style of the slicer.

example

//This example uses a built-in style.
//create a table
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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]);
// slicer style
var style1 = new GC.Spread.Sheets.Slicers.SlicerStyles.light4();
var slicer = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//change the slicer properties.
slicer.position(new GC.Spread.Sheets.Point(100, 200));
slicer.style(style1);

Parameters

Name	Type	Description
value?	string | SlicerStyle	The style or style name of the slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer, defining its overall look and presentation.

Returns

any

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

---

toImageSrc

▸ toImageSrc(): string

Get the slicer Image src of type Base64 string.

example

let slicerImageSrc = sheet.slicers.all()[0].toImageSrc();

Returns

string

return the slicer Image Base64 src string.

---

toImageSrcAsync

▸ toImageSrcAsync(): Promise<string>

Get the slicer Image src of type Base64 string.

example

let slicerImageSrc = await sheet.slicers.all()[0].toImageSrcAsync();

Returns

Promise<string>

return the slicer Image Base64 src string.

---

visuallyNoDataItems

▸ visuallyNoDataItems(value?): any

Gets or sets whether to visually distinguish the items with no data.

example

//create a table
var spread = new GC.Spread.Sheets.Workbook('ss');
var activeSheet = spread.getActiveSheet();
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 = new GC.Spread.Sheets.Slicers.DOMTableSlicer('slicer1', table, 'Name');
//change the slicer properties.
slicer.visuallyNoDataItems(false);

Parameters

Name	Type
value?	boolean

Returns

any

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

---

width

▸ width(value?): any

Gets or sets the width of a floating object.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the width of a floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.width

---

x

▸ x(value?): any

Gets or sets the horizontal location of the floating object.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the horizontal location of the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.x

---

y

▸ y(value?): any

Gets or sets the vertical location of the floating object.

example

//This example creates a floating object.
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1");
customFloatingObject.x(10);
customFloatingObject.y(10);
customFloatingObject.width(60);
customFloatingObject.height(64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

Parameters

Name	Type
value?	number

Returns

any

If no value is set, returns the vertical location of the floating object; otherwise, returns the floating object.

Inherited from

FloatingObject.y