React Data Grid Text alignment

Table of contents

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

Overview

Text alignment functionality enables you to predefine the horizontal and vertical alignment of how the text is displayed in the cells.

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 Handsontable from 'handsontable'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { return ( <HotTable data={Handsontable.helper.createSpreadsheetData(100, 18)} 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.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.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@12.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={Handsontable.helper.createSpreadsheetData(100, 18)}
      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'));

Related API reference

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