Text Alignment

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

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 * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; // import { App } from './app-class'; // 1. Functional Component sample ReactDOM.render(<AppFunc />, document.getElementById('app')); // 2. Class Component sample // ReactDOM.render(<App />, document.getElementById('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/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.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);