Tab Strip

Theme:

SpreadJS has a customizable worksheet tabstrip, and each element can be controlled in code.

Use SpreadJS's options properties to control the Tab Strip's visibility and the behavior of its elements:

The leftmost Tab Navigation Arrows: If there are more worksheets than can fit in the tab strip, the arrows will be enabled and the user can use them to show other sheet tabs in the list.
Worksheet Tabs: The user can double click a tab to rename a sheet as well as drag and drop the tab to reorder the sheets.
The hamburger button ("≡"): Show all sheets list.
The circled + button: adding a new sheet to the workbook.
Tab Strip Splitter: Used to split the horizontal space of the control between the Tab Strip and the horizontal scrollbar when the Tab Strip is at the bottom of the workbook.
Tab Strip Position: Specify if the tab strip will be positioned at the bottom (default), top, left or right off the spreadsheet.

Use the tabStripVisible option to control the visibility of the entire Tab Strip :

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    spread.options.tabStripVisible = false;

Set the tabNavigationVisible option to false to hide the navigation arrow buttons which are visible by default.

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

Allow or prevent the user from renaming the sheets by setting the tabEditable option (boolean)

    spread.options.tabEditable = true;

Allow or prevent the user from reordering the sheets using the allowSheetReorder option (boolean)

    spread.options.allowSheetReorder = true;

Change the ActiveSheets tab's color by setting sheetTabColor which takes a color name string: 'red', 'green'.

    var sheet = spread.getActiveSheet();
    sheet.options.sheetTabColor = 'red';

Allow or prevent the user from adding sheets to the workbook by using newTabVisible option which controls the visibility of the + circled button (visible by default):

    spread.options.newTabVisible = false;

The tabStripRatio option is a percentage value (0.x) that specifies how much of the horizontal space will be allocated to the tab strip. The rest of the horizontal area (1 - 0.x) will allocated to the horizontal scrollbar.

    spread.options.tabStripRatio = 0.6;

Change the tab strip position relative to the workbook by using tabStripPosition. There are four kinds of directions:

bottom: the tab strip is at the bottom of the workbook, and it is the default value of tabStripPosition.
top: the tab strip is at the top of the workbook.
left: the tab strip is at the left of the workbook.
right: the tab strip is at the right of the workbook.

When the tab strip is at the left or right of the workbook, user could scroll the tabs by using mousewheel.

    spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.left;

When the tab strip is at the left or right of the workbook, user could use tabStripWidth to customize its width. It could be useful for the long sheet name. The default and the minimum is 80.

    spread.options.tabStripWidth = 200;

Allow or prevent the user from opening the all sheets dialog by using the allSheetsListVisible option, which controls the visibility of the "≡" button (auto by default):

    spread.options.allSheetsListVisible = GC.Spread.Sheets.AllSheetsListVisibility.auto;

Feedback

Submit and view feedback for

This Product This Page

Use SpreadJS's options properties to control the Tab Strip's visibility and the behavior of its elements: The leftmost Tab Navigation Arrows: If there are more worksheets than can fit in the tab strip, the arrows will be enabled and the user can use them to show other sheet tabs in the list. Worksheet Tabs: The user can double click a tab to rename a sheet as well as drag and drop the tab to reorder the sheets. The hamburger button ("≡"): Show all sheets list. The circled + button: adding a new sheet to the workbook. Tab Strip Splitter: Used to split the horizontal space of the control between the Tab Strip and the horizontal scrollbar when the Tab Strip is at the bottom of the workbook. Tab Strip Position: Specify if the tab strip will be positioned at the bottom (default), top, left or right off the spreadsheet. Use the tabStripVisible option to control the visibility of the entire Tab Strip : Set the tabNavigationVisible option to false to hide the navigation arrow buttons which are visible by default. Allow or prevent the user from renaming the sheets by setting the tabEditable option (boolean) Allow or prevent the user from reordering the sheets using the allowSheetReorder option (boolean) Change the ActiveSheets tab's color by setting sheetTabColor which takes a color name string: 'red', 'green'. Allow or prevent the user from adding sheets to the workbook by using newTabVisible option which controls the visibility of the + circled button (visible by default): The tabStripRatio option is a percentage value (0.x) that specifies how much of the horizontal space will be allocated to the tab strip. The rest of the horizontal area (1 - 0.x) will allocated to the horizontal scrollbar. Change the tab strip position relative to the workbook by using tabStripPosition. There are four kinds of directions: bottom: the tab strip is at the bottom of the workbook, and it is the default value of tabStripPosition. top: the tab strip is at the top of the workbook. left: the tab strip is at the left of the workbook. right: the tab strip is at the right of the workbook. When the tab strip is at the left or right of the workbook, user could scroll the tabs by using mousewheel. When the tab strip is at the left or right of the workbook, user could use tabStripWidth to customize its width. It could be useful for the long sheet name. The default and the minimum is 80. Allow or prevent the user from opening the all sheets dialog by using the allSheetsListVisible option, which controls the visibility of the "≡" button (auto by default):

window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'));
spread.setSheetCount(2);
initSpread(spread);
_getElementById('newtab_show').addEventListener('click', function() {
spread.options.newTabVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
_getElementById('tab_editable').addEventListener('click', function() {
spread.options.tabEditable = this.checked;
});
_getElementById('tabstrip_visible').addEventListener('click', function() {
spread.options.tabStripVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
_getElementById('tabnavigation_Visible').addEventListener('click', function() {
spread.options.tabNavigationVisible = this.checked;
});
_getElementById('allSheetsButton_Visible').addEventListener('change', function() {
spread.options.allSheetsListVisible = Number(this.value);
});
_getElementById('tabstrip_position').addEventListener('change', function() {
spread.options.tabStripPosition = Number(this.value);
});
_getElementById('setTabStripRatio').addEventListener('click', function() {
var ratio = parseFloat(_getElementById('tabstrip_ratio').value);
if (!isNaN(ratio)) {
spread.options.tabStripRatio = ratio;
}
});
_getElementById('setTabStripWidth').addEventListener('click', function() {
var width = parseInt(_getElementById('tabstrip_width').value);
if (!isNaN(width)) {
spread.options.tabStripWidth = width;
}
});
_getElementById('setStartSheetIndex').addEventListener('click', function() {
var index = _getElementById('startSheetIndex').value;
if (!isNaN(index)) {
index = parseInt(index);
if (0 <= index && index < spread.getSheetCount()) {
spread.startSheetIndex(index);
}
}
});
_getElementById('setSheetTabColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
if (sheet) {
var color = _getElementById('sheetTabColor').value;
sheet.options.sheetTabColor = color;
}
});
function initSpread(spread) {
var sd = dataSource;
var sheet = spread.getActiveSheet();
if (sd.length > 0) {
sheet.setDataSource(sd);
}
sheet.setColumnWidth(0, 160);
sheet.setColumnWidth(1, 70);
sheet.setColumnWidth(2, 90);
sheet.setColumnWidth(3, 110);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(6, 110);
}
};
function _getElementById(id){
return document.getElementById(id);
}

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<label>Use these options to change the appearance and behavior of the tab strip.</label>
</div>
<div class="option-row">
<input type="checkbox" id="newtab_show" checked />
<label for="newtab_show">showNewTab</label>
</div>
<div class="option-row">
<input type="checkbox" id="tab_editable" checked />
<label for="tab_editable">tabEditable</label>
</div>
<div class="option-row">
<input type="checkbox" id="tabstrip_visible" checked />
<label for="tabstrip_visible">tabStripVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="tabnavigation_Visible" checked />
<label for="tabnavigation_Visible">tabNavigationVisible</label>
</div>
<div class="option-row">
<select id="allSheetsButton_Visible">
<option value="2">auto</option>
<option value="0">hidden</option>
<option value="1">show</option>
</select>
<label for="allSheetsButton_Visible">allSheetsButtonVisible</label>
</div>
<div class="option-row">
<select id="tabstrip_position">
<option value="0">bottom</option>
<option value="1">top</option>
<option value="2">left</option>
<option value="3">right</option>
</select>
<label for="tabstrip_position">tabStripPosition</label>
</div>
<hr>
<label for="sheetTabColor" class="sizedLabel" style="padding-top: 20px">activeSheetTabColor:</label>
<div class="option-row">
<input type="text" id="sheetTabColor" value="red" />
<input type="button" id="setSheetTabColor" value="Set" />
</div>
<label >This changes the color for the tab of the active sheet.</label>
<br />
<label for="startSheetIndex" class="sizedLabel" style="padding-top: 20px">startSheetIndex:</label>
<div class="option-row">
<input type="text" id="startSheetIndex" value="0" />
<input type="button" id="setStartSheetIndex" value="Set" />
</div>
<label >This navigates the sheet tab to the tab at the index specified (starting at 0).</label>
<br>
<label for="tabstrip_ratio" class="sizedLabel" style="padding-top: 20px">tabStripRatio:</label>
<div class="option-row">
<input type="text" id="tabstrip_ratio" value="0.5" />
<input type="button" value="Set" id="setTabStripRatio" />
</div>
<label >This specifies the width ratio of the TabStrip to the width of the Spread instance (between 0 and 1).</label>
<br>
<label for="tabstrip_width" class="sizedLabel" style="padding-top: 20px">tabStripWidth:</label>
<div class="option-row">
<input type="text" id="tabstrip_width" value="80" />
<input type="button" value="Set" id="setTabStripWidth" />
</div>
<label >This specifies the width of the TabStrip when it is at the left and right of workbook. The minimum is 80.</label>
</div>
</div>
</body>
</html>

.sizedLabel {
display: inline-block;
width: 150px;
}
.colorLabel {
background-color: #F4F8EB;
}
input[type="text"] {
width: 100px;
}
input[type="button"] {
width: 60px;
margin: 0 10px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin-top: 20px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}