Auto Expand

SpreadJS allows the users to auto expand the table range using the UI operations. For example, click in cell E5 (‘Sales Manager’) then press the TAB key. A new row will automatically be added. Refer to the description below for further options.

Description
app.js
index.html
styles.css
Copy to CodeMine

Users can automatically expand the table range by adding data or using copy-paste, drag-fill, and drag-drop actions. Depending on the action, a new table column will be inserted to the right of the table or a new table row will be added below the last row.

  1. Add data immediately to the right of a table column or after the last table row.

  2. Paste data that exceeds the current table range.

  3. Drag fill from a table range.

  4. Drag drop a range to table range.

You can disable/enable the auto expand function by using allowAutoExpand. You can also get the toggle state of auto expand by this API.

    table.allowAutoExpand(true); // Allow the table auto expand.
    table.allowAutoExpand(false); // Don't allow the table auto expand.
    table.allowAutoExpand(); // Get the toogle state of auto expand.
Users can automatically expand the table range by adding data or using copy-paste, drag-fill, and drag-drop actions. Depending on the action, a new table column will be inserted to the right of the table or a new table row will be added below the last row.   1. Add data immediately to the right of a table column or after the last table row.   2. Paste data that exceeds the current table range.   3. Drag fill from a table range.   4. Drag drop a range to table range. You can disable/enable the auto expand function by using allowAutoExpand. You can also get the toggle state of auto expand by this API.
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); _getElementById("allowAutoExpand").addEventListener('change', function() { var table = sheet.tables.all()[0]; if (table) { table.allowAutoExpand(_getElementById("allowAutoExpand").checked); } }); 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/@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/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"> <p>Select the table in the Spread instance and change the state of allow table auto expand.</p> <div class="option-group"> <input type="checkbox" id="allowAutoExpand" checked/> <label for="allowAutoExpand">Allow Table Auto Expand</label> </div> </div> </div></body> </html>
.sample { position: relative; height: 100%; overflow: auto; } .sample::after { display: block; content: ""; clear: both; } .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; margin-top: 10px; } .option-group { margin-bottom: 6px; } label { display: inline-block; min-width: 90px; margin-bottom: 6px; } select { padding: 4px 6px; } p { padding: 0 0 12px; margin: 0; } .options-toggle { display: none; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }