# Formatting

The format attribute allows to specify the formatting function, which will convert the cell value to the human readable text.

const rows = [
    { price: 123 }
];

const columns = [
    { field: 'price', format: v => v.toFixed(2) }  // 123.00
];

# Format option

Instead of directly assigning a formatting function, you can map it to a name and use across several instances or in JSON structure -

import { format } from '@activewidgets/options';

const options = [
    format('money', v => v.toFixed(2))
];

const columns = [
    { field: 'price', format: 'money' } 
];

# International number/date formats

The intl option allows number/date formatting according to the selected locale.

import { intl } from '@activewidgets/options';

const options = [
    intl('en-US')
];

const columns = [
    { field: 'price', format: { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }},
    { field: 'date', format: { year: 'numeric', month: 'short', day: 'numeric' }}
];

It can be combined with the format and type options -

import { intl, format, type } from "@activewidgets/options";

const options = [

    // enable intl. number/date formats
    intl('en-US'),

    // define named formats
    format('money', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2}),
    format('date', {year: 'numeric', month: 'short', day: 'numeric'}),

    // define column types
    type('money', {format: 'money', width: 100, align: 'right'}),
    type('date', {format: 'date', width: 150, align: 'right'})
];

const columns = [
    { field: 'price', type: 'money'},
    { field: 'date', type: 'date'}
];

The intl option uses standard browser built-in objects - Intl.NumberFormat and Intl.DateTimeFormat

← Styles →