Text Alignment

SpreadJS supports text alignment, so developers can set horizontal alignment and vertical alignment to get the desired text alignment effect.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
Description
app.jsx
app-func.jsx
app-class.jsx
index.html
styles.css
Copy to CodeMine

You can create a style and set alignment as follows:

    var style = new GC.Spread.Sheets.Style();
    style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    style.vAlign = GC.Spread.Sheets.VerticalAlign.bottom;

Then apply this style to the cell to set the text alignment.

The list below shows the alignment currently supported by SpreadJS.

Horizontal alignment :

  • Left
  • Center
  • Right
  • Center Across Selection (CenterContinue)
  • Distributed

Vertical alignment:

  • Top
  • Center
  • Bottom
You can create a style and set alignment as follows: Then apply this style to the cell to set the text alignment. The list below shows the alignment currently supported by SpreadJS. Horizontal alignment : Left Center Right Center Across Selection (CenterContinue) Distributed Vertical alignment: Top Center Bottom
import * as React from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; import { AppFunc } from './app-func'; // import { App } from './app-class'; // 1. Functional Component sample createRoot(document.getElementById('app')).render(<AppFunc />); // 2. Class Component sample // createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets } from '@mescius/spread-sheets-react'; export function AppFunc() { let spread = null; let sheet = null; const hAlignLeft = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.hAlign = 0; sheet.setStyle(acRow, acCol, style); } const hAlignCenter = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.hAlign = 1; sheet.setStyle(acRow, acCol, style); } const hAlignRight = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.hAlign = 2; sheet.setStyle(acRow, acCol, style); } const hAlignCenterContinues = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.hAlign = 4; sheet.setStyle(acRow, acCol, style); } const hAlignDistributed = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.hAlign = 5; sheet.setStyle(acRow, acCol, style); } const vAlignTop = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.vAlign = 0; sheet.setStyle(acRow, acCol, style); } const vAlignCenter = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.vAlign = 1; sheet.setStyle(acRow, acCol, style); } const vAlignBottom = () => { let acRow = sheet.getActiveRowIndex(), acCol = sheet.getActiveColumnIndex(); var style = sheet.getActualStyle(acRow, acCol); style.vAlign = 2; sheet.setStyle(acRow, acCol, style); } const initSpread = (currSpread) => { spread = currSpread; spread.fromJSON(jsonData); sheet = spread.getActiveSheet(); sheet.suspendPaint(); // set table style sheet.getRange("C5:E5").backColor("Accent 1 80"); sheet.getRange("C6:C13").backColor("Accent 6 80"); sheet.addSpan(5, 2, 5, 1); sheet.addSpan(10, 2, 3, 1); sheet.setColumnWidth(2, 140); sheet.setColumnWidth(3, 200); sheet.setColumnWidth(4, 80); sheet.setRowHeight(10, 60); sheet.setRowHeight(11, 60); sheet.setRowHeight(12, 60); sheet.getRange("C6:C13").vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getRange("C6:C13").hAlign(GC.Spread.Sheets.HorizontalAlign.center); sheet.getRange("C5:E5").hAlign(GC.Spread.Sheets.HorizontalAlign.centerContinuous); var lineStyle = GC.Spread.Sheets.LineStyle.dotted; var lineBorder = new GC.Spread.Sheets.LineBorder('black', lineStyle); sheet.getRange("C5:E13").setBorder(lineBorder, { all: true }); // set text sheet.setValue(4, 2, "Text Alignment"); sheet.setValue(5, 2, "Horizontal Alignment"); sheet.setValue(10, 2, "Vertical Alignment"); var hAlignData = [["Left"], ["Center"], ["Right"], ["Center Across Selection"], ["Distributed Alignment"]]; var vAlignData = [["Top"], ["Center"], ["Bottom"]]; sheet.setArray(5, 3, hAlignData); sheet.setArray(10, 3, vAlignData); // set Alignment sheet.getStyle(5, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.left; sheet.getStyle(6, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.center; sheet.getStyle(7, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.right; sheet.getRange(8, 3, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.centerContinuous); sheet.getStyle(9, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.distributed; sheet.getStyle(10, 3).vAlign = GC.Spread.Sheets.VerticalAlign.top; sheet.getStyle(11, 3).vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet.getStyle(12, 3).vAlign = GC.Spread.Sheets.VerticalAlign.bottom; sheet.resumePaint(); } return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={initSpread}> </SpreadSheets> </div> <Panel hAlignCenter={hAlignCenter} hAlignRight={hAlignRight} hAlignCenterContinues={hAlignCenterContinues} hAlignDistributed={hAlignDistributed} vAlignTop={vAlignTop} vAlignCenter={vAlignCenter} vAlignBottom={vAlignBottom} hAlignLeft={hAlignLeft} ></Panel> </div> ); } const Panel = (props) => { const { hAlignLeft, hAlignCenter, hAlignRight, hAlignCenterContinues, hAlignDistributed, vAlignTop, vAlignCenter, vAlignBottom, } = props; return ( <div class="options-container"> <div class="option-row"> <label id="Text Oriention" for="textOriention">HAlign:</label> <input type="button" value="Left" id="HAlign0" onClick={hAlignLeft} /> <input type="button" value="Center" id="HAlign1" onClick={hAlignCenter} /> <input type="button" value="Right" id="HAlign2" onClick={hAlignRight} /> <input type="button" value="CenterContinues" id="HAlign3" onClick={hAlignCenterContinues} /> <input type="button" value="Distributed" id="HAlign4" onClick={hAlignDistributed} /> </div> <div class="option-row"> <label id="Text Oriention" for="textOriention">VAlign:</label> <input type="button" value="Top" id="VAlign0" onClick={vAlignTop} /> <input type="button" value="Center" id="VAlign1" onClick={vAlignCenter} /> <input type="button" value="Bottom" id="VAlign2" onClick={vAlignBottom} /> </div> </div> ) };
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets } from '@mescius/spread-sheets-react'; const Component = React.Component; export class App extends Component { constructor(props) { super(props); this.spread = null; this.sheet = null; this.state = { top: 0, left: 0, right: 0, bottom: 0 } } render() { return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> </SpreadSheets> </div> <Panel hAlignCenter={() => { this.hAlignCenter() }} hAlignRight={() => { this.hAlignRight() }} hAlignCenterContinues={() => { this.hAlignCenterContinues() }} hAlignDistributed={() => { this.hAlignDistributed() }} vAlignTop={() => { this.vAlignTop() }} vAlignCenter={() => { this.vAlignCenter() }} vAlignBottom={() => { this.vAlignBottom() }} hAlignLeft={() => { this.hAlignLeft() }} ></Panel> </div> ) } hAlignLeft() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.hAlign = 0; this.sheet.setStyle(acRow, acCol, style); } hAlignCenter() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.hAlign = 1; this.sheet.setStyle(acRow, acCol, style); } hAlignRight() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.hAlign = 2; this.sheet.setStyle(acRow, acCol, style); } hAlignCenterContinues() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.hAlign = 4; this.sheet.setStyle(acRow, acCol, style); } hAlignDistributed() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.hAlign = 5; this.sheet.setStyle(acRow, acCol, style); } vAlignTop() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.vAlign = 0; this.sheet.setStyle(acRow, acCol, style); } vAlignCenter() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.vAlign = 1; this.sheet.setStyle(acRow, acCol, style); } vAlignBottom() { let acRow = this.sheet.getActiveRowIndex(), acCol = this.sheet.getActiveColumnIndex(); var style = this.sheet.getActualStyle(acRow, acCol); style.vAlign = 2; this.sheet.setStyle(acRow, acCol, style); } initSpread(spread) { this.spread = spread; spread.fromJSON(jsonData); this.sheet = spread.getActiveSheet(); this.sheet.suspendPaint(); // set table style this.sheet.getRange("C5:E5").backColor("Accent 1 80"); this.sheet.getRange("C6:C13").backColor("Accent 6 80"); this.sheet.addSpan(5, 2, 5, 1); this.sheet.addSpan(10, 2, 3, 1); this.sheet.setColumnWidth(2, 140); this.sheet.setColumnWidth(3, 200); this.sheet.setColumnWidth(4, 80); this.sheet.setRowHeight(10, 60); this.sheet.setRowHeight(11, 60); this.sheet.setRowHeight(12, 60); this.sheet.getRange("C6:C13").vAlign(GC.Spread.Sheets.VerticalAlign.center); this.sheet.getRange("C6:C13").hAlign(GC.Spread.Sheets.HorizontalAlign.center); this.sheet.getRange("C5:E5").hAlign(GC.Spread.Sheets.HorizontalAlign.centerContinuous); var lineStyle = GC.Spread.Sheets.LineStyle.dotted; var lineBorder = new GC.Spread.Sheets.LineBorder('black', lineStyle); this.sheet.getRange("C5:E13").setBorder(lineBorder, { all: true }); // set text this.sheet.setValue(4, 2, "Text Alignment"); this.sheet.setValue(5, 2, "Horizontal Alignment"); this.sheet.setValue(10, 2, "Vertical Alignment"); var hAlignData = [["Left"], ["Center"], ["Right"], ["Center Across Selection"],["Distributed Alignment"]]; var vAlignData = [["Top"], ["Center"], ["Bottom"]]; this.sheet.setArray(5, 3, hAlignData); this.sheet.setArray(10, 3, vAlignData); // set Alignment this.sheet.getStyle(5, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.left; this.sheet.getStyle(6, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.center; this.sheet.getStyle(7, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.right; this.sheet.getRange(8, 3, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.centerContinuous); this.sheet.getStyle(9, 3).hAlign = GC.Spread.Sheets.HorizontalAlign.distributed; this.sheet.getStyle(10, 3).vAlign = GC.Spread.Sheets.VerticalAlign.top; this.sheet.getStyle(11, 3).vAlign = GC.Spread.Sheets.VerticalAlign.center; this.sheet.getStyle(12, 3).vAlign = GC.Spread.Sheets.VerticalAlign.bottom; this.sheet.resumePaint(); } } const Panel = (props) => { const {hAlignLeft, hAlignCenter, hAlignRight, hAlignCenterContinues, hAlignDistributed,vAlignTop, vAlignCenter, vAlignBottom, } = props; return ( <div class="options-container"> <div class="option-row"> <label id="Text Oriention" for="textOriention">HAlign:</label> <input type="button" value="Left" id="HAlign0" onClick={() => { hAlignLeft() }} /> <input type="button" value="Center" id="HAlign1" onClick={() => { hAlignCenter() }} /> <input type="button" value="Right" id="HAlign2" onClick={() => { hAlignRight() }} /> <input type="button" value="CenterContinues" id="HAlign3" onClick={() => { hAlignCenterContinues() }} /> <input type="button" value="Distributed" id="HAlign4" onClick={() => { hAlignDistributed() }} /> </div> <div class="option-row"> <label id="Text Oriention" for="textOriention">VAlign:</label> <input type="button" value="Top" id="VAlign0" onClick={() => { vAlignTop() }} /> <input type="button" value="Center" id="VAlign1" onClick={() => { vAlignCenter() }} /> <input type="button" value="Bottom" id="VAlign2" onClick={() => { vAlignBottom() }} /> </div> </div> ) }
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="$DEMOROOT$/spread/source/data/alignment.js" type="text/javascript"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app" style="height: 100%;"></div> </body> </html>
.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; } input { width: 115px; } .option-row { font-size: 14px; padding: 5px; } label { display: block; padding-bottom: 5px; } input { padding: 4px 6px; margin-bottom: 6px; margin-right: 5px; } .paddingLabel { width: 113px; display: inline-block; text-align: center; } .paddingLabel1 { width: 50px; /* display: inline-block; */ } .paddingInput { width: 84px; } .paddingInput1 { width: 84px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/cjs/react.production.js', 'react-dom': 'npm:react-dom/cjs/react-dom.production.js', 'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js', 'scheduler': 'npm:scheduler/cjs/scheduler.production.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' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);