To get a table, use the find, findByName, or all method. For example:
If you want to change the table location or change the table size, you can use the move method to change the location, and the resize method to resize it. For example:
If you don't need the table, you can remove it using the remove method. For example:
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.bind(spreadNS.Events.SelectionChanged, selectionChangedCallback);
var table = 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 selectionChangedCallback() {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table && table.name) {
_getElementById("removeTable").removeAttribute('disabled');
valueCheckCallback("moveRow", "moveColumn", "moveTable");
valueCheckCallback("resizeRow", "resizeColumn", "resizeTable");
} else {
_getElementById("removeTable").setAttribute('disabled', true);
_getElementById("moveTable").setAttribute('disabled', true);
_getElementById("resizeTable").setAttribute('disabled', true);
}
}
function valueCheckCallback(rowElementId, columnElementId, targetElementID) {
var rowInfo = parseInt(_getElementById("" + rowElementId).value);
var columnInfo = parseInt(_getElementById("" + columnElementId).value);
var targetElement = _getElementById("" + targetElementID);
if (isNaN(rowInfo) || isNaN(columnInfo)) {
targetElement.setAttribute('disabled', true);
} else {
targetElement.removeAttribute('disabled');
}
}
function removeTableFromOptionList(tableName) {
var removeNode = document.querySelector("option[value=" + tableName + "]");
if (removeNode) {
removeNode.parentNode.removeChild(removeNode);
}
}
//add table
_getElementById("addTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var cr = sheet.getSelections()[0];
if (cr) {
cr = getActualRange(cr, sheet.getRowCount(), sheet.getColumnCount());
var tableName = getTableName(sheet);
sheet.tables.add(tableName, cr.row, cr.col, cr.rowCount, cr.colCount, spreadNS.Tables.TableThemes.light1);
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
});
//remove table
_getElementById("removeTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
try {
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
sheet.tables.remove(table);
removeTableFromOptionList(table.name());
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
});
//move table
_getElementById("moveTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
var row = parseInt(_getElementById("moveRow").value);
var col = parseInt(_getElementById("moveColumn").value);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.move(table, row, col);
selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
});
_getElementById("moveRow").addEventListener('keyup',function () {
valueCheckCallback("moveRow", "moveColumn", "moveTable");
});
_getElementById("moveColumn").addEventListener('keyup',function () {
valueCheckCallback("moveRow", "moveColumn", "moveTable");
});
//resize table
_getElementById("resizeTable").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
var row = parseInt(_getElementById("resizeRow").value);
var col = parseInt(_getElementById("resizeColumn").value);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.resize(table, row, col);
selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
});
_getElementById("resizeRow").addEventListener('keyup',function () {
valueCheckCallback("resizeRow", "resizeColumn", "resizeTable");
});
_getElementById("resizeColumn").addEventListener('keyup',function () {
valueCheckCallback("resizeRow", "resizeColumn", "resizeTable");
});
function getTableName(sheet) {
var i = 0;
while (true) {
var name = "table" + i.toString();
if (!sheet.tables.findByName(name)) {
return name;
}
i++;
}
}
function getActualRange(range, maxRowCount, maxColCount) {
var row = range.row < 0 ? 0 : range.row;
var col = range.col < 0 ? 0 : range.col;
var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
var colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new spreadNS.Range(row, col, rowCount, colCount);
}
}
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">
<div class="option-group">
<label> Please select the table area.</label>
<label> tableName:</label>
<input id="tableName" />
</div>
<div class="option-group">
<input type="button" id="removeTable" value="Remove table" />
<input type="button" id="addTable" value="Add table" />
</div>
<hr>
<label>Move table to:</label>
<div class="option-group">
<label for="moveRow">Row:</label>
<input id="moveRow" />
</div>
<div class="option-group">
<label for="moveColumn">Column:</label>
<input id="moveColumn" />
</div>
<div class="option-group">
<input type="button" id="moveTable" value="Move table" />
</div>
<label>Resize table:</label>
<div class="option-group">
<label for="resizeRow">Row count:</label>
<input id="resizeRow" />
</div>
<div class="option-group">
<label for="resizeColumn">Column count:</label>
<input id="resizeColumn" />
</div>
<div class="option-group">
<input type="button" id="resizeTable" value="Resize table" />
</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: block;
margin-bottom: 6px;
}
input {
padding: 2px 4px;
width: 100%;
box-sizing: border-box;
}
input[type=button] {
margin-bottom: 6px;
}
hr {
border-color: #fff;
opacity: .2;
margin: 5px 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
