Interactions | Features | SpreadJS JavaScript Demos

Zooming Zoom in using Ctrl+Mouse Wheel Up Zoom out using Ctrl+Mouse Wheel Down Resizing column Resizing a column by dragging the right edge of a column header cell. The columnResizeMode can optionally be set to GC.Spread.Sheets.ResizeMode.split . Automatically fit a column width by double-clicking the right edge of a column header cell. The autoFitType can optionally be set to GC.Spread.Sheets.AutoFitType.cellWithHeader . Shortcut key Command Shortcut key Copy Ctrl+C Cut Ctrl+X Paste Ctrl+V Enter Edit F2 Direct Input Char Exit Edit Esc Delete Del Delete and Enter Edit BackSpace Input submit, Move Down Enter Input submit, Move Up Shift + Enter Next line input Alt+Enter, Ctrl+Enter Save all inserted and updated rows Ctrl + Shift + S Move up Up key Move down Down key Move left Left key Move right Right key Move down Enter Move right Tab Move left Shift + Tab Move to Top/Bottom/Left/Right first cell Ctrl + Arrow Move to next page PageDown Move to previous page PageUp Expand to mouse click selection Shift + Mouse click Expand cell selection Shift + Arrow Clipboard Cutting/Copying and then pasting cells, rows or columns can be down using shortcut keys: Cut: Ctr+X in Windows, Command+X in Mac Copy: Ctrl+C in Windows, Command+C in Mac Paste: Ctrl+V in Windows, Command+V in Mac This can also be down with the context menu: Right-click on the current selection of cells, rows or columns, the context menu will show, then click copy or cut in the menu. Right-click on the new selection of another cell range, rows, or columns, the context menu will show, then click paste in the menu. It is recommended to set allowExtendPasteRange to true. Dragging Drag fill is done by clicking on the bottom right corner of a selected area and moving the mouse down or up. Drag-drop is done by dragging the selection border of a selected area and dropping it into the destination cell. Drop copy is done by dragging the selection border f the selected area while holding the Ctrl key and dropping it into the destination cell.

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.allowExtendPasteRange = true;
spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var tableName = "Supplier";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
myTable.fetch().then(function() {
var view = myTable.addView("myView", [
{ value: "Id", width: 80 },
{ value: "CompanyName", width: 200, caption :"Company Name" },
{ value: "ContactName", width: 150, caption :"Contact" },
{ value: "ContactTitle", width: 200, caption :"Title" },
{ value: "Address", width: 200 },
{ value: "City", width: 150, caption :"City" },
{ value: "State", width: 100, caption :"State" },
{ value: "Region", width: 100, caption :"Region" }
]); 
sheet.setDataView(view);
});
spread.resumePaint();
}
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/@mescius/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/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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="optionContainer" class="optionContainer">
</div>
</div>
</html>

.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}