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'
}
}
]
});
//<code-header>
fiddle.title = 'Number column';
//</code-header>
// grid with NumberColumn
const grid = new Grid({
appendTo : targetElement,
// makes grid as high as it needs to be to fit rows
autoHeight : true,
data : DataGenerator.generateData(5),
columns : [
{ field : 'name', text : 'Name', flex : 1 },
{ type : 'number', field : 'score', text : 'NumberColumn', flex : 1 }
]
});Configs
86
Configs
86Common
Large step size, defaults to 10 * step. Applied when pressing SHIFT and stepping either by click or
when using the Up/Down keys.
The maximum value for the field used during editing.
The minimum value for the field used during editing.
Step size for the field used during editing. Also used when pressing up/down keys in the field.
Unit to append to displayed value.
Layout
Text align. Accepts 'left'/'center'/'right' or direction neutral 'start'/'end'
Other
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
Rendering
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.
new Grid({
columns : [
{ text : 'Temperature', type : 'number', renderer : ({ record, value }) => value + 'F' },
]
});
| Parameter | Type | Description |
|---|---|---|
renderData | Object | Object containing renderer parameters |
renderData.cellElement | HTMLElement | Cell element, for adding CSS classes, styling etc. Can be |
renderData.value | Number | null | undefined | The Number value to be displayed in the cell |
renderData.record | Model | Record for the row |
renderData.column | Column | This column |
renderData.grid | Grid | This grid |
renderData.row | Row | Row object. Can be null in case of export. Use the row's API to manipulate CSS class names. |
renderData.size | Object | Set |
renderData.size.height | Number | Set this to request a certain row height |
renderData.size.configuredHeight | Number | Row height that will be used if none is requested |
renderData.isExport | Boolean |
|
renderData.isMeasuring | Boolean | True if the column is being measured for a |
Integration
Interaction
Menu
Misc
Properties
156
Properties
156Common
Large step size, defaults to 10 * step. Applied when pressing SHIFT and stepping either by click or
when using the Up/Down keys.
The maximum value for the field used during editing.
The minimum value for the field used during editing.
Step size for the field used during editing. Also used when pressing up/down keys in the field.
Unit to append to displayed value.
Class hierarchy
Layout
Text align. Accepts 'left'/'center'/'right' or direction neutral 'start'/'end'
Other
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
Rendering
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.
new Grid({
columns : [
{ text : 'Temperature', type : 'number', renderer : ({ record, value }) => value + 'F' },
]
});
| Parameter | Type | Description |
|---|---|---|
renderData | Object | Object containing renderer parameters |
renderData.cellElement | HTMLElement | Cell element, for adding CSS classes, styling etc. Can be |
renderData.value | Number | null | undefined | The Number value to be displayed in the cell |
renderData.record | Model | Record for the row |
renderData.column | Column | This column |
renderData.grid | Grid | This grid |
renderData.row | Row | Row object. Can be null in case of export. Use the row's API to manipulate CSS class names. |
renderData.size | Object | Set |
renderData.size.height | Number | Set this to request a certain row height |
renderData.size.configuredHeight | Number | Row height that will be used if none is requested |
renderData.isExport | Boolean |
|
renderData.isMeasuring | Boolean | True if the column is being measured for a |
Editing
Integration
Interaction
JSON
Menu
Misc
Parent & children
Functions
77
Functions
77Other
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 })}`;
}
}
]
}
| Parameter | Type | Description |
|---|---|---|
rendererData | Object | The data object passed to the renderer |
rendererData.value | Number | The value to display |
Formatted number