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:
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import './styles.css';
const GCsheets = GC.Spread.Sheets;
function getTableName(sheet: GC.Spread.Sheets.Worksheet) {
let i = 0;
while (true) {
let name = "table" + i.toString();
if (!sheet.tables.findByName(name)) {
return name;
}
i++;
}
}
function getActualRange(range: GC.Spread.Sheets.Range, maxRowCount: number, maxColCount: number) {
let row = range.row < 0 ? 0 : range.row;
let col = range.col < 0 ? 0 : range.col;
let rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
let colCount = range.colCount < 0 ? maxColCount : range.colCount;
return new GCsheets.Range(row, col, rowCount, colCount);
}
function valueCheckCallback (rowValue: any, columnValue: any) {
let rowInfo = parseInt(rowValue);
let columnInfo = parseInt(columnValue);
let targetElementDisableState = false;
if (isNaN(rowInfo) || isNaN(columnInfo) || rowInfo < 0 || columnInfo < 0) {
targetElementDisableState = true;
}
return targetElementDisableState;
}
function removeTableFromOptionList (tableName: string) {
let removeNode = document.querySelector("option[value=" + tableName + "]");
if (removeNode) {
removeNode.parentNode.removeChild(removeNode);
}
}
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
disabledRemoveTable = false;
disabledMoveTable = false;
disabledResizeTable = false;
moveRowValue: any = null;
moveColumnValue: any = null;
resizeRowValue: any = null;
resizeColumnValue: any = null;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
spread.suspendPaint();
let sheet = spread.getActiveSheet();
sheet.bind(GCsheets.Events.SelectionChanged, this.selectionChangedCallback.bind(this));
let table = sheet.tables.add("table1", 1, 1, 4, 4, GCsheets.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();
}
selectionChangedCallback () {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table && table.name) {
this.disabledRemoveTable = false;
this.disabledMoveTable = valueCheckCallback(this.moveRowValue, this.moveColumnValue);
this.disabledResizeTable = valueCheckCallback(this.resizeRowValue, this.resizeColumnValue);
} else {
this.disabledRemoveTable = true;
this.disabledMoveTable = true;
this.disabledResizeTable = true;
}
}
onAddTableClickEvent (event: any) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
try {
let cr = sheet.getSelections()[0];
if (cr) {
cr = getActualRange(cr, sheet.getRowCount(), sheet.getColumnCount());
let tableName = getTableName(sheet);
sheet.tables.add(tableName, cr.row, cr.col, cr.rowCount, cr.colCount, GCsheets.Tables.TableThemes.light1);
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
onRemoveTableClickEvent (event: any) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
try {
let 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);
}
}
onMoveTableClickEvent (event: any) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
let row = parseInt(this.moveRowValue);
let col = parseInt(this.moveColumnValue);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.move(table, row, col);
this.selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
onMoveRowKeyUpEvent (event: any) {
this.moveRowValue = event.target.value;
this.disabledMoveTable = valueCheckCallback(this.moveRowValue, this.moveColumnValue);
}
onMoveColumnKeyUpEvent (event: any) {
this.moveColumnValue = event.target.value;
this.disabledMoveTable = valueCheckCallback(this.moveRowValue, this.moveColumnValue);
}
onResizeTableClickEvent (event: any) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (table) {
try {
let row = parseInt(this.resizeRowValue);
let col = parseInt(this.resizeColumnValue);
if (!isNaN(row) && !isNaN(col)) {
sheet.tables.resize(table, row, col);
this.selectionChangedCallback();
}
} catch (ex) {
alert(!!ex.message ? ex.message : ex);
}
}
}
onResizeRowKeyUpEvent (event: any) {
this.resizeRowValue = event.target.value;
this.disabledResizeTable = valueCheckCallback(this.resizeRowValue, this.resizeColumnValue);
}
onResizeColumnKeyUpEvent (event: any) {
this.resizeColumnValue = event.target.value;
this.disabledResizeTable = valueCheckCallback(this.resizeRowValue, this.resizeColumnValue);
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
</gc-spread-sheets>
<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" [disabled]="disabledRemoveTable" (click)="onRemoveTableClickEvent()" />
<input type="button" id="addTable" value="Add table" (click)="onAddTableClickEvent()" />
</div>
<hr>
<label>Move table to:</label>
<div class="option-group">
<label for="moveRow">Row:</label>
<input id="moveRow" [value]="moveRowValue" (keyup)="onMoveRowKeyUpEvent($event)" />
</div>
<div class="option-group">
<label for="moveColumn">Column:</label>
<input id="moveColumn" [value]="moveColumnValue" (keyup)="onMoveColumnKeyUpEvent($event)" />
</div>
<div class="option-group">
<input type="button" id="moveTable" value="Move table" [disabled]="disabledMoveTable" (click)="onMoveTableClickEvent()" />
</div>
<label>Resize table:</label>
<div class="option-group">
<label for="resizeRow">Row count:</label>
<input id="resizeRow" [value]="resizeRowValue" (keyup)="onResizeRowKeyUpEvent($event)" />
</div>
<div class="option-group">
<label for="resizeColumn">Column count:</label>
<input id="resizeColumn" [value]="resizeColumnValue" (keyup)="onResizeColumnKeyUpEvent($event)" />
</div>
<div class="option-group">
<input type="button" id="resizeTable" value="Resize table" [disabled]="disabledResizeTable" (click)="onResizeTableClickEvent()" />
</div>
</div>
</div>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.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;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
