Text alignment

Table of contents

• Overview
• Horizontal and vertical alignment
• Basic example

Overview

Text alignment functionality enables you to predefine the horizontal and vertical alignment of how the text is displayed in the cells.

Horizontal and vertical alignment

To initialize Handsontable with predefined horizontal and vertical alignment, provide the alignment details for the className cells in the form of a grid, configuring cells by col,row, and className. Cells can be configured individually, or the entire grid can be configured. See the code sample below for an example.

Available class names:

• Horizontal: htLeft, htCenter, htRight, htJustify,
• Vertical: htTop, htMiddle, htBottom.

Alignment changes can be tracked using afterSetCellMeta callback.

Basic example

The following code sample configures the grid to use htCenter and configures individual cells to use different alignments.

const container = document.querySelector('#example1'); const hot = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(100, 18), colWidths: 100, height: 320, rowHeaders: true, colHeaders: true, contextMenu: true, licenseKey: 'non-commercial-and-evaluation', mergeCells: [ { row: 1, col: 1, rowspan: 3, colspan: 3 }, { row: 3, col: 4, rowspan: 2, colspan: 2 } ], className: 'htCenter', cell: [ { row: 0, col: 0, className: 'htRight' }, { row: 1, col: 1, className: 'htLeft htMiddle' }, { row: 3, col: 4, className: 'htLeft htBottom' } ], afterSetCellMeta(row, col, key, val) { console.log('cell meta changed', row, col, key, val); } }); <script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" /> <div id="example1" class="hot "></div>

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(100, 18),
  colWidths: 100,
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  licenseKey: 'non-commercial-and-evaluation',
  mergeCells: [
    { row: 1, col: 1, rowspan: 3, colspan: 3 },
    { row: 3, col: 4, rowspan: 2, colspan: 2 }
  ],
  className: 'htCenter',
  cell: [
    { row: 0, col: 0, className: 'htRight' },
    { row: 1, col: 1, className: 'htLeft htMiddle' },
    { row: 3, col: 4, className: 'htLeft htBottom' }
  ],
  afterSetCellMeta(row, col, key, val) {
    console.log('cell meta changed', row, col, key, val);
  }
});