Felt uses numbro.js to enable custom formatting of numeric attributes. Refer to the examples below to get started. For a more detailed overview of options, visit their documentation and code examples.
Number | Format | String |
---|---|---|
10000 | `{ |
"thousandSeparated": true,
"mantissa": 4
}| 10,000.0000 | | 10000.23 |
{
"thousandSeparated": true
}| 10,000.23 | | 10000.23 |
{
"thousandSeparated": true,
"forceSign": true
}| +10,000.23 | | -10000 |
{
"thousandSeparated": true,
"mantissa": 1
}| -10,000.0 | | 10000.1234 |
{
"mantissa": 3
}| 10000.123 | | 10000.1234 |
{
"optionalMantissa": true,
"mantissa": 5
}| 10000.12340 | | 1.23 |
{
"trimMantissa": true,
"mantissa": 4
}| 1.23 | | 1.234 |
{
"trimMantissa": true,
"mantissa": 4
}| 1.234 | | 1.2345 |
{
"trimMantissa": true,
"mantissa": 4
}| 1.2345 | | 1.23456 |
{
"trimMantissa": true,
"mantissa": 4
}| 1.2346 | | -10000 |
{
"thousandSeparated": true,
"negative": "parenthesis",
"mantissa": 4
}| (10,000.0000) | | -0.23 |
{
"mantissa": 2
}| -0.23 | | -0.23 |
{
"negative": "parenthesis",
"mantissa": 2
}| (0.23) | | 0.23 |
{
"mantissa": 5
}| 0.23000 | | 1230974 |
{
"average": true,
"mantissa": 1
}| 1.2m | | 1460 |
{
"spaceSeparated": true,
"average": true
}| 1 k | | -104000 |
{
"spaceSeparated": false,
"average": true
}| -104k | | 233434 |
{
"average": true,
"mantissa": 2,
}| 233.43k | | 233000 |
{
"average": true,
"mantissa": 2,
}| 233.00k | | 1 |
{
"output": "ordinal"
}| 1st | | 52 |
{
"output": "ordinal"
}| 52nd | | 23 |
{
"output": "ordinal"
}| 23rd | | 100 |
{
"output": "ordinal"
}` | 100th |
numbro provides an easy mechanism to round up any number with the key average
Number | Format | String |
---|---|---|
123 | `{ |
"average": true
}| 123 | | 1234 |
{
"average": true
}| 1k | | 12345 |
{
"average": true
}| 12k | | 123456 |
{
"average": true
}| 123k | | 1234567 |
{
"average": true
}| 1m | | 12345678 |
{
"average": true
}| 12m | | 123456789 |
{
"average": true
}| 123m | | 1b |
{
"average": true,
"lowPrecision": false
}` | 580m |
In addition to this, when numbers are rounded up, one can specify the precision wanted with the key totalLength
.
Number | Format | String |
---|---|---|
1234567891 | `{ |
"average": true
}| 1b | | 1234567891 |
{
"average": true,
"totalLength": 1
}| 1b | | 1234567891 |
{
"average": true,
"totalLength": 2
}| 1.2b | | 1234567891 |
{
"average": true,
"totalLength": 3
}| 1.23b | | 1234567891 |
{
"average": true,
"totalLength": 4
}| 1.235b | | 1234567891 |
{
"average": true,
"totalLength": 5
}| 1.2346b | | 1234567891 |
{
"average": true,
"totalLength": 6
}| 1.23457b | | 1234567891 |
{
"average": true,
"totalLength": 7
}| 1.234568b | | 1234567891 |
{
"average": true,
"totalLength": 8
}| 1.2345679b | | 1234567891 |
{
"average": true,
"totalLength": 9
}| 1.23456789b | | 1234567891 |
{
"average": true,
"totalLength": 10
}` | 1.234567891b |
Number | Format | String |
---|---|---|
1 | `{ |
"output": "percent"
}| 100% | | 0.974878234 |
{
"output": "percent",
"mantissa": 4
}| 97.4878% | | -0.43 |
{
"output": "percent",
"spaceSeparated": true
}| -43 % | | 0.43 |
{
"output": "percent",
"mantissa": 3,
"negative": "parenthesis",
"spaceSeparated": true
}` | 43.000 % |
Number | Format | String |
---|---|---|
25 | `{ |
"output": "time"
}| 0:00:25 | | 238 |
{
"output": "time"
}| 0:03:58 | | 63846 |
{
"output": "time"
}` | 17:44:06 |
Number | Format | String |
---|---|---|
100 | `{ |
"output": "byte",
"base": "binary"
}| 100B | | 2048 |
{
"output": "byte",
"base": "binary",
"spaceSeparated": true
}| 2 KiB | | 7884486213 |
{
"output": "byte",
"base": "binary",
"mantissa": 1
}| 7.3GiB | | 3467479682787 |
{
"output": "byte",
"base": "binary",
"mantissa": 3,
"spaceSeparated": true
}` | 3.154 TiB |