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).

[[toc]]

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

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:

::: only-for javascript

className: 'htCenter'

:::

::: only-for react

className="htCenter"

:::

::: only-for angular

settings = { className: "htCenter" };

:::

Basic example

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

::: only-for javascript

::: example #example1 --js 1 --ts 2

@code @code

:::

:::

::: only-for react

::: example #example1 :react --js 1 --ts 2

@code @code

:::

:::

::: only-for angular

::: example #example1 :angular --ts 1 --html 2

@code @code

:::

:::

Related API reference

Configuration options

• className

Hooks

• afterSetCellMeta
• beforeCellAlignment

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.