NumberColumn

A column for showing/editing numbers.

Default editor is a NumberField.

new Grid({
    appendTo : document.body,
    columns : [
        { type: 'number', min: 0, max : 100, field: 'score' }
    ]
});

Provide a NumberFormat config as format to be able to show currency. For example:

new Grid({
    appendTo : document.body,
    columns : [
        {
            type   : 'number',
            format : {
               style    : 'currency',
               currency : 'USD'
            }
        }
    ]
});

Useful configs

Config	Description
format	Number format string or config object
min	Minimum allowed value
max	Maximum allowed value
step	Spin step amount

Configs

Configs are options you supply in a configuration object when creating an instance of this class

largeStep : Number

Large step size, defaults to 10 * step. Applied when pressing SHIFT and stepping either by click or when using the Up/Down keys.

Has a corresponding runtime largeStep property.
max : Number

The maximum value for the field used during editing.

Has a corresponding runtime max property.
min : Number

The minimum value for the field used during editing.

Has a corresponding runtime min property.
step : Number

Step size for the field used during editing. Also used when pressing up/down keys in the field.

Has a corresponding runtime step property.
unit : String

Unit to append to displayed value.

Has a corresponding runtime unit property.
format : String/NumberFormatConfig
The format to use for rendering numbers.

By default, the locale's default number formatter is used. For en-US, the locale default is a maximum of 3 decimal digits, using thousands-based grouping. This would render the number 1234567.98765 as '1,234,567.988'.

To round to whole integers, with a "," as a thousand delimiter:
```
format : '9,999.'
```
To display USD currency
```
format : {
    style    : 'currency',
    currency : 'USD',
    fraction : 0
}
```
Read more about the formatting options at NumberFormat

Has a corresponding runtime format property.
align : 'left'/'center'/'right'/'start'/'end''end'

Text align. Accepts 'left'/'center'/'right' or direction neutral 'start'/'end'

Has a corresponding runtime align property.
renderer : Function
Renderer function used to customize and style the number displayed in the cell. Return the cell text you want to display. Can also affect other aspects of the cell, such as styling.

You should never modify any records inside this method.
```
new Grid({
    columns : [
        { text : 'Temperature', type : 'number', renderer : ({ record, value }) => value + 'F' },
    ]
});
```
When using the Bryntum React wrapper, this renderer can also return JSX elements. See renderer for a JSX example and performance considerations.
Parameters
- renderData : Object
  
  Object containing renderer parameters
- cellElement : HTMLElement
  
  Cell element, for adding CSS classes, styling etc. Can be null in case of export
- value : Number/null/undefined
  
  The Number value to be displayed in the cell
- record : Model
  
  Record for the row
- column : Column
  
  This column
- grid : Grid
  
  This grid
- row : Row
  
  Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
- size : Object
  
  Set size.height to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
- height : Number
  
  Set this to request a certain row height
- configuredHeight : Number
  
  Row height that will be used if none is requested
- isExport : Boolean
  
  true if the record is being exported to Excel or a textual format, enabling special handling during export.
- isMeasuring : Boolean
  
  True if the column is being measured for a resizeToFitContent call. In which case an advanced renderer might need to take different actions.
Returns

String/DomConfig/DomConfig[]/null
Has a corresponding runtime renderer property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isNumberColumn : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of NumberColumn class, or subclass thereof.

largeStep : Number

Large step size, defaults to 10 * step. Applied when pressing SHIFT and stepping either by click or when using the Up/Down keys.

Has a corresponding largeStep config.
max : Number

The maximum value for the field used during editing.

Has a corresponding max config.
min : Number

The minimum value for the field used during editing.

Has a corresponding min config.
step : Number

Step size for the field used during editing. Also used when pressing up/down keys in the field.

Has a corresponding step config.
unit : String

Unit to append to displayed value.

Has a corresponding unit config.
format : String/NumberFormatConfig
The format to use for rendering numbers.

By default, the locale's default number formatter is used. For en-US, the locale default is a maximum of 3 decimal digits, using thousands-based grouping. This would render the number 1234567.98765 as '1,234,567.988'.

To round to whole integers, with a "," as a thousand delimiter:
```
format : '9,999.'
```
To display USD currency
```
format : {
    style    : 'currency',
    currency : 'USD',
    fraction : 0
}
```
Read more about the formatting options at NumberFormat

Has a corresponding format config.
isNumberColumn : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of NumberColumn class, or subclass thereof.
align : 'left'/'center'/'right'/'start'/'end''end'

Text align. Accepts 'left'/'center'/'right' or direction neutral 'start'/'end'

Has a corresponding align config.
renderer : Function
Renderer function used to customize and style the number displayed in the cell. Return the cell text you want to display. Can also affect other aspects of the cell, such as styling.

You should never modify any records inside this method.
```
new Grid({
    columns : [
        { text : 'Temperature', type : 'number', renderer : ({ record, value }) => value + 'F' },
    ]
});
```
When using the Bryntum React wrapper, this renderer can also return JSX elements. See renderer for a JSX example and performance considerations.

Has a corresponding renderer config.

Functions

Functions are methods available for calling on the class

defaultRenderer( rendererData )

: String

Renderer that displays a formatted number in the cell. If you create a custom renderer, and want to include the formatted number you can call defaultRenderer from it.

new Grid({
    columns: [
        {
            type   : 'number',
            text   : 'Total cost',
            field  : 'totalCost',
            format : {
                style    : 'currency',
                currency : 'USD'
            },
            renderer({ value }) {
                 return `Total cost: ${this.defaultRenderer({ value })}`;
            }
        }
    ]
}

NumberColumn

Useful configs

See also

Configs

Parameters

Returns

Properties

Functions

Source path

Inheritance tree4

Mixins5

Contents