Ag-Grid: Number Formatting eg:123456.78 to 123,457

Question

I have huge sets of numeric data. this needs to be rendered as comma separated value. For Ex. 123456.78 to be rendered as 123,457 using Ag-Grid. Kindl

Answer 1

You can do this by writing a "customcellRenderer", when you create a column definition provide a function to "cellRenderer " attribute and in renderer use number filter, something like this

var colDef = {
    name: 'Col Name',
    field' 'Col Field',
    cellRenderer: function(params) {
        var eCell = document.createElement('span');
        var number;
        if (!param.value || !isFinite(param.value)) {
            number = '';
        } else {
            number = $filter('number')(param.value, 0);
        }
        eCell.innerHTML = number;
        return eCell;
    }
}

Answer 2

As per the cell rendering flow documentation (here), you can use the colDef.valueFormatter, like this:

    var columnDefs = [
        {headerName: "Number", field: "number"},
        {headerName: "Formatted", field: "number", valueFormatter: currencyFormatter}
    ];
    
    function currencyFormatter(params) {
        return '£' + formatNumber(params.value);
    }
    
    function formatNumber(number) {
        // this puts commas into the number eg 1000 goes to 1,000,
        // i pulled this from stack overflow, i have no idea how it works
        return Math.floor(number).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
    }

You could also use a cellRenderer as other posts describe, but that's typically for more complex rendering, whereas the valueFormatter is specifically for this case. From the ag-grid documentation:

valueFormatter's are for text formatting. cellRenderer's are for when you want to include HTML markup and potentially functionality to the cell. So for example, if you want to put punctuation into a value, use a valueFormatter, if you want to put buttons or HTML links use a cellRenderer. It is possible to use a combination of both, in which case the result of the valueFormatter will be passed to the cellRenderer.

Answer 3

{
         headerName: 'Salary', field: 'sal'
        cellRenderer: this.CurrencyCellRenderer
       }

private CurrencyCellRenderer(params:any) {

    var usdFormate = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 4
    });
    return usdFormate.format(params.value);
}

Like these we can mention in Angular2 Typescript code.