Text alignment

Align values within cells: horizontally (to the right, left, center, or by justifying them), and vertically (to the top, middle, or bottom of the cell).

Apply text alignment to cells using CSS class names or the className configuration option.

Overview

You can set cell alignment in two ways:

Configuration option `className`/`cells`	Context menu `alignment` item
Set programmatically, for the whole grid, a column, or individual cells	Set interactively, by the person using the grid
Requires no additional plugin	Requires the `ContextMenu` plugin, with the `alignment` item enabled
Not tracked by `UndoRedo`	Tracked by `UndoRedo`

To align a cell

To set alignment for individual cells, configure them using the cells option or the cell array. Available class names:

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

You can track alignment changes by using the afterSetCellMeta hook.

To align a column

To apply alignment globally or per column, provide the alignment details in the className option, for example:

1
className: 'htCenter'

Let the person using the grid set alignment interactively, through the context menu.

Enable the ContextMenu plugin and include the alignment item:

1
contextMenu: ['alignment'],

Select one or more cells, right-click to open the context menu, and choose an option from the Align submenu:

Horizontal: Left, Center, Right, Justify
Vertical: Top, Middle, Bottom

Each option sets the matching CSS class name (htLeft, htCenter, htRight, htJustify, htTop, htMiddle, htBottom) on the selected cells, and fires the beforeCellAlignment hook before applying the change.

Undo and redo alignment changes

Alignment changes made through the context menu are tracked by the UndoRedo plugin. Press Ctrl/⌘+Z to undo an alignment change, and Ctrl/⌘+Y to redo it.

Alignment changes made through the className or cells configuration options aren’t tracked by UndoRedo.

Basic example

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

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
// generate an array of arrays with dummy data
8
const data = new Array(100) // number of rows
9
  .fill(null)
10
  .map((_, row) =>
11
    new Array(18) // number of columns
12
      .fill(null)
13
      .map((_, column) => `${row}, ${column}`)
14
  );
15

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

18
new Handsontable(container, {
19
  data,
20
  colWidths: 100,
21
  height: 320,
22
  rowHeaders: true,
23
  colHeaders: true,
24
  contextMenu: true,
25
  licenseKey: 'non-commercial-and-evaluation',
26
  mergeCells: [
27
    { row: 1, col: 1, rowspan: 3, colspan: 3 },
28
    { row: 3, col: 4, rowspan: 2, colspan: 2 },
29
  ],
30
  className: 'htCenter',
31
  cell: [
32
    { row: 0, col: 0, className: 'htRight' },
33
    { row: 1, col: 1, className: 'htLeft htMiddle' },
34
    { row: 3, col: 4, className: 'htLeft htBottom' },
35
  ],
36
  afterSetCellMeta(row, col, key, val) {
37
    console.log('cell meta changed', row, col, key, val);
38
  },
39
  autoWrapRow: true,
40
  autoWrapCol: true,
41
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
// generate an array of arrays with dummy data
8
const data: string[][] = new Array(100) // number of rows
9
  .fill(null)
10
  .map((_, row) =>
11
    new Array(18) // number of columns
12
      .fill(null)
13
      .map((_, column) => `${row}, ${column}`)
14
  );
15

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

18
new Handsontable(container, {
19
  data,
20
  colWidths: 100,
21
  height: 320,
22
  rowHeaders: true,
23
  colHeaders: true,
24
  contextMenu: true,
25
  licenseKey: 'non-commercial-and-evaluation',
26
  mergeCells: [
27
    { row: 1, col: 1, rowspan: 3, colspan: 3 },
28
    { row: 3, col: 4, rowspan: 2, colspan: 2 },
29
  ],
30
  className: 'htCenter',
31
  cell: [
32
    { row: 0, col: 0, className: 'htRight' },
33
    { row: 1, col: 1, className: 'htLeft htMiddle' },
34
    { row: 3, col: 4, className: 'htLeft htBottom' },
35
  ],
36
  afterSetCellMeta(row, col, key, val) {
37
    console.log('cell meta changed', row, col, key, val);
38
  },
39
  autoWrapRow: true,
40
  autoWrapCol: true,
41
});

Result

Cells display the configured horizontal or vertical alignment. Global settings apply to all cells, and per-cell settings take precedence over the global defaults.

Configuration options

Hooks

Plugins