Action Column and New Row

The action column is a special column on the right side of a TableSheet.  It provides a very convenient way of adding/removing/saving/resetting rows from the UI.

The new row is a special row at the bottom of a TableSheet, and will insert a new row when it is edited.

This demo uses AutoSync mode, which you can find more information about in the AutoSync and Batch Updates demo page. Action Column The action column is enabled by default and is on the right side of the TableSheet. You can get action column options using the sheet.actionColumn.options() method. You can customize it using sheet.actionColumn.options(actionColumnOptions), where actionColumnOptions includes the following: Operation Type Description visible boolean Action column visibility title string Action column title in the sheet column header width string Action column width actionButtons object Action column buttons, which include remove, save, and reset buttons The actionButtons object defines remove, save and reset button display properties. Each button option includes: Operation Type Description visible boolean Button visibility title string Button context. Can use an empty string to hide the context icon GC.Spread.Sheets.ButtonImageType Button icon Hiding button context can be done with the following code: 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 tableName = "Employee"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var sheet; window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); bindEvents(); syncOptions(); }; 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", { remote: { read: { url: apiUrl }, update: { url: apiUrl, method: 'PUT' }, create: { url: apiUrl }, delete: { url: apiUrl } }, autoSync: true, onFailed: function(type, args) { console.log("error", type, args); } }); //init a table sheet sheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet); sheet.actionColumn.options({ visible: true, title: "Actions", width: 90, actionButtons: { remove: { visible: true, title: "", icon: GC.Spread.Sheets.ButtonImageType.minus }, save: { visible: true, title: "", icon: GC.Spread.Sheets.ButtonImageType.ok }, reset: { visible: true, title: "", icon: GC.Spread.Sheets.ButtonImageType.clear } } }); //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: 100, caption: "Phone" }, { value: "Notes", width: 100, caption: "Notes" } ]); //the View has all default columns of the Table sheet.setDataView(view); }); spread.resumePaint(); } function bindEvents() { var updateButton = document.getElementById('update'); updateButton.addEventListener('click', function() { applySettings(); }); var showButton = document.getElementById('show-button'); showButton.addEventListener('change', function() { sheet.options.allowAddNew = showButton.checked; }); } function syncOptions() { if (sheet) { var options = sheet.actionColumn.options(); setProperty('visible', 'checked', options.visible); setProperty('title', 'value', options.title); setProperty('width', 'value', options.width); setProperty('remove-visible', 'checked', options.actionButtons.remove.visible); setProperty('remove-title', 'value', options.actionButtons.remove.title); setProperty('remove-icon', 'value', options.actionButtons.remove.icon); setProperty('save-visible', 'checked', options.actionButtons.save.visible); setProperty('save-title', 'value', options.actionButtons.save.title); setProperty('save-icon', 'value', options.actionButtons.save.icon); setProperty('reset-visible', 'checked', options.actionButtons.reset.visible); setProperty('reset-title', 'value', options.actionButtons.reset.title); setProperty('reset-icon', 'value', options.actionButtons.reset.icon); } } function applySettings() { var settings = { visible: getProperty('visible', 'checked'), title: getProperty('title', 'value'), width: Number(getProperty('width', 'value')), actionButtons: { remove: { visible: getProperty('remove-visible', 'checked'), title: getProperty('remove-title', 'value'), icon: Number(getProperty('remove-icon', 'value')) }, save: { visible: getProperty('save-visible', 'checked'), title: getProperty('save-title', 'value'), icon: Number(getProperty('save-icon', 'value')) }, reset: { visible: getProperty('reset-visible', 'checked'), title: getProperty('reset-title', 'value'), icon: Number(getProperty('reset-icon', 'value')) } } } if (sheet) { sheet.actionColumn.options(settings); } } function getProperty(domId, prop) { return document.getElementById(domId)[prop]; } function setProperty(domId, prop, value) { document.getElementById(domId)[prop] = value; } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; }
<!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="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>Action Column</legend> <div class="field-line"> <span>visible: </span><input type="checkbox" value="true" id="visible" /> </div> <div class="field-line"> <span>title: </span><input type="text" value="Actions" id="title" /> </div> <div class="field-line"> <span>width: </span><input type="text" value="100" id="width" /> </div> <fieldset> <legend>Remove Button</legend> <div class="field-line"> <span>visible: </span><input type="checkbox" value="true" id="remove-visible" /> </div> <div class="field-line"> <span>title: </span><input type="text" value="" id="remove-title" /> </div> <div class="field-line"> <span>icon: </span><select id="remove-icon"> <option value="0">none</option> <option value="1">custom</option> <option value="2">clear</option> <option value="3">cancel</option> <option value="4">ok</option> <option value="5">dropdown</option> <option value="6">ellipsis</option> <option value="7">left</option> <option value="8">right</option> <option value="9">plus</option> <option value="10">minus</option> <option value="11">undo</option> <option value="12">redo</option> <option value="13">search</option> <option value="14">separator</option> <option value="15">spinLeft</option> <option value="16">spinRight</option> <option value="17">collapse</option> <option value="18">expand</option> </select> </div> </fieldset> <fieldset> <legend>Save Button</legend> <div class="field-line"> <span>visible: </span><input type="checkbox" value="true" id="save-visible" /> </div> <div class="field-line"> <span>title: </span><input type="text" value="" id="save-title" /> </div> <div class="field-line"> <span>icon: </span><select id="save-icon"> <option value="0">none</option> <option value="1">custom</option> <option value="2">clear</option> <option value="3">cancel</option> <option value="4">ok</option> <option value="5">dropdown</option> <option value="6">ellipsis</option> <option value="7">left</option> <option value="8">right</option> <option value="9">plus</option> <option value="10">minus</option> <option value="11">undo</option> <option value="12">redo</option> <option value="13">search</option> <option value="14">separator</option> <option value="15">spinLeft</option> <option value="16">spinRight</option> <option value="17">collapse</option> <option value="18">expand</option> </select> </div> </fieldset> <fieldset> <legend>Reset Button</legend> <div class="field-line"> <span>visible: </span><input type="checkbox" value="true" id="reset-visible" /> </div> <div class="field-line"> <span>title: </span><input type="text" value="" id="reset-title" /> </div> <div class="field-line"> <span>icon: </span><select id="reset-icon"> <option value="0">none</option> <option value="1">custom</option> <option value="2">clear</option> <option value="3">cancel</option> <option value="4">ok</option> <option value="5">dropdown</option> <option value="6">ellipsis</option> <option value="7">left</option> <option value="8">right</option> <option value="9">plus</option> <option value="10">minus</option> <option value="11">undo</option> <option value="12">redo</option> <option value="13">search</option> <option value="14">separator</option> <option value="15">spinLeft</option> <option value="16">spinRight</option> <option value="17">collapse</option> <option value="18">expand</option> </select> </div> </fieldset> <div class="field-line"> <input type="button" id="update" value="Apply Settings"> </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; }