Skip to content
Handsontable

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.

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:

className="htCenter"

Basic example

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

JavaScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(18) // number of columns
      .fill(null)
      .map((_, column) => `${row}, ${column}`)
  );


const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      colWidths={100}
      height={320}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      autoWrapRow={true}
      autoWrapCol={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={function (row, col, key, val) {
        console.log('cell meta changed', row, col, key, val);
      }}
    />
  );
};


export default ExampleComponent;
TypeScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill(null)
  .map((_, row) =>
    new Array(18) // number of columns
      .fill(null)
      .map((_, column) => `${row}, ${column}`)
  );


const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      colWidths={100}
      height={320}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      autoWrapRow={true}
      autoWrapCol={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={function (row, col, key, val) {
        console.log('cell meta changed', row, col, key, val);
      }}
    />
  );
};


export default ExampleComponent;

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.