{"id":86,"date":"2024-07-23T14:02:19","date_gmt":"2024-07-23T05:02:19","guid":{"rendered":"http:\/\/www.viw.co.kr\/ep\/?p=86"},"modified":"2024-07-23T14:02:19","modified_gmt":"2024-07-23T05:02:19","slug":"react-ag-grid-number-formatting-eg123456-78985-to-123456-78985","status":"publish","type":"post","link":"http:\/\/www.viw.co.kr\/ep\/react-ag-grid-number-formatting-eg123456-78985-to-123456-78985\/","title":{"rendered":"React Ag-Grid: Number Formatting eg:123456.78985 to 123,456.78985"},"content":{"rendered":"\n

export function toNumberDecimalFormatter({ value }: ValueFormatterParams) {<\/p>\n\n\n\n

  var formatted = Math.floor(value).toFixed(0).replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, “,”) +((value%1) == 0? “”:(Math.round((value%1) * 1000000)\/1000000).toString().replace(\/^0+\/, “”));<\/p>\n\n\n\n

  return `${formatted}`;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

\u00a0 \u00a0 \u00a0 field: ‘qty’,<\/p>\n\n\n\n

\u00a0 \u00a0 \u00a0 headerName:’QTY’), \u00a0 \u00a0 \u00a0<\/p>\n\n\n\n

      options: {        <\/p>\n\n\n\n

        formatter: ‘number’,        <\/p>\n\n\n\n

        type: ‘rightAligned’,<\/p>\n\n\n\n

        editable: true,        <\/p>\n\n\n\n

        valueFormatter: toNumberDecimalFormatter,<\/p>\n\n\n\n

        initialWidth: 90,<\/p>\n\n\n\n

      }, \/\/RITM0788635 initialWidth add  <\/p>\n\n\n\n

    },<\/p>\n\n\n\n

<\/p>\n\n\n\n

123456.78<\/code>\u00a0to be rendered as\u00a0123,457<\/code><\/p>\n\n\n\n

    var columnDefs = [\n        {headerName: \"Number\", field: \"number\"},\n        {headerName: \"Formatted\", field: \"number\", valueFormatter: currencyFormatter}\n    ];\n    \n    function currencyFormatter(params) {\n        return '\u00a3' + formatNumber(params.value);\n    }\n    \n    function formatNumber(number) {\n        \/\/ this puts commas into the number eg 1000 goes to 1,000,\n        \/\/ i pulled this from stack overflow, i have no idea how it works\n        return Math.floor(number).toString().replace(\/(\\d)(?=(\\d{3})+(?!\\d))\/g, \"$1,\");\n    }<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
export function toNumberDecimalFormatter({ value }: ValueFormatterParams) {   var formatted = Math.floor(value).toFixed(0).replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, “,”) +((value%1) == 0? “”:(Math.round((value%1) * 1000000)\/1000000).toString().replace(\/^0+\/, “”));   return `${formatted}`; }     { \u00a0 \u00a0 \u00a0 field: ‘qty’, \u00a0 \u00a0 \u00a0…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-react","no-post-thumbnail"],"_links":{"self":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":1,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":87,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/posts\/86\/revisions\/87"}],"wp:attachment":[{"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.viw.co.kr\/ep\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}