feat(formatter): Decimal Formatter (or use alias Number)

Author: Ghislain Beaulac

src/app/examples/grid-formatter.component.ts

@@ -28,7 +28,7 @@ export class GridFormatterComponent implements OnInit {
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 },
       { id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, minWidth: 90 },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { decimalPlaces: 2 }, sortable: true, type: FieldType.number, minWidth: 90 },
       { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 },
       { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 },
       { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
@@ -57,7 +57,7 @@ export class GridFormatterComponent implements OnInit {
         id: i,
         title: 'Task ' + i,
         phone: this.generatePhoneNumber(),
-        duration: Math.round(Math.random() * 100) + '',
+        duration: Math.random() * 100 + '',
         percentComplete: randomPercent,
         percentComplete2: randomPercent,
         percentCompleteNumber: randomPercent,

src/app/modules/angular-slickgrid/formatters/decimalFormatter.ts

@@ -0,0 +1,10 @@
+import { Column, Formatter } from './../models/index';
+import { decimalFormatted } from './../services/utilities';
+
+export const decimalFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
+  const params = columnDef.params || {};
+  const minDecimalPlaces = params.minDecimalPlaces || params.decimalPlaces || 2;
+  const maxDecimalPlaces = params.maxDecimalPlaces || 2;
+  return isNaN(+value) ? value : `${decimalFormatted(value, minDecimalPlaces, maxDecimalPlaces)}`;
+};
+

src/app/modules/angular-slickgrid/formatters/index.ts

@@ -12,6 +12,7 @@ import { dateTimeIsoAmPmFormatter } from './dateTimeIsoAmPmFormatter';
 import { dateTimeUsAmPmFormatter } from './dateTimeUsAmPmFormatter';
 import { dateTimeUsFormatter } from './dateTimeUsFormatter';
 import { dateUsFormatter } from './dateUsFormatter';
+import { decimalFormatter } from './decimalFormatter';
 import { deleteIconFormatter } from './deleteIconFormatter';
 import { dollarColoredBoldFormatter } from './dollarColoredBoldFormatter';
 import { dollarColoredFormatter } from './dollarColoredFormatter';
@@ -89,6 +90,13 @@ export const Formatters = {
   /** Displays a Font-Awesome delete icon (fa-trash) */
   deleteIcon: deleteIconFormatter,
 
+  /**
+   * Display the value as x decimals formatted, defaults to 2 decimals.
+   * You can pass "decimalPlaces" or "minDecimalPlaces" and/or "maxDecimalPlaces" to the generic "params" property, example:: `{ formatter: Formatters.decimal, params: { decimalPlaces: 3 }}`
+   * The property "decimalPlaces" is an alias of "minDecimalPlaces"
+   */
+  decimal: decimalFormatter,
+
   /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value */
   dollar: dollarFormatter,
 
@@ -125,6 +133,9 @@ export const Formatters = {
    */
   multiple: multipleFormatter,
 
+  /** alias of the decimal formatter */
+  number: decimalFormatter,
+
   /** Takes a cell value number (between 0.0-1.0) and displays a red (<50) or green (>=50) bar */
   percent: percentFormatter,