Context Menu

This sample shows how you can use the context menu to insert or delete table rows or columns. Select a cell in the table then right click the mouse. Select the Insert or Delete menu items to insert or delete rows and columns.

Users can easily insert and delete table rows and columns using the built-in ContextMenu
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.light1); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); sheet.getCell(1, 1).text("First Name"); sheet.getCell(1, 2).text("Last Name"); sheet.getCell(1, 3).text("Score"); sheet.getCell(1, 4).text("Position"); sheet.getCell(2, 1).text("Alexa"); sheet.getCell(2, 2).text("Wilder"); sheet.getCell(2, 3).text("90"); sheet.getCell(2, 4).text("Web Developer"); sheet.getCell(3, 1).text("Victor"); sheet.getCell(3, 2).text("Wooten"); sheet.getCell(3, 3).text("70"); sheet.getCell(3, 4).text(".NET Developer"); sheet.getCell(4, 1).text("Ifeoma"); sheet.getCell(4, 2).text("Mays"); sheet.getCell(4, 3).text("85"); sheet.getCell(4, 4).text("Sales Manager"); spread.resumePaint(); } 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/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> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width:100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }