/ S

React Data Grid Numeric cell type

Table of contents

Overview

The default cell type in Handsontable is text. The data of a text cell is processed as a string type that corresponds to the value of the text editor's internal <textarea> element. However, there are many cases where you need cell values to be treated as a number type. The numeric cell type allows you to format displayed numbers nicely and sort them correctly.

Usage

TIP

Ensure your numeric cell values are stored as numbers and not strings in the data source, as Handsontable doesn't parse strings to numbers.

To use the numeric cell type, set the type option to 'numeric':

// set the `numeric` cell type for each cell of the entire grid
type={'numeric'},

// set the `numeric` cell type for each cell of a single column
columns={[{
  type: 'numeric',
}]}

// set the `numeric` cell type for a single cell
cell={[{
  row: 0,
  col: 0,
  type: 'numeric',
}]}

Numeric values in the editor

In the cell editor of a numeric cell:

  • The number is initially presented with a dot (50.5) as the decimal separator and without the thousands separator.
  • A dot (50.5) or a comma (50,5) can be entered as the decimal separator.
  • No character can be used as the thousands separator.

TIP

All the positive and negative integers whose magnitude is no greater than 253 (+/- 9007199254740991) are representable in the Number type, i.e., safe integer. Any calculations that are performed on bigger numbers won't be calculated precisely due to JavaScript limitations.

Numeric values in the renderer

To format the look of numeric values in cell renderers, use the numericFormat option.

Note that the numericFormat option doesn't change the way numbers are presented or parsed by the cell editor.

Basic example

    Formatting numbers

      ← Date cell type →