By default, Handsontable treats all cell values as string type. This is because <textarea>
returns a string as its value.
In many cases you will prefer cell values to be treated as number type. This allows to format
numbers nicely and sort them correctly.
To trigger the Numeric cell type, use the option type: 'numeric' in columns array
or
cells function.
Numeric cell type uses Numbro.js as the formatting library. Head over to their website to learn about the formatting syntax.
To use number formatting style valid for your language (i18n), load language definition to Numbro.js. See "Languages" section in Numbro.js docs for more info.
Car | Year | Price ($) | Price (€) |
|---|---|---|---|
| Mercedes A 160 | 2006 | $6,999.99 | 6.999,99 € |
| Citroen C4 Coupe | 2008 | $8,330.00 | 8.330,00 € |
| Audi A4 Avant | 2011 | $33,900.00 | 33.900,00 € |
| Opel Astra | 2004 | $7,000.00 | 7.000,00 € |
| BMW 320i Coupe | 2011 | $30,500.00 | 30.500,00 € |
var container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: getCarData(),
startRows: 7,
startCols: 4,
colHeaders: ['Car', 'Year', 'Price ($)', 'Price (€)'],
columnSorting: true,
columns: [
{
data: 'car'
// 1nd column is simple text, no special options here
},
{
data: 'year',
type: 'numeric'
},
{
data: 'price_usd',
type: 'numeric',
format: '$0,0.00',
language: 'en-US' // this is the default locale, set up for USD
},
{
data: 'price_eur',
type: 'numeric',
format: '0,0.00 $',
language: 'de-DE' // i18n: use this for EUR (German)
// more locales available on numeraljs.com
}
]
});