Demos
Features
Cells
Formatting
Overview

Overview

In SpreadJS, you can customize the format of each cell so that the data is displayed however you like. This can be useful when you have raw data that comes from a database, and you want to show a user-friendly format of that data.

To set the formatter string to a cell use the setFormatter method, and use the getFormatter method to get the cell formatter. You can also get the cell, column, or row by using the formatter method to get and set the formatter for the cell. For example: You can set a general format for a cell. Create a GeneralFormatter and set it to the cell. For example: The color format also supports color index, from color 1 to color 56. 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'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { autoGenerateColumns = false; dataSource: any[]; spread: GC.Spread.Sheets.Workbook; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; constructor() { } initSpread($event: any) { this.spread = $event.spread; var spread = this.spread; spread.suspendPaint(); let numValue = "1234.0123456789012345678901234567899"; let dateValue = "2011/9/2"; let eraDateValue = "2019/11/1"; let timeValue = "10:08:25"; let perValue = "1234.0123456789012345678901234567899%"; let sciValue = "1.012345678901234567890123456789e2"; let cusValue = "1001.1"; let cusDateValue = "2011/08/29"; let dateFormatterArray = [ //Date Formatter dateValue, "[$-411]dddd-mmmm;@","", dateValue, "[$-411]dddd-mmmm-yyyy;@", "", dateValue, "[$-411]mmm-yy;@", "", dateValue, "[$-411]mmmm d, yyyy;@", "", dateValue, "[$-411]m/d/yy h:mm AM/PM;@:", "", dateValue, "dddd-mmmm;@", "", dateValue, "dddd-mmmm-yyyy;@", "", dateValue, "mmm-yy;@", "", dateValue, "mmmm d, yyyy;@", "", dateValue, "m/d/yy h:mm AM/PM;@:", "", dateValue, "M/d/yyyy", "9/2/2011", dateValue, "[$-411]ggg ee/MMM/dd dddd", "", dateValue, "[$-F800]dddd, mmmm dd, yyyy", "Friday, September 02, 2011", dateValue, "M/d", "9/2", dateValue, "M/d/yy", "9/2/11", dateValue, "MM/dd/yy", "09/02/11", dateValue, "d-MMM", "2-Sep", dateValue, "d-MMM-yy", "2-Sep-11", dateValue, "dd-MMM-yy", "02-Sep-11", dateValue, "MMM-yy", "Sep-11", dateValue, "MMMM-yy", "September-11", dateValue, "d-MMM-yyyy", "2-Sep-2011", dateValue, "MMMM d, yyyy", "September 2, 2011", dateValue, "M/d/yy HH:mm tt", "9/2/11 12:00 AM", dateValue, "M/d/yy H:mm", "9/2/11 0:00", dateValue, "[$-409]mmmmm;@", "S", dateValue, "[$-409]mmmmm-yy;@", "S-11", //Time Formatter timeValue, "HH:mm:ss tt", "10:08:25 AM", timeValue, "HH:mm", "10:08", timeValue, "HH:mm tt", "10:08 AM", timeValue, "HH:mm:ss", "10:08:25", timeValue, "mm:ss.0", "08:25.0", timeValue, "m/d/yy HH:mm tt", "12/30/99 10:08 AM", timeValue, "d/m/yy HH:mm", "30/12/99 10:08", //Custom DateTime Formatter cusDateValue, "General", "40784", cusDateValue, "m/d/yyyy", "8/29/2011", cusDateValue, "d-mmm-yy", "29-Aug-11", cusDateValue, "d-mmm", "29-Aug", cusDateValue, "mmm-yy", "Aug-11", cusDateValue, "h:mm AM/PM", "0:00 AM", cusDateValue, "h:mm:ss AM/PM", "0:00:00 AM", cusDateValue, "h:mm", "0:00", cusDateValue, "h:mm:ss", "0:00:00", cusDateValue, "m/d/yyyy h:mm", "8/29/2011 0:00", cusDateValue, "mm:ss", "00:00", cusDateValue, "mm:ss.0", "00:00.0", cusDateValue, "@", "8/29/2011 12:00:00 AM", cusDateValue, "[h]:mm:ss", "978816:00:00" ]; let numberFormatterArray = [ //Number Formatter, "0.25", "# ?/?", "1/4", "1.35", "# ??/??", "1 7/20", "1.053", "# ???/???", "1 6/113", "0.33", "# ?/2", "1/2", "0.25", "# ?/4", "1/4", "1.35", "# ?/8", "1 3/8", "1.5", "# ??/16", " 1 8/16", "0.33", "# ?/10", "3/10", "0.25", "# ??/100", "25/100", "12345", "[DBNum1][$-411]#,##0", "一二,三四五", "12345", "[DBNum2][$-411]#,##0","壱弐,参四伍", "12345", "[DBNum3][$-411]#,##0","１２,３４５", "12345", "[DBNum1][$-411]General","一万二千三百四十五", "12345", "[DBNum2][$-411]General","壱萬弐阡参百四拾伍", "12345", "[DBNum3][$-411]General", "１２３４５", numValue, "0", "1234", numValue, "0.0", "1234.0", numValue, "0.00", "1234.01", numValue, "0.0000000000", "1234.0123456789", numValue, "0.00000000000000000000", "1234.01234567890000000000", numValue, "0.000000000000000000000000000000", "1234.012345678900000000000000000000", numValue, "#,##0", "1,234", numValue, "#,##0.00", "1,234.01", numValue, "#,##0.0000000000", "1,234.0123456789", numValue, "#,##0.00000000000000000000", "1,234.01234567890000000000", numValue, "#,##0.000000000000000000000000000000", "1,234.012345678900000000000000000000", numValue, "$#,##0", "$1,234", numValue, "$#,##0.00", "$1,234.01", numValue, "$#,##0.0000000000", "$1,234.0123456789", numValue, "$#,##0.00000000000000000000", "$1,234.01234567890000000000", numValue, "$#,##0.000000000000000000000000000000", "$1,234.012345678900000000000000000000", numValue, "#,##0.00", "1,234.01", numValue, "￥#,##0.00", "￥1,234.01", numValue, "Lek#,##0.00", "Lek1,234.01", numValue, "դր#,##0.00000", "դր1,234.01235", numValue, "$#,##0.00", "$1,234.01", numValue, "€#,##0.00", "€1,234.01", numValue, "$#,##0.00", "$1,234.01", numValue, "ман#,##0.00", "ман1,234.01", numValue, "€#,##0.00", "€1,234.01", numValue, "лв#,##0.000000", "лв1,234.012346", numValue, "$#,##0.00", "$1,234.01", numValue, "$b#,##0.00", "$b1,234.01", numValue, "R$#,##0.00", "R$1,234.01", numValue, "#,##0.00р.", "1,234.01р.", numValue, "BZ$#,##0.00", "BZ$1,234.01", numValue, "$#,##0.00", "$1,234.01", numValue, "CB#,##0.00", "CB1,234.01", numValue, "fr#,##0.00", "fr1,234.01", numValue, "$#,##0.00", "$1,234.01", numValue, "¥#,##0.00", "¥1,234.01", numValue, "$#,##0.00", "$1,234.01", numValue, "₡#,##0.00", "₡1,234.01", numValue, "Kč#,##0.00", "Kč1,234.01", numValue, "€#,##0.00", "€1,234.01", numValue, "kr#,##0.00", "kr1,234.01", numValue, "$#,##0.00", "$1,234.01", numValue, "kr#,##0.00", "kr1,234.01", numValue, "€#,##0.00", "€1,234.01", numValue, "£#,##0.00", "£1,234.01", numValue, "Lari#,##0.00", "Lari1,234.01", numValue, "Q#,##0.00", "Q1,234.01", numValue, "L#,##0.00", "L1,234.01", numValue, "kn#,##0.00", "kn1,234.01", numValue, "Ft#,##0.00", "Ft1,234.01", numValue, "Rp#,##0.00", "Rp1,234.01", numValue, "₪#,##0.00", "₪1,234.01", numValue, "रु#,##0.00", "रु1,234.01", numValue, "J$#,##0.00", "J$1,234.01", numValue, "¥#,##0.00", "¥1,234.01", numValue, "сом#,##0.00", "сом1,234.01", numValue, "₩#,##0.00", "₩1,234.01", numValue, "Т#,##0.00", "Т1,234.01", numValue, "Lt#,##0.00", "Lt1,234.01", numValue, "ден#,##0.00", "ден1,234.01", numValue, "₮#,##0.00", "₮1,234.01", numValue, "$#,##0.00", "$1,234.01", numValue, "C$#,##0.00", "C$1,234.01", numValue, "kr#,##0.00", "kr1,234.01", numValue, "zł#,##0.00", "zł1,234.01", numValue, "lei#,##0.00", "lei1,234.01", numValue, "р#,##0.00", "р1,234.01", numValue, "TA#,##0.00", "TA1,234.01", numValue, "฿#,##0.00", "฿1,234.01", numValue, "TL#,##0.00", "TL1,234.01", numValue, "TT$#,##0.00", "TT$1,234.01", numValue, "NT$#,##0.00", "NT$1,234.01", numValue, "₴#,##0.00", "₴1,234.01", numValue, "$U#,##0.00", "$U1,234.01", numValue, "сўм#,##0.00", "сўм1,234.01", numValue, "₫#,##0.00", "₫1,234.01", numValue, "R#,##0.00", "R1,234.01", numValue, "Z$#,##0.00", "Z$1,234.01", //Percentage Formatter perValue, "0%", "1234%", perValue, "0.00%", "1234.01%", perValue, "0.000000000000000%", "1234.012345678900000%", perValue, "0.000000000000000000000000000000%", "1234.012345678900000000000000000000%", //Scientific Formatter sciValue, "0E+00", "1E+02", sciValue, "0.00E+00", "1.01E+02", sciValue, "0.000000000000000E+00", "1.012345678901230E+02", sciValue, "0.000000000000000000000000000000E+00", "1.012345678901230000000000000000E+02", //Custom Number Formatter cusValue, "General", "1001.1", cusValue, "0", "1001", cusValue, "0.00", "1001.10", cusValue, "#,##0", "1,001", cusValue, "#,##0.00", "1,001.10", cusValue, "0%", "100110%", cusValue, "0.00%", "100110.00%", cusValue, "0.00E+00", "1.00E+03", cusValue, "##0.0E+0", "1.0E+3", cusValue, "# ?/?", "1001 1/9", cusValue, "# ??/??", "1001 1/10" ]; let eraFormatterArray = [ eraDateValue, '[$-ja-JP-x-gannen]ggg ee"年"mm"月"dd"日"', '', eraDateValue, '[$-ja-JP-x-gannen]ggg ee"年"m"月"d"日"', '', eraDateValue, '[$-411]ggg ee"年"mm"月"dd"日"', '', ]; let dbNum4FormatterArray = [ '1234567890000', '[DBNum4][$-412]General', '', '123456.789', '[DBNum4][$-412]0.00', '', '2020/07/16', '[DBNum4][$-412]YYYY-MM-DD', '' ]; let colorFormatterArray = [ "1","[color 1]0.0","", "2","[color 2]0.0","", "3","[color 3]0.0","", "4","[color 4]0.0","", "5","[color 5]0.0","", "6","[color 6]0.0","", "7","[color 7]0.0","", "8","[color 8]0.0","", "9","[color 9]0.0","", "10","[color 10]0.0","", "11","[color 11]0.0","", "12","[color 12]0.0","", "13","[color 13]0.0","", "14","[color 14]0.0","", "15","[color 15]0.0","", "16","[color 16]0.0","", "17","[color 17]0.0","", "18","[color 18]0.0","", "19","[color 19]0.0","", "20","[color 20]0.0","", "21","[color 21]0.0","", "22","[color 22]0.0","", "23","[color 23]0.0","", "24","[color 24]0.0","", "25","[color 25]0.0","", "26","[color 26]0.0","", "27","[color 27]0.0","", "28","[color 28]0.0","", "29","[color 29]0.0","", "30","[color 30]0.0","", "31","[color 31]0.0","", "32","[color 32]0.0","", "33","[color 33]0.0","", "34","[color 34]0.0","", "35","[color 35]0.0","", "36","[color 36]0.0","", "37","[color 37]0.0","", "38","[color 38]0.0","", "39","[color 39]0.0","", "40","[color 40]0.0","", "41","[color 41]0.0","", "42","[color 42]0.0","", "43","[color 43]0.0","", "44","[color 44]0.0","", "45","[color 45]0.0","", "46","[color 46]0.0","", "47","[color 47]0.0","", "48","[color 48]0.0","", "49","[color 49]0.0","", "50","[color 50]0.0","", "51","[color 51]0.0","", "52","[color 52]0.0","", "53","[color 53]0.0","", "54","[color 54]0.0","", "55","[color 55]0.0","", "56","[color 56]0.0","", ] spread.options.tabStripRatio = 0.8; let sheet; sheet=spread.getSheet(4); sheet.name("Color Formatter"); this.initFormatterUnitTest(sheet); this.startFormatterUnitTest(sheet,colorFormatterArray); sheet = spread.getSheet(3); sheet.name("DBNum4 Formatter"); this.initFormatterUnitTest(sheet); this.startFormatterUnitTest(sheet, dbNum4FormatterArray); sheet = spread.getSheet(2); sheet.name("Era Formatter"); this.initFormatterUnitTest(sheet); this.startFormatterUnitTest(sheet, eraFormatterArray); sheet = spread.getSheet(1); sheet.name("Date Formatter"); this.initFormatterUnitTest(sheet); this.startFormatterUnitTest(sheet, dateFormatterArray); sheet = spread.getSheet(0); sheet.name("Number Formatter"); this.initFormatterUnitTest(sheet); this.startFormatterUnitTest(sheet, numberFormatterArray); spread.resumePaint(); } btnSetFormat(e) { let sheet = this.spread.getActiveSheet(); try { let selections = sheet.getSelections(); for (let i = 0; i < selections.length; i++) { let range = this.getActualCellRange(selections[i], sheet.getRowCount(), sheet.getColumnCount()); for (let i = 0; i < range.rowCount; i++) { for (let j = 0; j < range.colCount; j++) { sheet.getCell(range.row + i, range.col + j).formatter(new GC.Spread.Formatter.GeneralFormatter(document.getElementById("format_text").value)); } } } } catch (ex) { alert(ex.message); } } btnClearFormat(e) { let sheet = this.spread.getActiveSheet(); let selections = sheet.getSelections(); for (let i = 0; i < selections.length; i++) { let range = this.getActualCellRange(selections[i], sheet.getRowCount(), sheet.getColumnCount()); for (let i = 0; i < range.rowCount; i++) { for (let j = 0; j < range.colCount; j++) { sheet.getCell(range.row + i, range.col + j).formatter(null); } } } } initFormatterUnitTest(sheet) { let spreadNS = GC.Spread.Sheets; sheet.setColumnCount(4); sheet.getCell(0, 0, spreadNS.SheetArea.colHeader).value(" "); sheet.getCell(0, 1, spreadNS.SheetArea.colHeader).value("Value"); sheet.getCell(0, 2, spreadNS.SheetArea.colHeader).value("Formatter"); sheet.getCell(0, 3, spreadNS.SheetArea.colHeader).value("Display"); sheet.setColumnWidth(0, 10); sheet.setColumnWidth(1, 300); sheet.setColumnWidth(2, 300); sheet.setColumnWidth(3, 300); }; startFormatterUnitTest(sheet, formatters) { for (let i = 0; i < formatters.length; i += 3) { //Mark the new added format in current version. if (sheet.name() === "Number Formatter") { if (i < 15 * 3) { sheet.getCell(i / 3, 0).value("*").font("20px arial bold"); } } if (sheet.name() === "Date Formatter") { if (i < 13 * 3) { sheet.getCell(i / 3, 0).value("*").font("20px arial bold"); } } sheet.setValue(i / 3, 1, formatters[i]); sheet.setValue(i / 3, 2, formatters[i + 1]); sheet.getCell(i / 3, 3).formatter(formatters[i + 1]); sheet.setText(i / 3, 3, formatters[i]); } } getActualCellRange(cellRange, rowCount, columnCount) { let spreadNS = GC.Spread.Sheets; if (cellRange.row == -1 && cellRange.col == -1) { return new spreadNS.Range(0, 0, rowCount, columnCount); } else if (cellRange.row == -1) { return new spreadNS.Range(0, cellRange.col, rowCount, cellRange.colCount); } else if (cellRange.col == -1) { return new spreadNS.Range(cellRange.row, 0, cellRange.rowCount, columnCount); } return cellRange; } } @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-worksheet [autoGenerateColumns]='autoGenerateColumns'> <gc-column dataField="*" width=10></gc-column> <gc-column dataField="Value" width=300></gc-column> <gc-column dataField="Formatter" width=300></gc-column> <gc-column dataField="Display" width=300></gc-column> </gc-worksheet> <gc-worksheet [autoGenerateColumns]='autoGenerateColumns'> <gc-column dataField="*" width=10></gc-column> <gc-column dataField="Value" width=300></gc-column> <gc-column dataField="Formatter" width=300></gc-column> <gc-column dataField="Display" width=300></gc-column> </gc-worksheet><gc-worksheet [autoGenerateColumns]='autoGenerateColumns'> <gc-column dataField="*" width=10></gc-column> <gc-column dataField="Value" width=300></gc-column> <gc-column dataField="Formatter" width=300></gc-column> <gc-column dataField="Display" width=300></gc-column> </gc-worksheet><gc-worksheet [autoGenerateColumns]='autoGenerateColumns'> <gc-column dataField="*" width=10></gc-column> <gc-column dataField="Value" width=300></gc-column> <gc-column dataField="Formatter" width=300></gc-column> <gc-column dataField="Display" width=300></gc-column> </gc-worksheet> <gc-worksheet [autoGenerateColumns]='autoGenerateColumns'> <gc-column dataField="*" width=10></gc-column> <gc-column dataField="Value" width=300></gc-column> <gc-column dataField="Formatter" width=300></gc-column> <gc-column dataField="Display" width=300></gc-column> </gc-worksheet> </gc-spread-sheets> <div class="options-container"> <div class="option-row"> Select a cell in Spread, enter a format in this text box, and click the "SetFormat" button to set the format for that cell. The "ClearFormat" button can be used to clear the format in the selected cell in Spread. <div class="option-row"> <input type="text" id="format_text" value="##,##0" /> <input type="button" value="SetFormat" id="btnSetFormat" (click)="btnSetFormat($event)" /> <input type="button" value="ClearFormat" id="btnClearFormat" (click)="btnClearFormat($event)" /> </div> </div>         </div>  </div>
.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; } input { padding: 4px 8px; display: block; margin-top: 6px; } input[type=button] { display: inline-block; } 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);