The row actions are optional special columns attached to the row header that make it easy to perform operations on the row data using the UI, such as saving, removing and resetting the data.

The new row is a special row at the bottom of a TableSheet that will automatically insert a new row when data is added.

Row Action The row action is enabled by default and is on the row header of the TableSheet. There are some built-in row actions that can be added: Name Description pinRow pin a row dirtyStatus show the data changes in a row warningInfo show warning infomation in a row removeRow remove a row saveRow save the data changes in a row resetRow reset the data changes in a row Adding remove, save, reset actions: New Row The new row is enabled by default and is at the bottom of the table sheet. You can hide or show it with:
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var sheet; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); //register self-defined row action command initSpread(spread); bindEvents(); }; function initSpread(spread) { spread.suspendPaint(); spread.clearSheets(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; //init a data manager var dataManager = spread.dataManager(); var myTable = dataManager.addTable("myTable", { data:employees }); //init a table sheet sheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet); var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions; let options = sheet.rowActionOptions(); options.push( rowActions.removeRow, rowActions.saveRow, rowActions.resetRow, ); sheet.rowActionOptions(options); //bind a view to the table sheet myTable.fetch().then(function () { var view = myTable.addView("myView", [ { value: "Id", width: 50, caption: "ID" }, { value: "FirstName", width: 100, caption: "First Name" }, { value: "LastName", width: 100, caption: "Last Name" }, { value: "HomePhone", width: 150, caption: "Phone" }, { value: "PhotoPath", width: 150, caption: "Attachment" }, { value: "Notes", width: 400, caption: "Comments" }, ]); sheet.setDataView(view); }); spread.resumePaint(); } function bindEvents() { var changeOptionButton = document.getElementById('change-option'); changeOptionButton.addEventListener('click', function () { let options = sheet.rowActionOptions(); if (options.length === 1) { changeOptionButton.value = 'hide remove/save/reset' var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions; options.push(setTooltip(rowActions.removeRow, 'Remove')); options.push(setTooltip(rowActions.saveRow, 'Save')); options.push(setTooltip(rowActions.resetRow, 'Reset')); } else { changeOptionButton.value = 'show remove/save/reset' options.splice(1, options.length); } sheet.rowActionOptions(options); }); var showButton = document.getElementById('show-button'); showButton.addEventListener('change', function () { sheet.options.allowAddNew = showButton.checked; }); } function setTooltip(options, tooltip) { options.tooltip = tooltip; return options; } function getProperty(domId, prop) { return document.getElementById(domId)[prop]; } function setProperty(domId, prop, value) { document.getElementById(domId)[prop] = value; }
<!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"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/employees.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 id="options-container" class="options-container"> <fieldset> <legend>Row Action</legend> <div class="field-line"> <input type="button" id="change-option" value="hide remove/save/reset"> </div> </fieldset> <fieldset> <legend>New Row</legend> <div class="field-line"> <span>visible: </span><input type="checkbox" checked="checked" id="show-button" /> </div> </fieldset> </div> </div> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } fieldset { padding: 6px; margin: 0; margin-top: 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; } fieldset span, fieldset input, fieldset select { display: inline-block; text-align: left; } fieldset span { width: 50px; } fieldset input[type=text] { width: calc(100% - 58px); } fieldset input[type=button] { width: 100%; text-align: center; } fieldset select { width: calc(100% - 50px); } .field-line { margin-top: 4px; }