SpreadJS 14
Features / Workbook / Tab Strip
In This Topic
    Tab Strip
    In This Topic

    SpreadJS provides plenty of options to control the behavior of tab strip and its elements. You can perform various operations such as changing the sheet name, setting sheet color, arranging sheets, setting position and width of tab strip etc. by using the properties of Workbook.options field.

    tab strip element labels

    Change Sheet Name

    You can change the name of a sheet by double-clicking on it to edit. Click out of the tab or use the Esc or Enter key to confirm the changes.


    edit sheet names in tab strip

    You can enable or disable the ability to edit sheet names by using options.tabEditable property. The default value of this property is true.

    JavaScript
    Copy Code
    spread.options.tabEditable = false; // false: disable, true: enable
    

    Arrange Sheet Tabs

    You can arrange sheet names in the tab strip by selecting the sheet tab and dragging it between any two sheets. An indicator is displayed while dragging the sheet, as shown in the below image. Release the mouse to move the sheet.


    reorder sheets in tab strip

    You can enable the ability to re-order the sheet tabs by setting the options.allowSheetReorder property to true.

    JavaScript
    Copy Code
    spread.options.allowSheetReorder = true; // true: enable, false: disable
    

    The SheetMoving and SheetMoved events occur before and after the sheet is dragged and moved respectively. In order to cancel the movement of sheet, you can set the cancel parameter of SheetMoving class to true.

    Set Sheet Tab Color

    You can set the sheet tab color using options.sheetTabColor property. Also, you can choose to display any sheet as the start sheet using startSheetIndex method.

    set sheet tab color in tab strip

    JavaScript
    Copy Code
    spread.setSheetCount(3);
    spread.startSheetIndex(0);
    spread.getSheet(0).options.sheetTabColor = "red";
    spread.getSheet(1).options.sheetTabColor = "#FFFF00";
    spread.getSheet(2).options.sheetTabColor = "Accent 4";
    

    Display New Tab Button

    You can choose to show or hide the New Tab button by using options.newTabVisible property. This button is visible by default.

    show or hide new tab button

    JavaScript
    Copy Code
    spread.options.newTabVisible = true; // false: hide, true: show
    

    Display Navigation Buttons

    You can specify whether to show the navigation buttons in the workbook by using options.tabNavigationVisible property.

    show or hide tab strip navigation buttons

    JavaScript
    Copy Code
    spread.options.tabNavigationVisible = false; // false: hide, true: show
    

    Display Tab Strip

    You can hide the entire tab strip by using options.tabStripVisible property.

    show or hide tab strip

    JavaScript
    Copy Code
    spread.options.tabStripVisible = true; // true: show, false: hide
    spread.options.tabStripRatio = 0.5;  // percentage value that specifies the horizontal space allocated to the tab strip
    

    Set Position and Width

    You can set the position of tab strip relative to the workbook using the tabstripPosition workbook option. These positions are supported on touch devices as well as in all SpreadJS themes. The tab strip gets separated from the scrollbar if the position is set to left, right, or top.

    Position Image
    Bottom (default) tab strip bottom position option
    Left tab strip left position option
    Right tab strip right position option
    Top tab strip top position option

    Note: The resize horizontal bar button is visible only when the position of tab strip is set to bottom. The tabStripRatio property is also ignored when top, left or right poistion is set.

    If the sheet position is set to left or right and the sheet name is too long to be displayed, it is clipped and indicated by an ellipsis. However, you can change the width of tab strip to show the complete sheet name by using options.tabStripWidth property. The default and minimum value of this property is 80.

    Note: The options.tabStripWidth property is ignored if the tab strip position is not set to the left or right of the workbook.

    tab strip width option

    The following example code sets tab strip position and width.

    JavaScript
    Copy Code
    // Change tab strip position when creating workbook
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripPosition: GC.Spread.Sheets.TabStripPosition.top});
    // Or change tab strip position by workbook options
    spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.top;
            
    // Change tab strip width when creating workbook
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {tabStripWidth: 200});
    // Or change tab strip width by workbook options
    spread.options.tabStripWidth = 200;        
    

    Using SpreadJS Designer

    You can also set the tab strip options using SpreadJS Designer by accessing the TabStrip settings in SETTINGS tab of ribbon as shown below:

    tab strip settings dialog in SpreadJS Designer

    tab strip settings dialog in SpreadJS Designer

    See Also