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"

Cells can be also configured 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.

Alignment changes can be tracked 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} 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@12.4/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/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@12.4/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/12.4/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}
      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