Use the addRows, addColumns, deleteRows, deleteColumns, setRowCount and setColumnCount methods to change the number of rows or columns in each sheet area.
When calling the setRowCount and setColumnCount methods, you can choose which used range type to protect.
Each of the following lines could be used to change the row count of the sheet's viewport area.
If a row or column's resizeable property is false, it cannot be resized by user operations, but you can change its height or width directly by using code.
Use the setRowVisible and setColumnVisible methods to specify whether a row or column is displayed.
In the sheet's viewport area, when a row or column is automatically sized, its height or width will be determined by the content's length. Use the following code to set a row or column to auto fit:
SpreadJS also provides many methods to get useful information about a sheet's row or column, as illustrated in these lines of code.
SpreadJS provides the resizeZeroIndicator method to control whether to display double or single gridlines in the row or column header when the row height or column width is 0. The parameter is a ResizeZeroIndicator enumeration value.
default: single gridline (same as normal)
enhanced: double gridline (default)
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 spreadNS = GC.Spread.Sheets, SheetArea = spreadNS.SheetArea;
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
spread: GC.Spread.Sheets.Workbook;
rowIndex: string;
columnIndex: string;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
constructor() {
this.rowIndex = '';
this.columnIndex = '';
}
initSpread($event: any) {
let spread = this.spread = $event.spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setRowCount(2, SheetArea.colHeader);
sheet.setRowCount(10, SheetArea.viewport);
sheet.setColumnCount(2, SheetArea.rowHeader);
sheet.setColumnCount(6, SheetArea.viewport);
sheet.setRowHeight(4, 0);
sheet.setColumnWidth(2, 0);
spread.options.resizeZeroIndicator = spreadNS.ResizeZeroIndicator.enhanced;
for (var rowIndex = 1; rowIndex <= 9; rowIndex++) {
sheet.setText(rowIndex, 0, "Row");
sheet.setValue(rowIndex, 1, rowIndex);
}
for (var columnIndex = 1; columnIndex <= 5; columnIndex++) {
sheet.setText(0, columnIndex, "Column");
sheet.setValue(1, columnIndex, columnIndex);
}
sheet.resumePaint();
}
/*
* Add a row in viewport area.
*/
addRow () {
let spread = this.spread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.addRows(sheet.getRowCount(SheetArea.viewport), 1);
}
}
/*
* Delete a row in viewport area.
*/
addColumn () {
let spread = this.spread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.addColumns(sheet.getColumnCount(SheetArea.viewport), 1);
}
}
/*
* Add a column in viewport area.
*/
deleteRow () {
let spread = this.spread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.deleteRows(sheet.getRowCount(SheetArea.viewport) - 1, 1);
}
}
/*
* Delete a column in viewport area.
*/
deleteColumn () {
let spread = this.spread;
let sheet = spread.getActiveSheet();
if (sheet) {
sheet.deleteColumns(sheet.getColumnCount(SheetArea.viewport) - 1, 1);
}
}
setRowIndex ($event) {
this.rowIndex = $event.target.value;
}
setColumnIndex ($event) {
this.columnIndex = $event.target.value;
}
/*
* Show or hide the specified row.
*/
checkRowVisble ($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let rowIndex = parseInt(this.rowIndex);
if (!isNaN(rowIndex)) {
sheet.setRowVisible(rowIndex, $event.target.checked);
}
}
/*
* Auto fit or not fit the specified row.
*/
checkRowAutoFit ($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let rowIndex = parseInt(this.rowIndex);
if (!isNaN(rowIndex)) {
let checked = $event.target.checked;
if (checked) {
sheet.autoFitRow(rowIndex);
}
}
}
/*
* Show or hide the specified column.
*/
checkColumnVisible ($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let columnIndex = parseInt(this.columnIndex);
if (!isNaN(columnIndex)) {
sheet.setColumnVisible(columnIndex, $event.target.checked);
}
}
/*
* Auto fit or not fit the specified column.
*/
checkColumnAutoFit ($event) {
let spread = this.spread;
let sheet = spread.getActiveSheet();
let columnIndex = parseInt(this.columnIndex);
if (!isNaN(columnIndex)) {
let checked = $event.target.checked;
if (checked) {
sheet.autoFitColumn(columnIndex);
}
}
}
setResizeZeroIndicator ($event) {
let spread = this.spread;
spread.options.resizeZeroIndicator = + $event.target.value;
spread.repaint();
}
}
@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">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- 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-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="options-row">
<label style="display: inline-block;">The following buttons add/remove rows/columns at the end of the sheet.</label>
</div>
<div class="options-row">
<input type="button" value="Add Row" id="btnAddRow" (click)="addRow()" />
<input type="button" value="Delete Row" id="btnDeleteRow" (click)="deleteRow()" />
</div>
<div class="options-row">
<input type="button" value="Add Column" id="btnAddColumn" (click)="addColumn()" />
<input type="button" value="Delete Column" id="btnDeleteColumn" (click)="deleteColumn()" />
</div>
<hr />
<div class="options-row">
<label for="rowIndex" style="display: inline-block;width: 100px">Row Index:</label>
<input type="text" id="rowIndex" [value]="rowIndex" (change)="setRowIndex($event)"/>
<br>
<label for="rowIndex" style="padding-top: 6px">The index is zero based.</label>
<div class="options-row">
<input type="checkbox" id="chkRowVisible" checked (change)="checkRowVisble($event)" />
<label for="chkRowVisible">Row Visible</label>
</div>
<div class="options-row">
<input type="checkbox" id="chkRowAutoFit" (change)="checkRowAutoFit($event)" />
<label for="chkRowAutoFit">Row AutoFit</label>
</div>
</div>
<hr />
<div class="options-row">
<label for="columnIndex" style="display: inline-block;width: 100px">Column Index:</label>
<input type="text" id="columnIndex" [value]="columnIndex" (change)="setColumnIndex($event)" />
<br>
<label for="columnIndex" style="padding-top: 6px">The index is zero based.</label>
<div class="options-row">
<input type="checkbox" id="chkColumnVisible" checked (change)="checkColumnVisible($event)"/>
<label for="chkColumnVisible">Column Visible</label>
</div>
<div class="options-row">
<input type="checkbox" id="chkColumnAutoFit" (change)="checkColumnAutoFit($event)"/>
<label for="chkColumnAutoFit">Column AutoFit</label>
</div>
</div>
<hr />
<div class="options-row">
<span>ResizeZeroIndicator:</span>
<select id="resizeZeroIndicator" (change)="setResizeZeroIndicator($event)">
<option value="0">Default</option>
<option value="1" selected>Enhanced</option>
</select>
</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;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
input {
padding: 4px 6px;
}
input[type=button] {
width: 110px;
display: inline-block;
}
input[type="text"] {
width: 200px;
}
label {
margin-bottom: 6px;
}
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);
