React Data GridNumeric cell type

Display, format, sort, and filter numbers correctly by using the numeric cell type.

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.

Numeric cell type demo

In the following demo, columns Year, Price ($), and Price (€) use the numeric cell type. Click on the column names to sort them.

    Use the numeric cell type

    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',
    }]}
    

    Mind that Handsontable doesn't parse strings to numbers. In your data source, make sure to store numeric cell values as numbers, not as strings.

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

    Format numbers

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

    In the following demo, columns Price in Japan and Price in Turkey use two different numericFormat configurations.

      Mind that the numericFormat option doesn't change the way numbers are presented or parsed by the cell editor. When you edit a numeric cell:

      • Regardless of the numericFormat configuration, the number that's being edited displays its decimal separator as a period (.), and has no thousands separator or currency symbol.
        For example, during editing $7,000.02, the number displays as 7000.02.
      • You can enter a decimal separator either with a period (.), or with a comma (,).
      • You can't enter a thousands separator. After you finish editing the cell, the thousands separator is added automatically, based on your numericFormat configuration.