Tab Strip

The SpreadJS tab strip is similar to Excel's Tab Strip:

  • The leftmost Tab Navigation Arrows: When 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 circled + button: to add 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

Each of these elements of the tab strip can be customized in JavaScript code as described below.

Use SpreadJS's options properties to control the Tab Strip's visibility and the behavior of its elements: 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.
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('setTabStripRatio').addEventListener('click', function() { var ratio = parseFloat(_getElementById('tabstrip_ratio').value); if (!isNaN(ratio)) { spread.options.tabStripRatio = ratio; } }); _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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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> <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> <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> </div> </div> </body> </html>
.sizedLabel { display: inline-block; width: 150px; } .colorLabel { background-color: lavender; } 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; }