React Data Grid 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).

In this article

• Horizontal and vertical alignment
• Basic example
• Related API reference

Horizontal and vertical alignment

To initialize Handsontable with predefined horizontal and vertical alignment globally, provide the alignment details in the className option, for example:

className="htCenter"

You can also configure cells individually by setting up the cells option. See the code sample below for an example.

Available class names:

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

You can track alignment changes by using the afterSetCellMeta hook.

Basic example

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

import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); // generate an array of arrays with dummy data const data = new Array(100) // number of rows .fill() .map((_, row) => new Array(18) // number of columns .fill() .map((_, column) => `${row}, ${column}`) ); export 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); }} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@14.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@14.1/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/14.1/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

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

export 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);
      }}
    />
  );
};

Related API reference

• Configuration options:
  • className
• Hooks:
  • afterSetCellMeta
  • beforeCellAlignment