From 482d0f5d2c9d6ae561d36081917beaf420971726 Mon Sep 17 00:00:00 2001
From: Ghislain Beaulac <SESA213338@se.com>
Date: Fri, 27 Nov 2020 12:50:14 -0500
Subject: [PATCH] fix(formatters): date formatters should accept ISO input &
 output to US - also make all Formatter arguments never undefined

---
 .../__tests__/alignRightFormatter.spec.ts     | 12 +++---
 .../arrayObjectToCsvFormatter.spec.ts         | 20 ++++-----
 .../__tests__/arrayToCsvFormatter.spec.ts     |  8 ++--
 .../__tests__/boldFormatter.spec.ts           |  4 +-
 .../__tests__/bsDropdownFormatter.spec.ts     |  6 +--
 .../__tests__/centerFormatter.spec.ts         | 12 +++---
 .../__tests__/checkboxFormatter.spec.ts       |  8 ++--
 .../__tests__/checkmarkFormatter.spec.ts      | 38 ++++++++---------
 .../collectionEditorFormatter.spec.ts         | 16 +++----
 .../__tests__/collectionFormatter.spec.ts     | 14 +++----
 .../__tests__/complexObjectFormatter.spec.ts  | 18 ++++----
 .../__tests__/dateEuroFormatter.spec.ts       | 14 +++++--
 .../__tests__/dateIsoFormatter.spec.ts        | 21 ++++++----
 .../dateTimeEuroAmPmFormatter.spec.ts         | 14 +++++--
 .../__tests__/dateTimeEuroFormatter.spec.ts   | 14 +++++--
 .../dateTimeIsoAmPmFormatter.spec.ts          | 14 +++++--
 .../__tests__/dateTimeIsoFormatter.spec.ts    | 14 +++++--
 .../dateTimeShortEuroFormatter.spec.ts        | 14 +++++--
 .../dateTimeShortIsoFormatter.spec.ts         | 14 +++++--
 .../dateTimeShortUsFormatter.spec.ts          | 14 +++++--
 .../__tests__/dateTimeUsAmPmFormatter.spec.ts | 14 +++++--
 .../__tests__/dateTimeUsFormatter.spec.ts     | 14 +++++--
 .../__tests__/dateUsFormatter.spec.ts         | 16 ++++---
 .../__tests__/decimalFormatter.spec.ts        | 30 ++++++-------
 .../__tests__/deleteIconFormatter.spec.ts     |  4 +-
 .../dollarColoredBoldFormatter.spec.ts        | 22 +++++-----
 .../__tests__/dollarColoredFormatter.spec.ts  | 22 +++++-----
 .../__tests__/dollarFormatter.spec.ts         | 22 +++++-----
 .../__tests__/editIconFormatter.spec.ts       |  4 +-
 .../__tests__/hyperlinkFormatter.spec.ts      | 38 ++++++++---------
 .../__tests__/iconFormatter.spec.ts           |  4 +-
 .../__tests__/infoIconFormatter.spec.ts       |  4 +-
 .../__tests__/italicFormatter.spec.ts         |  4 +-
 .../__tests__/lowercaseFormatter.spec.ts      |  8 ++--
 .../__tests__/maskFormatter.spec.ts           | 14 +++----
 .../__tests__/multipleFormatter.spec.ts       |  4 +-
 .../percentCompleteBarFormatter.spec.ts       | 16 +++----
 .../percentCompleteFormatter.spec.ts          | 18 ++++----
 .../__tests__/percentFormatter.spec.ts        | 18 ++++----
 .../__tests__/percentSymbolFormatter.spec.ts  | 22 +++++-----
 .../__tests__/progressBarFormatter.spec.ts    | 16 +++----
 .../translateBooleanFormatter.spec.ts         |  2 +-
 .../__tests__/translateFormatter.spec.ts      |  2 +-
 .../__tests__/uppercaseFormatter.spec.ts      |  8 ++--
 .../__tests__/yesNoFormatter.spec.ts          |  6 +--
 .../formatters/collectionEditorFormatter.ts   |  8 ++--
 .../formatters/collectionFormatter.ts         |  5 ++-
 .../formatters/formatterUtilities.ts          |  6 ++-
 .../avgTotalsDollarFormatters.spec.ts         | 18 ++++----
 .../__tests__/avgTotalsFormatter.spec.ts      | 38 ++++++++---------
 .../avgTotalsPercentageFormatter.spec.ts      | 38 ++++++++---------
 .../__tests__/maxTotalsFormatter.spec.ts      | 42 +++++++++----------
 .../__tests__/minTotalsFormatter.spec.ts      | 42 +++++++++----------
 .../__tests__/sumTotalsBoldFormatter.spec.ts  | 42 +++++++++----------
 .../sumTotalsColoredFormatter.spec.ts         | 42 +++++++++----------
 .../sumTotalsDollarBoldFormatter.spec.ts      | 42 +++++++++----------
 ...umTotalsDollarColoredBoldFormatter.spec.ts | 42 +++++++++----------
 .../sumTotalsDollarColoredFormatter.spec.ts   | 42 +++++++++----------
 .../sumTotalsDollarFormatter.spec.ts          | 42 +++++++++----------
 .../__tests__/sumTotalsFormatter.spec.ts      | 40 +++++++++---------
 .../models/formatter.interface.ts             |  2 +-
 61 files changed, 595 insertions(+), 517 deletions(-)

diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts
index b057a69a9..b2a492e71 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts
@@ -3,30 +3,30 @@ import { alignRightFormatter } from '../alignRightFormatter';
 
 describe('Right Alignment Formatter', () => {
   it('should return an empty string when no value is passed', () => {
-    const output = alignRightFormatter(1, 1, '', {} as Column, {});
+    const output = alignRightFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('<div style="float: right"></div>');
   });
 
   it('should return an empty string when value is null or undefined', () => {
-    const output1 = alignRightFormatter(1, 1, null, {} as Column, {});
-    const output2 = alignRightFormatter(1, 1, undefined, {} as Column, {});
+    const output1 = alignRightFormatter(1, 1, null, {} as Column, {}, {});
+    const output2 = alignRightFormatter(1, 1, undefined, {} as Column, {}, {});
 
     expect(output1).toBe('<div style="float: right"></div>');
     expect(output2).toBe('<div style="float: right"></div>');
   });
 
   it('should return a string all in uppercase', () => {
-    const output = alignRightFormatter(1, 1, 'hello', {} as Column, {});
+    const output = alignRightFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('<div style="float: right">hello</div>');
   });
 
   it('should return a number as a string', () => {
-    const output = alignRightFormatter(1, 1, 99, {} as Column, {});
+    const output = alignRightFormatter(1, 1, 99, {} as Column, {}, {});
     expect(output).toBe('<div style="float: right">99</div>');
   });
 
   it('should return a boolean as a string all in uppercase', () => {
-    const output = alignRightFormatter(1, 1, false, {} as Column, {});
+    const output = alignRightFormatter(1, 1, false, {} as Column, {}, {});
     expect(output).toBe('<div style="float: right">false</div>');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/arrayObjectToCsvFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/arrayObjectToCsvFormatter.spec.ts
index 8eb11ea68..a43309b86 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/arrayObjectToCsvFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/arrayObjectToCsvFormatter.spec.ts
@@ -11,41 +11,41 @@ describe('the ArrayObjectToCsv Formatter', () => {
   ];
 
   it('should throw an error when omitting to pass "propertyNames" to "params"', () => {
-    expect(() => arrayObjectToCsvFormatter(0, 0, 'anything', {} as Column, {}))
+    expect(() => arrayObjectToCsvFormatter(0, 0, 'anything', {} as Column, {}, {}))
       .toThrowError('Formatters.arrayObjectToCsv requires you to pass an array of "propertyNames"');
   });
 
   it('should return original input value when the "propertyNames" is not found in the given object', () => {
     const params = { propertyNames: ['name'] };
-    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, {});
+    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, {}, {});
     expect(result).toBe('anything');
   });
 
   it('should return original input value when the "propertyNames" is found to be holding an empty array', () => {
     const params = { propertyNames: ['name'] };
-    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, dataset[2]);
+    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, dataset[2], {});
     expect(result).toBe('anything');
   });
 
   it('should return csv string in a span (with it\'s content and title attribute to be the same) when multiple input values are passed', () => {
     const params = { propertyNames: ['name'] };
     const expectedOutput = 'Administrator, Regular User';
-    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, dataset[0]);
+    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, dataset[0], {});
     expect(result).toBe(`<span title="${expectedOutput}">${expectedOutput}</span>`);
   });
 
   it('should return regular string in a span (with it\'s content and title attribute to be the same) when 1 input value is passed', () => {
     const params = { propertyNames: ['name'] };
     const expectedOutput = 'Regular User';
-    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, dataset[1]);
+    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'roles', params } as Column, dataset[1], {});
     expect(result).toBe(`<span title="${expectedOutput}">${expectedOutput}</span>`);
   });
 
   it(`should return csv string in a span when multiple input values are passed
     and user provide a different "dataContextProperty" to pull the data from a different field of the dataContext object`, () => {
-      const params = { dataContextProperty: 'roles', propertyNames: ['name'] };
-      const expectedOutput = 'Administrator, Regular User';
-      const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'email', params } as Column, dataset[0]);
-      expect(result).toBe(`<span title="${expectedOutput}">${expectedOutput}</span>`);
-    });
+    const params = { dataContextProperty: 'roles', propertyNames: ['name'] };
+    const expectedOutput = 'Administrator, Regular User';
+    const result = arrayObjectToCsvFormatter(0, 0, 'anything', { field: 'email', params } as Column, dataset[0], {});
+    expect(result).toBe(`<span title="${expectedOutput}">${expectedOutput}</span>`);
+  });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/arrayToCsvFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/arrayToCsvFormatter.spec.ts
index 88ed64dc4..445cf0d7a 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/arrayToCsvFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/arrayToCsvFormatter.spec.ts
@@ -4,25 +4,25 @@ import { arrayToCsvFormatter } from '../arrayToCsvFormatter';
 describe('the ArrayToCsv Formatter', () => {
   it('should return same output when no value is passed', () => {
     const valueArray = null;
-    const result = arrayToCsvFormatter(0, 0, valueArray, {} as Column, {});
+    const result = arrayToCsvFormatter(0, 0, valueArray, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return an empty array when value passed is an empty array', () => {
     const valueArray = [];
-    const result = arrayToCsvFormatter(0, 0, valueArray, {} as Column, {});
+    const result = arrayToCsvFormatter(0, 0, valueArray, {} as Column, {}, {});
     expect(result).toEqual([]);
   });
 
   it('should return original value when input is not an array', () => {
     const inputValue = 'anything';
-    const result = arrayToCsvFormatter(0, 0, inputValue, {} as Column, {});
+    const result = arrayToCsvFormatter(0, 0, inputValue, {} as Column, {}, {});
     expect(result).toBe(inputValue);
   });
 
   it('should return a CSV string when value passed is an array of string', () => {
     const valueArray = ['john', 'doe'];
-    const result = arrayToCsvFormatter(0, 0, valueArray, {} as Column, {});
+    const result = arrayToCsvFormatter(0, 0, valueArray, {} as Column, {}, {});
     expect(result).toBe(`<span title="${valueArray.join(', ')}">${valueArray.join(', ')}</span>`);
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/boldFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/boldFormatter.spec.ts
index 87e9247d3..56af747cd 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/boldFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/boldFormatter.spec.ts
@@ -4,13 +4,13 @@ import { boldFormatter } from '../boldFormatter';
 describe('the Bold Formatter', () => {
   it('should return an empty string when no value is passed', () => {
     const value = null;
-    const result = boldFormatter(0, 0, value, {} as Column, {});
+    const result = boldFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return a bold html formatted string when value is filled', () => {
     const value = 'john';
-    const result = boldFormatter(0, 0, value, {} as Column, {});
+    const result = boldFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(`<b>${value}</b>`);
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/bsDropdownFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/bsDropdownFormatter.spec.ts
index 3a2b6fc08..3efffda09 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/bsDropdownFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/bsDropdownFormatter.spec.ts
@@ -3,7 +3,7 @@ import { bsDropdownFormatter } from '../bsDropdownFormatter';
 
 describe('the Bootstrap dropdown Formatter', () => {
   it('should throw an error when omitting to pass "propertyNames" to "params"', () => {
-    expect(() => bsDropdownFormatter(0, 0, 'anything', {} as Column, {}))
+    expect(() => bsDropdownFormatter(0, 0, 'anything', {} as Column, {}, {}))
       .toThrowError('You must provide the "label" or "formatterLabel" via the generic "params"');
   });
 
@@ -12,7 +12,7 @@ describe('the Bootstrap dropdown Formatter', () => {
     const label = 'Action';
     const row = 0;
     const cell = 0;
-    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {});
+    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {}, {});
 
     expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown pointer">
     <a class="dropdown-toggle">
@@ -28,7 +28,7 @@ describe('the Bootstrap dropdown Formatter', () => {
     const label = 'Action';
     const row = 0;
     const cell = 0;
-    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {});
+    const result = bsDropdownFormatter(row, cell, input, { field: 'user', params: { label } } as Column, {}, {});
 
     expect(result).toBe(`<div id="myDrop-r${row}-c${cell}" class="dropdown pointer">
     <a class="dropdown-toggle">
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts
index aca11c7ef..96fd2a446 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts
@@ -3,13 +3,13 @@ import { centerFormatter } from '../centerFormatter';
 
 describe('Center Alignment Formatter', () => {
   it('should return an empty string when no value is passed', () => {
-    const output = centerFormatter(1, 1, '', {} as Column, {});
+    const output = centerFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('<center></center>');
   });
 
   it('should return an empty string when value is null or undefined', () => {
-    const output1 = centerFormatter(1, 1, null, {} as Column, {});
-    const output2 = centerFormatter(1, 1, undefined, {} as Column, {});
+    const output1 = centerFormatter(1, 1, null, {} as Column, {}, {});
+    const output2 = centerFormatter(1, 1, undefined, {} as Column, {}, {});
 
     expect(output1).toBe('<center></center>');
     expect(output2).toBe('<center></center>');
@@ -17,17 +17,17 @@ describe('Center Alignment Formatter', () => {
 
 
   it('should return a string all in uppercase', () => {
-    const output = centerFormatter(1, 1, 'hello', {} as Column, {});
+    const output = centerFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('<center>hello</center>');
   });
 
   it('should return a number as a string', () => {
-    const output = centerFormatter(1, 1, 99, {} as Column, {});
+    const output = centerFormatter(1, 1, 99, {} as Column, {}, {});
     expect(output).toBe('<center>99</center>');
   });
 
   it('should return a boolean as a string all in uppercase', () => {
-    const output = centerFormatter(1, 1, false, {} as Column, {});
+    const output = centerFormatter(1, 1, false, {} as Column, {}, {});
     expect(output).toBe('<center>false</center>');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/checkboxFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/checkboxFormatter.spec.ts
index bce780a3c..7966f703c 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/checkboxFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/checkboxFormatter.spec.ts
@@ -4,25 +4,25 @@ import { checkboxFormatter } from '../checkboxFormatter';
 describe('the Checkbox Formatter', () => {
   it('should return an empty string when no value is passed', () => {
     const value = null;
-    const result = checkboxFormatter(0, 0, value, {} as Column, {});
+    const result = checkboxFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return an empty string when False is provided', () => {
     const value = false;
-    const result = checkboxFormatter(0, 0, value, {} as Column, {});
+    const result = checkboxFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return the unicode value of a checkbox when input is True', () => {
     const value = true;
-    const result = checkboxFormatter(0, 0, value, {} as Column, {});
+    const result = checkboxFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('&#x2611;');
   });
 
   it('should return the unicode value of a checkbox when input is filled with any string', () => {
     const value = 'anything';
-    const result = checkboxFormatter(0, 0, value, {} as Column, {});
+    const result = checkboxFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('&#x2611;');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/checkmarkFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/checkmarkFormatter.spec.ts
index 37daa19da..2da175602 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/checkmarkFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/checkmarkFormatter.spec.ts
@@ -4,67 +4,67 @@ import { checkmarkFormatter } from '../checkmarkFormatter';
 describe('the Checkmark Formatter', () => {
   it('should return an empty string when no value is passed', () => {
     const value = null;
-    const result = checkmarkFormatter(0, 0, value, {} as Column, {});
+    const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return an empty string when False is provided', () => {
     const value = false;
-    const result = checkmarkFormatter(0, 0, value, {} as Column, {});
+    const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return an empty string when the string "FALSE" (case insensitive) is provided', () => {
     const value = 'FALSE';
-    const result1 = checkmarkFormatter(0, 0, value.toLowerCase(), {} as Column, {});
-    const result2 = checkmarkFormatter(0, 0, value.toUpperCase(), {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value.toLowerCase(), {} as Column, {}, {});
+    const result2 = checkmarkFormatter(0, 0, value.toUpperCase(), {} as Column, {}, {});
     expect(result1).toBe('');
     expect(result2).toBe('');
   });
 
   it('should return the Font Awesome Checkmark icon when the string "True" (case insensitive) is provided', () => {
     const value = 'True';
-    const result1 = checkmarkFormatter(0, 0, value.toLowerCase(), {} as Column, {});
-    const result2 = checkmarkFormatter(0, 0, value.toUpperCase(), {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value.toLowerCase(), {} as Column, {}, {});
+    const result2 = checkmarkFormatter(0, 0, value.toUpperCase(), {} as Column, {}, {});
     expect(result1).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
     expect(result2).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
   });
 
   it('should return the Font Awesome Checkmark icon when input is True', () => {
     const value = true;
-    const result = checkmarkFormatter(0, 0, value, {} as Column, {});
+    const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
   });
 
   it('should return the Font Awesome Checkmark icon when input is a string even if it start with 0', () => {
     const value = '005A00ABC';
-    const result1 = checkmarkFormatter(0, 0, value, {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {});
     expect(result1).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
   });
 
   it('should return an empty string when the string "0" is provided', () => {
     const value = '0';
-    const result = checkmarkFormatter(0, 0, value, {} as Column, {});
+    const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return the Font Awesome Checkmark icon when input is a number greater than 0', () => {
     const value = 0.000001;
-    const result1 = checkmarkFormatter(0, 0, value, {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {});
     expect(result1).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
   });
 
   it('should return the Font Awesome Checkmark icon when input is a number as a text greater than 0', () => {
     const value = '0.000001';
-    const result1 = checkmarkFormatter(0, 0, value, {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {});
     expect(result1).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
   });
 
   it('should return an empty string when input is a number lower or equal to 0', () => {
     const value1 = 0;
     const value2 = -0.5;
-    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {});
-    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {});
+    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {});
     expect(result1).toBe('');
     expect(result2).toBe('');
   });
@@ -72,8 +72,8 @@ describe('the Checkmark Formatter', () => {
   it('should return an empty string when input is a number as a text and lower or equal to 0', () => {
     const value1 = '0';
     const value2 = '-0.5';
-    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {});
-    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {});
+    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {});
     expect(result1).toBe('');
     expect(result2).toBe('');
   });
@@ -81,8 +81,8 @@ describe('the Checkmark Formatter', () => {
   it('should return an empty string when input is type null or undefined', () => {
     const value1 = null;
     const value2 = undefined;
-    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {});
-    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {});
+    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {});
     expect(result1).toBe('');
     expect(result2).toBe('');
   });
@@ -90,8 +90,8 @@ describe('the Checkmark Formatter', () => {
   it('should return the Font Awesome Checkmark icon when input is the "null" or "undefined"', () => {
     const value1 = 'null';
     const value2 = 'undefined';
-    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {});
-    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {});
+    const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {});
+    const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {});
     expect(result1).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
     expect(result2).toBe('<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>');
   });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/collectionEditorFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/collectionEditorFormatter.spec.ts
index 917c1c6b9..646e3ea04 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/collectionEditorFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/collectionEditorFormatter.spec.ts
@@ -17,25 +17,25 @@ describe('the CollectionEditor Formatter', () => {
 
   it('should return same output when no value is passed', () => {
     const valueArray = null;
-    const result = collectionEditorFormatter(0, 0, valueArray, {} as Column, {});
+    const result = collectionEditorFormatter(0, 0, valueArray, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return an empty array when value passed is an empty array', () => {
     const valueArray = [];
-    const result = collectionEditorFormatter(0, 0, valueArray, {} as Column, {});
+    const result = collectionEditorFormatter(0, 0, valueArray, {} as Column, {}, {});
     expect(result).toEqual([]);
   });
 
   it('should return original value when input is not an array', () => {
     const inputValue = 'anything';
-    const result = collectionEditorFormatter(0, 0, inputValue, {} as Column, {});
+    const result = collectionEditorFormatter(0, 0, inputValue, {} as Column, {}, {});
     expect(result).toBe(inputValue);
   });
 
   it('should return a CSV string when provided collection is an array of objects', () => {
     const valueArray = [1, 2];
-    const result = collectionEditorFormatter(0, 0, valueArray, columnDef, {});
+    const result = collectionEditorFormatter(0, 0, valueArray, columnDef, {}, {});
     const outputCsv = 'foo, bar';
     expect(result).toBe(`<span title="${outputCsv}">${outputCsv}</span>`);
   });
@@ -44,7 +44,7 @@ describe('the CollectionEditor Formatter', () => {
     const valueArray = ['foo', 'bar'];
     columnDef.editor.collection = ['foo', 'bar', 'apple'];
 
-    const result = collectionEditorFormatter(0, 0, valueArray, columnDef, {});
+    const result = collectionEditorFormatter(0, 0, valueArray, columnDef, {}, {});
 
     const outputCsv = 'foo, bar';
     expect(result).toBe(`<span title="${outputCsv}">${outputCsv}</span>`);
@@ -55,7 +55,7 @@ describe('the CollectionEditor Formatter', () => {
     columnDef.editor.collection = [{ id: 1, name: 'John' }, { id: 2, name: 'Bob' }];
     columnDef.editor.customStructure = { label: 'name', value: 'id' };
 
-    const result = collectionEditorFormatter(0, 0, valueArray, columnDef, {});
+    const result = collectionEditorFormatter(0, 0, valueArray, columnDef, {}, {});
 
     const outputCsv = 'John, Bob';
     expect(result).toBe(`<span title="${outputCsv}">${outputCsv}</span>`);
@@ -63,13 +63,13 @@ describe('the CollectionEditor Formatter', () => {
 
   it('should return a string when provided input value is an object', () => {
     const inputValue = 2;
-    const result = collectionEditorFormatter(0, 0, inputValue, columnDef, {});
+    const result = collectionEditorFormatter(0, 0, inputValue, columnDef, {}, {});
     expect(result).toBe('bar');
   });
 
   it('should return an empty string when provided input value is an object that is not part of the collection', () => {
     const inputValue = 4;
-    const result = collectionEditorFormatter(0, 0, inputValue, columnDef, {});
+    const result = collectionEditorFormatter(0, 0, inputValue, columnDef, {}, {});
     expect(result).toBe('');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/collectionFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/collectionFormatter.spec.ts
index b4b4cabd2..9e0edebdc 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/collectionFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/collectionFormatter.spec.ts
@@ -4,26 +4,26 @@ import { collectionFormatter } from '../collectionFormatter';
 describe('the Collection Formatter', () => {
   it('should return same output when no value is passed', () => {
     const valueArray = null;
-    const result = collectionFormatter(0, 0, valueArray, {} as Column, {});
+    const result = collectionFormatter(0, 0, valueArray, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return an empty array when value passed is an empty array', () => {
     const valueArray = [];
-    const result = collectionFormatter(0, 0, valueArray, {} as Column, {});
+    const result = collectionFormatter(0, 0, valueArray, {} as Column, {}, {});
     expect(result).toEqual([]);
   });
 
   it('should return original value when input is not an array', () => {
     const inputValue = 'anything';
-    const result = collectionFormatter(0, 0, inputValue, {} as Column, {});
+    const result = collectionFormatter(0, 0, inputValue, {} as Column, {}, {});
     expect(result).toBe(inputValue);
   });
 
   it('should return a CSV string when value passed is an array of objects', () => {
     const valueArray = [1, 2];
     const columnDef = { params: { collection: [{ value: 1, label: 'foo' }, { value: 2, label: 'bar' }] } } as Column;
-    const result = collectionFormatter(0, 0, valueArray, columnDef, {});
+    const result = collectionFormatter(0, 0, valueArray, columnDef, {}, {});
     const outputCsv = 'foo, bar';
     expect(result).toBe(`<span title="${outputCsv}">${outputCsv}</span>`);
   });
@@ -36,7 +36,7 @@ describe('the Collection Formatter', () => {
         customStructure: { label: 'name', value: 'id' }
       }
     } as Column;
-    const result = collectionFormatter(0, 0, valueArray, columnDef, {});
+    const result = collectionFormatter(0, 0, valueArray, columnDef, {}, {});
     const outputCsv = 'John, Bob';
     expect(result).toBe(`<span title="${outputCsv}">${outputCsv}</span>`);
   });
@@ -44,14 +44,14 @@ describe('the Collection Formatter', () => {
   it('should return a string when value passed is an object', () => {
     const inputValue = 2;
     const columnDef = { params: { collection: [{ value: 1, label: 'foo' }, { value: 2, label: 'bar' }] } } as Column;
-    const result = collectionFormatter(0, 0, inputValue, columnDef, {});
+    const result = collectionFormatter(0, 0, inputValue, columnDef, {}, {});
     expect(result).toBe('bar');
   });
 
   it('should return an empty string when value passed is an object that is not part of the collection', () => {
     const inputValue = 4;
     const columnDef = { params: { collection: [{ value: 1, label: 'foo' }, { value: 2, label: 'bar' }] } } as Column;
-    const result = collectionFormatter(0, 0, inputValue, columnDef, {});
+    const result = collectionFormatter(0, 0, inputValue, columnDef, {}, {});
     expect(result).toBe('');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/complexObjectFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/complexObjectFormatter.spec.ts
index fb74c3e78..79520f506 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/complexObjectFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/complexObjectFormatter.spec.ts
@@ -11,54 +11,54 @@ describe('the ComplexObject Formatter', () => {
   ];
 
   it('should throw an error when omitting to pass "complexFieldLabel" to "params"', () => {
-    expect(() => complexObjectFormatter(0, 0, 'anything', {} as Column, {}))
+    expect(() => complexObjectFormatter(0, 0, 'anything', {} as Column, {}, {}))
       .toThrowError('For the Formatters.complexObject to work properly');
   });
 
   it('should return empty string when no column definition is provided', () => {
-    const result = complexObjectFormatter(0, 0, 'anything', null as Column, {});
+    const result = complexObjectFormatter(0, 0, 'anything', null as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return original input value when the "field" property does not include a not ".", neither "complexFieldLabel"', () => {
-    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role' } as Column, {});
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role' } as Column, {}, {});
     expect(result).toBe('anything');
   });
 
   it('should return original input value when the "field" property was not found in the data context object', () => {
-    const result = complexObjectFormatter(0, 0, 'anything', { field: 'invalid.object' } as Column, dataset[2]);
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'invalid.object' } as Column, dataset[2], {});
     expect(result).toBe('anything');
   });
 
   it('should return original input value when the "complexFieldLabel" does not include a not "." within its string', () => {
     const params = { complexFieldLabel: 'name' };
-    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, {});
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, {}, {});
     expect(result).toBe('anything');
   });
 
   it('should return original input value when the "complexFieldLabel" was not found in the data context object', () => {
     const params = { complexFieldLabel: 'invalid.object' };
-    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, dataset[2]);
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, dataset[2], {});
     expect(result).toBe('anything');
   });
 
   it('should return the value from the complex object when "field" property with dot notation was found in the data context object', () => {
     const expectedOutput = 'Administrator';
-    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role.name' } as Column, dataset[0]);
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role.name' } as Column, dataset[0], {});
     expect(result).toBe(expectedOutput);
   });
 
   it('should return the value from the complex object when "complexFieldLabel" property with dot notation was found in the data context object', () => {
     const params = { complexFieldLabel: 'role.name' };
     const expectedOutput = 'Administrator';
-    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, dataset[0]);
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, dataset[0], {});
     expect(result).toBe(expectedOutput);
   });
 
   it('should return the value from the complex object when "complexFieldLabel" is not dot notation but has a "labelKey" was found in the data context object', () => {
     const params = { complexFieldLabel: 'role' };
     const expectedOutput = 'Administrator';
-    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', labelKey: 'name', params } as Column, dataset[0]);
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', labelKey: 'name', params } as Column, dataset[0], {});
     expect(result).toBe(expectedOutput);
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateEuroFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateEuroFormatter.spec.ts
index b6a36e208..fc03777e4 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateEuroFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateEuroFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateEuro Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 00:00:01';
+    const result = Formatters.dateEuro(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('03/05/2019');
+  });
+
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-03T00:00:01');
-    const result = Formatters.dateEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('03/05/2019');
   });
 
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('01/05/2019');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateIsoFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateIsoFormatter.spec.ts
index 3e6669138..915da1cb4 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateIsoFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateIsoFormatter.spec.ts
@@ -1,37 +1,44 @@
+import { GridOption } from 'dist/public_api';
 import { Column } from '../../models';
 import { Formatters } from '../index';
 
 describe('the Date ISO Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 00:00:01';
+    const result = Formatters.dateIso(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('2019-05-03');
+  });
+
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-03T00:00:01');
-    const result = Formatters.dateIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-03');
   });
 
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-01');
   });
 
   it('should return a formatted date value without time date provided has TZ but we specifically mention to parse as UTC ', () => {
     const value = new Date('2099-12-31T00:00:00.000Z');
 
-    const result1 = Formatters.dateIso(0, 0, value, { params: { parseDateAsUtc: true } } as Column, {});
-    const result2 = Formatters.dateIso(0, 0, value, { params: { parseDateAsUtc: false } } as Column, {});
-    const result3 = Formatters.dateIso(0, 0, value, {} as Column, {});
+    const result1 = Formatters.dateIso(0, 0, value, { params: { parseDateAsUtc: true } } as Column, {}, {});
+    const result2 = Formatters.dateIso(0, 0, value, { params: { parseDateAsUtc: false } } as Column, {}, {});
+    const result3 = Formatters.dateIso(0, 0, value, {} as Column, {}, {});
 
     expect(result1).toBe('2099-12-31');
     expect(result2).toBe('2099-12-30');
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroAmPmFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroAmPmFormatter.spec.ts
index 8f3d87ca9..7f5cb55a3 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroAmPmFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroAmPmFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeShortEuro Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeEuroAmPm(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('01/05/2019 02:36:07 am');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('01/05/2019 02:36:07 am');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('01/05/2019 08:36:07 pm');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroFormatter.spec.ts
index 4484a0408..7051a2cba 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeEuroFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeEuro Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeEuro(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('01/05/2019 02:36:07');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('01/05/2019 02:36:07');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('01/05/2019 20:36:07');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoAmPmFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoAmPmFormatter.spec.ts
index bc5ddec6f..992ec90d0 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoAmPmFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoAmPmFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeIsoAmPm Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeIsoAmPm(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('2019-05-01 02:36:07 am');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-01 02:36:07 am');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-01 08:36:07 pm');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoFormatter.spec.ts
index 56015afff..0a1965a25 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeIsoFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeIso Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeIso(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('2019-05-01 02:36:07');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-01 02:36:07');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-01 20:36:07');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortEuroFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortEuroFormatter.spec.ts
index bb8687380..be4ac0146 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortEuroFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortEuroFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeShortEuro Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeShortEuro(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('01/05/2019 02:36');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('01/05/2019 02:36');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('01/05/2019 20:36');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortIsoFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortIsoFormatter.spec.ts
index d42bcc725..decfd386c 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortIsoFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortIsoFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeShortIso Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeShortIso(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('2019-05-01 02:36');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-01 02:36');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('2019-05-01 20:36');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortUsFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortUsFormatter.spec.ts
index 93f308bf6..80e719167 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortUsFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeShortUsFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeShortUs Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 02:36:07';
+    const result = Formatters.dateTimeShortUs(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('05/03/2019 02:36');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/01/2019 02:36');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/01/2019 20:36');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsAmPmFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsAmPmFormatter.spec.ts
index bf63b2874..d8a222114 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsAmPmFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsAmPmFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeShortUs Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 02:36:07';
+    const result = Formatters.dateTimeUsAmPm(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('05/03/2019 02:36:07 am');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/01/2019 02:36:07 am');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/01/2019 08:36:07 pm');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsFormatter.spec.ts
index 7ca2571bf..4fdbf342e 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateTimeUsFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateTimeUs Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 02:36:07';
+    const result = Formatters.dateTimeUs(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('05/03/2019 02:36:07');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/01/2019 02:36:07');
   });
 
   it('should return a formatted date value in the afternoon when valid date value is provided', () => {
     const value = new Date('2019-05-01T20:36:07');
-    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/01/2019 20:36:07');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dateUsFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dateUsFormatter.spec.ts
index fdcad45d7..aac7c0be9 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dateUsFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dateUsFormatter.spec.ts
@@ -4,25 +4,31 @@ import { Formatters } from '../index';
 describe('the DateUs Formatter', () => {
   it('should return null when no value is provided', () => {
     const value = null;
-    const result = Formatters.dateUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return original string when input value provided is not a valid date', () => {
     const value = 'TBD';
-    const result = Formatters.dateUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03';
+    const result = Formatters.dateUs(0, 0, value, { input: 'dateIso' } as unknown as Column, {}, {});
+    expect(result).toBe('05/03/2019');
+  });
+
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-03T00:00:01');
-    const result = Formatters.dateUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/03/2019');
   });
 
-  it('should return a formatted date value without time when valid date value is provided', () => {
+  it('should return a second formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
-    const result = Formatters.dateUs(0, 0, value, {} as Column, {});
+    const result = Formatters.dateUs(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('05/01/2019');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/decimalFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/decimalFormatter.spec.ts
index 31c18948b..db2d5d901 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/decimalFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/decimalFormatter.spec.ts
@@ -13,52 +13,52 @@ describe('the Decimal Formatter', () => {
   };
 
   it('should display an empty string when no value is provided', () => {
-    const output = decimalFormatter(1, 1, '', {} as Column, {});
+    const output = decimalFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should display original string when non-numeric value is provided', () => {
-    const output = decimalFormatter(1, 1, 'hello', {} as Column, {});
+    const output = decimalFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should display $0 when number 0 is provided', () => {
     const input = 0;
-    const output = decimalFormatter(1, 1, input, {} as Column, {});
+    const output = decimalFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe('0.00');
   });
 
   it('should display a number with negative dollar sign when a negative number is provided', () => {
     const input = -15;
-    const output = decimalFormatter(1, 1, input, {} as Column, {});
+    const output = decimalFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe('-15.00');
   });
 
   it('should display a number with dollar sign when a number is provided', () => {
     const input = 99;
-    const output = decimalFormatter(1, 1, input, {} as Column, {});
+    const output = decimalFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe('99.00');
   });
 
   it('should display a number with dollar sign when a string number is provided', () => {
     const input = '99';
-    const output = decimalFormatter(1, 1, input, {} as Column, {});
+    const output = decimalFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe('99.00');
   });
 
   it('should display a number with dollar sign and use "minDecimal" params', () => {
     const input = 99.1;
-    const output = decimalFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {});
+    const output = decimalFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {}, {});
     expect(output).toBe('99.10');
   });
 
   it('should display a number with dollar sign and use "minDecimalPlaces" (or the deprecated "decimalPlaces") params', () => {
     const input = 12345678.1;
 
-    const output1 = decimalFormatter(1, 1, input, { params: { minDecimalPlaces: 2 } } as Column, {});
-    const output2 = decimalFormatter(1, 1, input, { params: { decimalPlaces: 2 } } as Column, {});
-    const output3 = decimalFormatter(1, 1, input, { params: { decimalPlaces: 2, thousandSeparator: ',' } } as Column, {});
-    const output4 = decimalFormatter(1, 1, input, { params: { decimalPlaces: 2, decimalSeparator: ',', thousandSeparator: ' ' } } as Column, {});
+    const output1 = decimalFormatter(1, 1, input, { params: { minDecimalPlaces: 2 } } as Column, {}, {});
+    const output2 = decimalFormatter(1, 1, input, { params: { decimalPlaces: 2 } } as Column, {}, {});
+    const output3 = decimalFormatter(1, 1, input, { params: { decimalPlaces: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output4 = decimalFormatter(1, 1, input, { params: { decimalPlaces: 2, decimalSeparator: ',', thousandSeparator: ' ' } } as Column, {}, {});
 
     expect(output1).toBe('12345678.10');
     expect(output2).toBe('12345678.10');
@@ -69,26 +69,26 @@ describe('the Decimal Formatter', () => {
 
   it('should display a number with dollar sign and use "maxDecimal" params', () => {
     const input = 88.156789;
-    const output = decimalFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {});
+    const output = decimalFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {}, {});
     expect(output).toBe(`88.157`);
   });
 
   it('should display a number with dollar sign and use "maxDecimalPlaces" params', () => {
     const input = 88.156789;
-    const output = decimalFormatter(1, 1, input, { params: { maxDecimalPlaces: 3 } } as Column, {});
+    const output = decimalFormatter(1, 1, input, { params: { maxDecimalPlaces: 3 } } as Column, {}, {});
     expect(output).toBe(`88.157`);
     expect(consoleSpy).toHaveBeenCalledWith('[Angular-Slickgrid] please consider using "maxDecimal" (instead of "maxDecimalPlaces").');
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -2.4;
-    const output = decimalFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output = decimalFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
     expect(output).toBe(`(2.40)`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled and thousand separator in the "params"', () => {
     const input = -12345678.4;
-    const output = decimalFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
+    const output = decimalFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`(12,345,678.40)`);
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/deleteIconFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/deleteIconFormatter.spec.ts
index f83d4b8e9..40411accb 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/deleteIconFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/deleteIconFormatter.spec.ts
@@ -4,13 +4,13 @@ import { deleteIconFormatter } from '../deleteIconFormatter';
 describe('the Delete Icon Formatter', () => {
   it('should always return the Font Awesome Trash icon even when False is provided', () => {
     const value = false;
-    const result = deleteIconFormatter(0, 0, value, {} as Column, {});
+    const result = deleteIconFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('<i class="fa fa-trash pointer delete-icon" aria-hidden="true"></i>');
   });
 
   it('should return the Font Awesome Trash icon when input is filled with any string', () => {
     const value = 'anything';
-    const result = deleteIconFormatter(0, 0, value, {} as Column, {});
+    const result = deleteIconFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('<i class="fa fa-trash pointer delete-icon" aria-hidden="true"></i>');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredBoldFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredBoldFormatter.spec.ts
index b472b1e2e..fd49bf26a 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredBoldFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredBoldFormatter.spec.ts
@@ -7,66 +7,66 @@ describe('the DollarColoredBold Formatter', () => {
   };
 
   it('should return an empty string when no value is provided', () => {
-    const output = dollarColoredBoldFormatter(1, 1, '', {} as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should display original string when non-numeric value is provided', () => {
-    const output = dollarColoredBoldFormatter(1, 1, 'hello', {} as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should display a green number with dollar symbol formatter when number 0 is provided', () => {
     const input = 0;
-    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:green; font-weight:bold;">$0.00</span>`);
   });
 
   it('should display a red number with dollar symbol when value is a negative number', () => {
     const input = -15;
-    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:red; font-weight:bold;">-$15.00</span>`);
   });
 
   it('should display a red number with dollar symbol and thousand separator when value is a negative number', () => {
     const input = -12345678;
-    const output = dollarColoredBoldFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`<span style="color:red; font-weight:bold;">-$12,345,678.00</span>`);
   });
 
   it('should display a green number with dollar symbol when value greater or equal to 70 and is a type string', () => {
     const input = '70';
-    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:green; font-weight:bold;">$70.00</span>`);
   });
 
   it('should display a green number with dollar symbol with percentage of 100% when number is greater than 100 is provided', () => {
     const input = 125;
-    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:green; font-weight:bold;">$125.00</span>`);
   });
 
   it('should display a number with dollar sign and use minimum decimal set', () => {
     const input = 99.1;
-    const output = dollarColoredBoldFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {}, {});
     expect(output).toBe(`<span style="color:green; font-weight:bold;">$99.10</span>`);
   });
 
   it('should display a number with dollar sign and use maximum decimal set', () => {
     const input = 88.156789;
-    const output = dollarColoredBoldFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {}, {});
     expect(output).toBe(`<span style="color:green; font-weight:bold;">$88.157</span>`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -2.4;
-    const output = dollarColoredBoldFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
     expect(output).toBe(`<span style="color:red; font-weight:bold;">($2.40)</span>`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled and thousand separator in the "params"', () => {
     const input = -12345678.4;
-    const output = dollarColoredBoldFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
+    const output = dollarColoredBoldFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`<span style="color:red; font-weight:bold;">($12,345,678.40)</span>`);
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredFormatter.spec.ts
index 8d9d1c316..6b54e0659 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dollarColoredFormatter.spec.ts
@@ -7,66 +7,66 @@ describe('the DollarColored Formatter', () => {
   };
 
   it('should return an empty string when no value is provided', () => {
-    const output = dollarColoredFormatter(1, 1, '', {} as Column, {});
+    const output = dollarColoredFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should display original string when non-numeric value is provided', () => {
-    const output = dollarColoredFormatter(1, 1, 'hello', {} as Column, {});
+    const output = dollarColoredFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should display a green number with dollar symbol formatter when number 0 is provided', () => {
     const input = 0;
-    const output = dollarColoredFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:green">$0.00</span>`);
   });
 
   it('should display a red number with dollar symbol when value is a negative number', () => {
     const input = -15;
-    const output = dollarColoredFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:red">-$15.00</span>`);
   });
 
   it('should display a red number with dollar symbol and thousand separator when value is a negative number', () => {
     const input = -12345678;
-    const output = dollarColoredFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`<span style="color:red">-$12,345,678.00</span>`);
   });
 
   it('should display a green number with dollar symbol when value greater or equal to 70 and is a type string', () => {
     const input = '70';
-    const output = dollarColoredFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:green">$70.00</span>`);
   });
 
   it('should display a green number with dollar symbol with percentage of 100% when number is greater than 100 is provided', () => {
     const input = 125;
-    const output = dollarColoredFormatter(1, 1, input, {} as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style="color:green">$125.00</span>`);
   });
 
   it('should display a number with dollar sign and use minimum decimal set', () => {
     const input = 99.1;
-    const output = dollarColoredFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {}, {});
     expect(output).toBe(`<span style="color:green">$99.10</span>`);
   });
 
   it('should display a number with dollar sign and use maximum decimal set', () => {
     const input = 88.156789;
-    const output = dollarColoredFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {}, {});
     expect(output).toBe(`<span style="color:green">$88.157</span>`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -2.4;
-    const output = dollarColoredFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
     expect(output).toBe(`<span style="color:red">($2.40)</span>`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled and thousand separator in the "params"', () => {
     const input = -12345678.4;
-    const output = dollarColoredFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
+    const output = dollarColoredFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`<span style="color:red">($12,345,678.40)</span>`);
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/dollarFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/dollarFormatter.spec.ts
index 1606f2a9f..d34c37eca 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/dollarFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/dollarFormatter.spec.ts
@@ -7,66 +7,66 @@ describe('the Dollar Formatter', () => {
   };
 
   it('should display an empty string when no value is provided', () => {
-    const output = dollarFormatter(1, 1, '', {} as Column, {});
+    const output = dollarFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should display original string when non-numeric value is provided', () => {
-    const output = dollarFormatter(1, 1, 'hello', {} as Column, {});
+    const output = dollarFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should display $0 when number 0 is provided', () => {
     const input = 0;
-    const output = dollarFormatter(1, 1, input, {} as Column, {});
+    const output = dollarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`$0.00`);
   });
 
   it('should display a number with negative dollar sign when a negative number is provided', () => {
     const input = -15;
-    const output = dollarFormatter(1, 1, input, {} as Column, {});
+    const output = dollarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`-$15.00`);
   });
 
   it('should display a number with negative dollar sign when a negative number and thousand separator is provided', () => {
     const input = -12345678;
-    const output = dollarFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {});
+    const output = dollarFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`-$12,345,678.00`);
   });
 
   it('should display a number with dollar sign when a number is provided', () => {
     const input = 99;
-    const output = dollarFormatter(1, 1, input, {} as Column, {});
+    const output = dollarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`$99.00`);
   });
 
   it('should display a number with dollar sign when a string number is provided', () => {
     const input = '99';
-    const output = dollarFormatter(1, 1, input, {} as Column, {});
+    const output = dollarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`$99.00`);
   });
 
   it('should display a number with dollar sign and use minimum decimal set', () => {
     const input = 99.1;
-    const output = dollarFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {});
+    const output = dollarFormatter(1, 1, input, { params: { minDecimal: 2 } } as Column, {}, {});
     expect(output).toBe(`$99.10`);
   });
 
   it('should display a number with dollar sign and use maximum decimal set', () => {
     const input = 88.156789;
-    const output = dollarFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {});
+    const output = dollarFormatter(1, 1, input, { params: { maxDecimal: 3 } } as Column, {}, {});
     expect(output).toBe(`$88.157`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -2.4;
-    const output = dollarFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output = dollarFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
     expect(output).toBe(`($2.40)`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled and thousand separator in the "params"', () => {
     const input = -12345678.4;
-    const output = dollarFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
+    const output = dollarFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`($12,345,678.40)`);
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/editIconFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/editIconFormatter.spec.ts
index 9b3b7b5cb..74883e9e1 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/editIconFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/editIconFormatter.spec.ts
@@ -4,13 +4,13 @@ import { editIconFormatter } from '../editIconFormatter';
 describe('the Edit Icon Formatter', () => {
   it('should always return the Font Awesome Pencil icon even when False is provided', () => {
     const value = false;
-    const result = editIconFormatter(0, 0, value, {} as Column, {});
+    const result = editIconFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('<i class="fa fa-pencil pointer edit-icon" aria-hidden="true"></i>');
   });
 
   it('should return the Font Awesome Pencil icon when input is filled with any string', () => {
     const value = 'anything';
-    const result = editIconFormatter(0, 0, value, {} as Column, {});
+    const result = editIconFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('<i class="fa fa-pencil pointer edit-icon" aria-hidden="true"></i>');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/hyperlinkFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/hyperlinkFormatter.spec.ts
index 60f91872f..43c705933 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/hyperlinkFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/hyperlinkFormatter.spec.ts
@@ -3,26 +3,26 @@ import { hyperlinkFormatter } from '../hyperlinkFormatter';
 
 describe('the Hyperlink Formatter', () => {
   it('should return empty string when value is not an hyperlink and is empty', () => {
-    const result = hyperlinkFormatter(0, 0, '', {} as Column, {});
+    const result = hyperlinkFormatter(0, 0, '', {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return original value when value is not an hyperlink', () => {
-    const result = hyperlinkFormatter(0, 0, 'anything', {} as Column, {});
+    const result = hyperlinkFormatter(0, 0, 'anything', {} as Column, {}, {});
     expect(result).toBe('anything');
   });
 
   it('should return original value when URL passed through the generic params "hyperlinkUrl" is not a valid hyperlink', () => {
     const hyperlinkUrl1 = '';
     const inputValue = 'Company Name';
-    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1 } } as Column, {});
+    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1 } } as Column, {}, {});
     expect(result1).toBe(inputValue);
   });
 
   it('should not permit sanitize/remove any bad script code', () => {
     const inputValue = 'http://<script>alert("test")</script>company.com';
     const sanitizedValue = 'http://company.com';
-    const result = hyperlinkFormatter(0, 0, inputValue, {} as Column, {});
+    const result = hyperlinkFormatter(0, 0, inputValue, {} as Column, {}, {});
     expect(result).toBe(`<a href="${sanitizedValue}">${sanitizedValue}</a>`);
   });
 
@@ -31,9 +31,9 @@ describe('the Hyperlink Formatter', () => {
     const inputValue2 = 'https//something.com';
     const inputValue3 = 'ftpp://something.com';
 
-    const result1 = hyperlinkFormatter(0, 0, inputValue1, {} as Column, {});
-    const result2 = hyperlinkFormatter(0, 0, inputValue2, {} as Column, {});
-    const result3 = hyperlinkFormatter(0, 0, inputValue3, {} as Column, {});
+    const result1 = hyperlinkFormatter(0, 0, inputValue1, {} as Column, {}, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue2, {} as Column, {}, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue3, {} as Column, {}, {});
 
     expect(result1).toBe(inputValue1);
     expect(result2).toBe(inputValue2);
@@ -45,9 +45,9 @@ describe('the Hyperlink Formatter', () => {
     const inputValue2 = 'https://something.com';
     const inputValue3 = 'ftp://something.com';
 
-    const result1 = hyperlinkFormatter(0, 0, inputValue1, {} as Column, {});
-    const result2 = hyperlinkFormatter(0, 0, inputValue2, {} as Column, {});
-    const result3 = hyperlinkFormatter(0, 0, inputValue3, {} as Column, {});
+    const result1 = hyperlinkFormatter(0, 0, inputValue1, {} as Column, {}, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue2, {} as Column, {}, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue3, {} as Column, {}, {});
 
 
     expect(result1).toBe(`<a href="${inputValue1}">${inputValue1}</a>`);
@@ -61,9 +61,9 @@ describe('the Hyperlink Formatter', () => {
     const inputValue3 = 'ftp://something.com';
     const linkText = 'Company Website';
 
-    const result1 = hyperlinkFormatter(0, 0, inputValue1, { params: { hyperlinkText: linkText } } as Column, {});
-    const result2 = hyperlinkFormatter(0, 0, inputValue2, { params: { hyperlinkText: linkText } } as Column, {});
-    const result3 = hyperlinkFormatter(0, 0, inputValue3, { params: { hyperlinkText: linkText } } as Column, {});
+    const result1 = hyperlinkFormatter(0, 0, inputValue1, { params: { hyperlinkText: linkText } } as Column, {}, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue2, { params: { hyperlinkText: linkText } } as Column, {}, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue3, { params: { hyperlinkText: linkText } } as Column, {}, {});
 
 
     expect(result1).toBe(`<a href="${inputValue1}">${linkText}</a>`);
@@ -77,9 +77,9 @@ describe('the Hyperlink Formatter', () => {
     const hyperlinkUrl3 = 'ftp://something.com';
     const inputValue = 'Company Name';
 
-    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1 } } as Column, {});
-    const result2 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl2 } } as Column, {});
-    const result3 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl3 } } as Column, {});
+    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1 } } as Column, {}, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl2 } } as Column, {}, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl3 } } as Column, {}, {});
 
 
     expect(result1).toBe(`<a href="${hyperlinkUrl1}">${inputValue}</a>`);
@@ -96,9 +96,9 @@ describe('the Hyperlink Formatter', () => {
     const linkText3 = 'Company XYZ';
     const inputValue = 'anything';
 
-    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1, hyperlinkText: linkText1 } } as Column, {});
-    const result2 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl2, hyperlinkText: linkText2 } } as Column, {});
-    const result3 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl3, hyperlinkText: linkText3 } } as Column, {}); 3
+    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1, hyperlinkText: linkText1 } } as Column, {}, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl2, hyperlinkText: linkText2 } } as Column, {}, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl3, hyperlinkText: linkText3 } } as Column, {}, {}); 3
 
     expect(result1).toBe(`<a href="${hyperlinkUrl1}">${linkText1}</a>`);
     expect(result2).toBe(`<a href="${hyperlinkUrl2}">${linkText2}</a>`);
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/iconFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/iconFormatter.spec.ts
index daed00add..264cb4dbb 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/iconFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/iconFormatter.spec.ts
@@ -10,14 +10,14 @@ describe('the Icon Formatter', () => {
   it('should always return a <i> with the icon class name provided in the "icon" property from "params"', () => {
     const input = null;
     const icon = 'fa fa-search';
-    const result = iconFormatter(0, 0, input, { field: 'user', params: { icon } } as Column, {});
+    const result = iconFormatter(0, 0, input, { field: 'user', params: { icon } } as Column, {}, {});
     expect(result).toBe(`<i class="${icon}" aria-hidden="true"></i>`);
   });
 
   it('should always return a <i> with the icon class name provided in the "formatterIcon" property from "params"', () => {
     const input = null;
     const icon = 'fa fa-search';
-    const result = iconFormatter(0, 0, input, { field: 'user', params: { formatterIcon: icon } } as Column, {});
+    const result = iconFormatter(0, 0, input, { field: 'user', params: { formatterIcon: icon } } as Column, {}, {});
     expect(result).toBe(`<i class="${icon}" aria-hidden="true"></i>`);
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/infoIconFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/infoIconFormatter.spec.ts
index 34f43a21a..a042d65d5 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/infoIconFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/infoIconFormatter.spec.ts
@@ -4,13 +4,13 @@ import { infoIconFormatter } from '../infoIconFormatter';
 describe('the Info Icon Formatter', () => {
   it('should always return the Font Awesome Info icon even when False is provided', () => {
     const value = false;
-    const result = infoIconFormatter(0, 0, value, {} as Column, {});
+    const result = infoIconFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('<i class="fa fa-info-circle pointer info-icon" aria-hidden="true"></i>');
   });
 
   it('should return the Font Awesome Info icon when input is filled with any string', () => {
     const value = 'anything';
-    const result = infoIconFormatter(0, 0, value, {} as Column, {});
+    const result = infoIconFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('<i class="fa fa-info-circle pointer info-icon" aria-hidden="true"></i>');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/italicFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/italicFormatter.spec.ts
index 39cbd955a..969aeebdb 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/italicFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/italicFormatter.spec.ts
@@ -4,13 +4,13 @@ import { italicFormatter } from '../italicFormatter';
 describe('the Italic Formatter', () => {
   it('should return an empty string when no value is passed', () => {
     const value = null;
-    const result = italicFormatter(0, 0, value, {} as Column, {});
+    const result = italicFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe('');
   });
 
   it('should return an italic html formatted string when value is filled', () => {
     const value = 'john';
-    const result = italicFormatter(0, 0, value, {} as Column, {});
+    const result = italicFormatter(0, 0, value, {} as Column, {}, {});
     expect(result).toBe(`<i>${value}</i>`);
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/lowercaseFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/lowercaseFormatter.spec.ts
index 8d53cb4d4..5fbef2be8 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/lowercaseFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/lowercaseFormatter.spec.ts
@@ -3,22 +3,22 @@ import { lowercaseFormatter } from '../lowercaseFormatter';
 
 describe('the Lowercase Formatter', () => {
   it('should return an empty string when no value is passed', async () => {
-    const output = lowercaseFormatter(1, 1, '', {} as Column, {});
+    const output = lowercaseFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should return a string all in lowercase', () => {
-    const output = lowercaseFormatter(1, 1, 'HeLlo', {} as Column, {});
+    const output = lowercaseFormatter(1, 1, 'HeLlo', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should return a number as a string', () => {
-    const output = lowercaseFormatter(1, 1, 99, {} as Column, {});
+    const output = lowercaseFormatter(1, 1, 99, {} as Column, {}, {});
     expect(output).toBe('99');
   });
 
   it('should return a boolean as a string all in lowercase', () => {
-    const output = lowercaseFormatter(1, 1, false, {} as Column, {});
+    const output = lowercaseFormatter(1, 1, false, {} as Column, {}, {});
     expect(output).toBe('false');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/maskFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/maskFormatter.spec.ts
index f473c101c..b674518c4 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/maskFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/maskFormatter.spec.ts
@@ -16,49 +16,49 @@ describe('the ArrayObjectToCsv Formatter', () => {
   it('should return null when no value is provided', () => {
     const input = null;
     const params = { mask: '(000) 000-0000' };
-    const result = maskFormatter(0, 0, input, { field: 'user', params } as Column, {});
+    const result = maskFormatter(0, 0, input, { field: 'user', params } as Column, {}, {});
     expect(result).toBe(null);
   });
 
   it('should return formatted output according to mask when mask includes only numbers', () => {
     const params = { mask: '(000) 000-0000' };
     const inputValue = '123456789013';
-    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {});
+    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {}, {});
     expect(result).toBe('(123) 456-7890');
   });
 
   it('should return formatted output without extra digits that are not included in the mask', () => {
     const params = { mask: '(000) 000-0000' };
     const inputValue = '1234567890135455454';
-    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {});
+    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {}, {});
     expect(result).toBe('(123) 456-7890');
   });
 
   it('should return partially formatted output when input (digits only) length is shorter than mask', () => {
     const params = { mask: '(000) 000-0000' };
     const inputValue = '123456';
-    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {});
+    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {}, {});
     expect(result).toBe('(123) 456-');
   });
 
   it('should return formatted output (postal code) according to mask when mask includes both numbers and characters', () => {
     const params = { mask: 'A0A 0A0' };
     const inputValue = 'H0H0H0';
-    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {});
+    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {}, {});
     expect(result).toBe('H0H 0H0');
   });
 
   it('should return formatted output (postal code) without extra characters that are not included in the mask', () => {
     const params = { mask: 'A0A 0A0' };
     const inputValue = 'H0H0H0324343asdds';
-    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {});
+    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {}, {});
     expect(result).toBe('H0H 0H0');
   });
 
   it('should return partially formatted output when input (characters only) length is shorter than mask', () => {
     const params = { mask: 'A0A 0A0' };
     const inputValue = 'H0H0';
-    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {});
+    const result = maskFormatter(0, 0, inputValue, { field: 'user', params } as Column, {}, {});
     expect(result).toBe('H0H 0');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/multipleFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/multipleFormatter.spec.ts
index e94a58915..ba0ee0cd9 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/multipleFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/multipleFormatter.spec.ts
@@ -7,14 +7,14 @@ describe('the Multiple Formatter', () => {
   it('should return text output wrapped first as bold then wrapped as italic html formatted string', () => {
     const value = 'john';
     const params = { formatters: [boldFormatter, italicFormatter] };
-    const result = multipleFormatter(0, 0, value, { params } as Column, {});
+    const result = multipleFormatter(0, 0, value, { params } as Column, {}, {});
     expect(result).toBe(`<i><b>${value}</b></i>`);
   });
 
   it('should expect the first formatter to be the last wrapped format and not the other way around', () => {
     const value = 'john';
     const params = { formatters: [boldFormatter, italicFormatter] };
-    const result = multipleFormatter(0, 0, value, { params } as Column, {});
+    const result = multipleFormatter(0, 0, value, { params } as Column, {}, {});
     expect(result).toBe(`<i><b>${value}</b></i>`);
     expect(result).not.toBe(`<b><i>${value}</i></b>`);
   });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteBarFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteBarFormatter.spec.ts
index 8d8ce2228..822c1c2e0 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteBarFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteBarFormatter.spec.ts
@@ -3,26 +3,26 @@ import { percentCompleteBarFormatter } from '../percentCompleteBarFormatter';
 
 describe('the Percent Complete Formatter', () => {
   it('should return an empty string when no value is provided', () => {
-    const output = percentCompleteBarFormatter(1, 1, '', {} as Column, {});
+    const output = percentCompleteBarFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should return empty string when non-numeric value is provided', () => {
-    const output = percentCompleteBarFormatter(1, 1, 'hello', {} as Column, {});
+    const output = percentCompleteBarFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should display a red color bar formatter when number 0 is provided', () => {
     const input = 0;
     const color = 'red';
-    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input}%"></span>`);
   });
 
   it('should display a red color bar when value is a negative number', () => {
     const input = -15;
     const color = 'red';
-    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input}%"></span>`);
   });
 
@@ -30,8 +30,8 @@ describe('the Percent Complete Formatter', () => {
     const input1 = 30;
     const input2 = 69;
     const color = 'silver';
-    const output1 = percentCompleteBarFormatter(1, 1, input1, {} as Column, {});
-    const output2 = percentCompleteBarFormatter(1, 1, input2, {} as Column, {});
+    const output1 = percentCompleteBarFormatter(1, 1, input1, {} as Column, {}, {});
+    const output2 = percentCompleteBarFormatter(1, 1, input2, {} as Column, {}, {});
     expect(output1).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input1}%"></span>`);
     expect(output2).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input2}%"></span>`);
   });
@@ -39,14 +39,14 @@ describe('the Percent Complete Formatter', () => {
   it('should display a green color bar when value greater or equal to 70 and is a type string', () => {
     const input = '70';
     const color = 'green';
-    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input}%"></span>`);
   });
 
   it('should display a green color bar with percentage of 100% when number is greater than 100 is provided', () => {
     const input = 125;
     const color = 'green';
-    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:100%"></span>`);
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteFormatter.spec.ts
index 0fd7fa516..b39ffb575 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/percentCompleteFormatter.spec.ts
@@ -7,54 +7,54 @@ describe('the Percent Complete Formatter', () => {
   };
 
   it('should return an empty string when no value is provided', () => {
-    const output = percentCompleteFormatter(1, 1, '', {} as Column, {});
+    const output = percentCompleteFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should return original string when non-numeric value is provided', () => {
-    const output = percentCompleteFormatter(1, 1, 'hello', {} as Column, {});
+    const output = percentCompleteFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should display a red color percentage when number 0 is provided', () => {
     const input = 0;
-    const output = percentCompleteFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style='color:red'>0%</span>`);
   });
 
   it('should display a red color percentage when a negative number is provided', () => {
     const input = -15;
-    const output = percentCompleteFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style='color:red'>-15%</span>`);
   });
 
   it('should display a green color percentage when a positive number greater or equal to 50 is provided', () => {
     const input = 50;
-    const output = percentCompleteFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style='color:green'>50%</span>`);
   });
 
   it('should display a green color percentage when a positive number greater than 50 and is a type string is provided', () => {
     const input = '99';
-    const output = percentCompleteFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style='color:green'>99%</span>`);
   });
 
   it('should display a green color percentage of 100% when number is greater than 100 is provided', () => {
     const input = 125;
-    const output = percentCompleteFormatter(1, 1, input, {} as Column, {});
+    const output = percentCompleteFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`<span style='color:green'>100%</span>`);
   });
 
   it('should display a negative percentage with parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -2.4;
-    const output = percentCompleteFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output = percentCompleteFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
     expect(output).toBe(`<span style='color:red'>(2.4%)</span>`);
   });
 
   it('should display a negative number with thousand separator and parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -345678.024;
-    const output = percentCompleteFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
+    const output = percentCompleteFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`<span style='color:red'>(345,678.024%)</span>`);
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/percentFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/percentFormatter.spec.ts
index 3e33cc725..6ffa8928b 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/percentFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/percentFormatter.spec.ts
@@ -7,54 +7,54 @@ describe('the Percent Symbol Formatter', () => {
   };
 
   it('should display an empty string when no value is provided', () => {
-    const output = percentFormatter(1, 1, '', {} as Column, {});
+    const output = percentFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should display original string when non-numeric value is provided', () => {
-    const output = percentFormatter(1, 1, 'hello', {} as Column, {});
+    const output = percentFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should display 0% when number 0 is provided', () => {
     const input = 0;
-    const output = percentFormatter(1, 1, input, {} as Column, {});
+    const output = percentFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`${input}%`);
   });
 
   it('should display -15% when the negative number -.15 is provided', () => {
     const input = -.15;
-    const output = percentFormatter(1, 1, input, {} as Column, {});
+    const output = percentFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe('-15%');
   });
 
   it('should display 99.5% when number 0.995 is provided', () => {
     const input = 0.995;
-    const output = percentFormatter(1, 1, input, {} as Column, {});
+    const output = percentFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe('99.5%');
   });
 
   it('should display 88% when the string "0.88" is provided', () => {
     const input = '0.88';
-    const output = percentFormatter(1, 1, input, {} as Column, {});
+    const output = percentFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe('88%');
   });
 
   it('should display thousand separated percentage when the thousand separator is provided', () => {
     const input = '345678';
-    const output = percentFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {});
+    const output = percentFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe('34,567,800%');
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -0.024;
-    const output = percentFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output = percentFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
     expect(output).toBe(`(2.4%)`);
   });
 
   it('should display a negative number with thousand separator and parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -345678.024;
-    const output = percentFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
+    const output = percentFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`(34,567,802.4%)`);
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/percentSymbolFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/percentSymbolFormatter.spec.ts
index 51e85b60c..f70f6cb59 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/percentSymbolFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/percentSymbolFormatter.spec.ts
@@ -7,66 +7,66 @@ describe('the Percent Symbol Formatter', () => {
   };
 
   it('should display an empty string when no value is provided', () => {
-    const output = percentSymbolFormatter(1, 1, '', {} as Column, {});
+    const output = percentSymbolFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should display original string when non-numeric value is provided', () => {
-    const output = percentSymbolFormatter(1, 1, 'hello', {} as Column, {});
+    const output = percentSymbolFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('hello');
   });
 
   it('should display 0% when number 0 is provided', () => {
     const input = 0;
-    const output = percentSymbolFormatter(1, 1, input, {} as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`0%`);
   });
 
   it('should display a number with negative percentage sign when a negative number is provided', () => {
     const input = -15;
-    const output = percentSymbolFormatter(1, 1, input, {} as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`-15%`);
   });
 
   it('should display a number with thousand separator and negative percentage sign when a negative number is provided', () => {
     const input = -15;
-    const output = percentSymbolFormatter(1, 1, input, {} as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`-15%`);
   });
 
   it('should display a number with percentage sign when a number is provided', () => {
     const input = 99;
-    const output = percentSymbolFormatter(1, 1, input, {} as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`99%`);
   });
 
   it('should display a number with thousand separator and  percentage sign when a number is provided', () => {
     const input = 2345678;
-    const output = percentSymbolFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`2,345,678%`);
   });
 
   it('should display a number with percentage sign when a string number is provided', () => {
     const input = '99';
-    const output = percentSymbolFormatter(1, 1, input, {} as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, {} as Column, {}, {});
     expect(output).toBe(`99%`);
   });
 
   it('should display a number with thousand separator and  percentage sign when a string number is provided', () => {
     const input = '2345678';
-    const output = percentSymbolFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, { params: { thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`2,345,678%`);
   });
 
   it('should display a negative number with parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -2.4;
-    const output = percentSymbolFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
     expect(output).toBe(`(2.4%)`);
   });
 
   it('should display a negative number with thousand separator and parentheses when "displayNegativeNumberWithParentheses" is enabled in the "params"', () => {
     const input = -2345678.4;
-    const output = percentSymbolFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
+    const output = percentSymbolFormatter(1, 1, input, { params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
     expect(output).toBe(`(2,345,678.4%)`);
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/progressBarFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/progressBarFormatter.spec.ts
index 7feea6cfb..e4e8042f6 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/progressBarFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/progressBarFormatter.spec.ts
@@ -3,12 +3,12 @@ import { progressBarFormatter } from '../progressBarFormatter';
 
 describe('the Progress Bar Formatter', () => {
   it('should return an empty string when no value is provided', () => {
-    const output = progressBarFormatter(1, 1, '', {} as Column, {});
+    const output = progressBarFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should return empty string when non-numeric value is provided', () => {
-    const output = progressBarFormatter(1, 1, 'hello', {} as Column, {});
+    const output = progressBarFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
@@ -19,7 +19,7 @@ describe('the Progress Bar Formatter', () => {
       <div class="progress-bar progress-bar-${barType} bg-${barType}" role="progressbar" aria-valuenow="${inputValue}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: ${inputValue}%;">
       ${inputValue}%
       </div> </div>`;
-    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {});
+    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {}, {});
     expect(output).toBe(template.replace(/\s{2,}/g, ' ').trim());
   });
 
@@ -30,7 +30,7 @@ describe('the Progress Bar Formatter', () => {
       <div class="progress-bar progress-bar-${barType} bg-${barType}" role="progressbar" aria-valuenow="${inputValue}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: ${inputValue}%;">
       ${inputValue}%
       </div> </div>`;
-    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {});
+    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {}, {});
     expect(output).toBe(template.replace(/\s{2,}/g, ' ').trim());
   });
 
@@ -48,8 +48,8 @@ describe('the Progress Bar Formatter', () => {
       ${inputValue2}%
       </div> </div>`;
 
-    const output1 = progressBarFormatter(1, 1, inputValue1, {} as Column, {});
-    const output2 = progressBarFormatter(1, 1, inputValue2, {} as Column, {});
+    const output1 = progressBarFormatter(1, 1, inputValue1, {} as Column, {}, {});
+    const output2 = progressBarFormatter(1, 1, inputValue2, {} as Column, {}, {});
 
     expect(output1).toBe(template1.replace(/\s{2,}/g, ' ').trim());
     expect(output2).toBe(template2.replace(/\s{2,}/g, ' ').trim());
@@ -62,7 +62,7 @@ describe('the Progress Bar Formatter', () => {
       <div class="progress-bar progress-bar-${barType} bg-${barType}" role="progressbar" aria-valuenow="${inputValue}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: ${inputValue}%;">
       ${inputValue}%
       </div> </div>`;
-    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {});
+    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {}, {});
     expect(output).toBe(template.replace(/\s{2,}/g, ' ').trim());
   });
 
@@ -74,7 +74,7 @@ describe('the Progress Bar Formatter', () => {
       <div class="progress-bar progress-bar-${barType} bg-${barType}" role="progressbar" aria-valuenow="${inputMaxValue}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: ${inputMaxValue}%;">
       ${inputMaxValue}%
       </div> </div>`;
-    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {});
+    const output = progressBarFormatter(1, 1, inputValue, {} as Column, {}, {});
     expect(output).toBe(template.replace(/\s{2,}/g, ' ').trim());
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/translateBooleanFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/translateBooleanFormatter.spec.ts
index 334ee781b..fcd04d11a 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/translateBooleanFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/translateBooleanFormatter.spec.ts
@@ -53,7 +53,7 @@ describe('the Translate Formatter', () => {
   });
 
   it('should return the translated value when value passed is a string and ngx-translate service is passed as a ColumnDef Params without any Grid object', () => {
-    const output = translateBooleanFormatter(1, 1, 'TRUE', { params: { i18n: translate } } as Column, {});
+    const output = translateBooleanFormatter(1, 1, 'TRUE', { params: { i18n: translate } } as Column, {}, {});
     expect(output).toBe('Vrai');
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/translateFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/translateFormatter.spec.ts
index 0164fe871..e4a046190 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/translateFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/translateFormatter.spec.ts
@@ -47,7 +47,7 @@ describe('the Translate Formatter', () => {
   });
 
   it('should return the translated value when value passed is a string and ngx-translate service is passed as a ColumnDef Params without any Grid object', () => {
-    const output = translateFormatter(1, 1, 'HELLO', { params: { i18n: translate } } as Column, {});
+    const output = translateFormatter(1, 1, 'HELLO', { params: { i18n: translate } } as Column, {}, {});
     expect(output).toBe('Bonjour');
   });
 
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/uppercaseFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/uppercaseFormatter.spec.ts
index a32798a1e..e9014c9c0 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/uppercaseFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/uppercaseFormatter.spec.ts
@@ -3,22 +3,22 @@ import { uppercaseFormatter } from '../uppercaseFormatter';
 
 describe('the Uppercase Formatter', () => {
   it('should return an empty string when no value is passed', () => {
-    const output = uppercaseFormatter(1, 1, '', {} as Column, {});
+    const output = uppercaseFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('');
   });
 
   it('should return a string all in uppercase', () => {
-    const output = uppercaseFormatter(1, 1, 'hello', {} as Column, {});
+    const output = uppercaseFormatter(1, 1, 'hello', {} as Column, {}, {});
     expect(output).toBe('HELLO');
   });
 
   it('should return a number as a string', () => {
-    const output = uppercaseFormatter(1, 1, 99, {} as Column, {});
+    const output = uppercaseFormatter(1, 1, 99, {} as Column, {}, {});
     expect(output).toBe('99');
   });
 
   it('should return a boolean as a string all in uppercase', () => {
-    const output = uppercaseFormatter(1, 1, false, {} as Column, {});
+    const output = uppercaseFormatter(1, 1, false, {} as Column, {}, {});
     expect(output).toBe('FALSE');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts
index 80361804e..2c279f4d7 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts
@@ -3,17 +3,17 @@ import { yesNoFormatter } from '../yesNoFormatter';
 
 describe('Yes/No Formatter', () => {
   it('should return a "Yes" string when value is passed', () => {
-    const output = yesNoFormatter(1, 1, 'blah', {} as Column, {});
+    const output = yesNoFormatter(1, 1, 'blah', {} as Column, {}, {});
     expect(output).toBe('Yes');
   });
 
   it('should return the string "No" string when empty string provided', () => {
-    const output = yesNoFormatter(1, 1, '', {} as Column, {});
+    const output = yesNoFormatter(1, 1, '', {} as Column, {}, {});
     expect(output).toBe('No');
   });
 
   it('should return the string "No" string when value is null', () => {
-    const output = yesNoFormatter(1, 1, null, {} as Column, {});
+    const output = yesNoFormatter(1, 1, null, {} as Column, {}, {});
     expect(output).toBe('No');
   });
 });
diff --git a/src/app/modules/angular-slickgrid/formatters/collectionEditorFormatter.ts b/src/app/modules/angular-slickgrid/formatters/collectionEditorFormatter.ts
index 3e3329cad..8872cbc5e 100644
--- a/src/app/modules/angular-slickgrid/formatters/collectionEditorFormatter.ts
+++ b/src/app/modules/angular-slickgrid/formatters/collectionEditorFormatter.ts
@@ -5,7 +5,7 @@ import { findOrDefault } from '../services/utilities';
 /**
  * A formatter to show the label property value of an editor collection
  */
-export const collectionEditorFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
+export const collectionEditorFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
   if (!value || !columnDef || !columnDef.internalColumnEditor || !columnDef.internalColumnEditor.collection
     || !columnDef.internalColumnEditor.collection.length) {
     return value;
@@ -21,13 +21,15 @@ export const collectionEditorFormatter: Formatter = (row: number, cell: number,
         cell,
         value.map((v: any) => findOrDefault(collection, (c: any) => c === v)),
         columnDef,
-        dataContext);
+        dataContext,
+        grid);
     } else {
       return arrayToCsvFormatter(row,
         cell,
         value.map((v: any) => findOrDefault(collection, (c: any) => c[valueName] === v)[labelName]),
         columnDef,
-        dataContext);
+        dataContext,
+        grid);
     }
   }
 
diff --git a/src/app/modules/angular-slickgrid/formatters/collectionFormatter.ts b/src/app/modules/angular-slickgrid/formatters/collectionFormatter.ts
index 9f2b5b6f0..e9e48b5fa 100644
--- a/src/app/modules/angular-slickgrid/formatters/collectionFormatter.ts
+++ b/src/app/modules/angular-slickgrid/formatters/collectionFormatter.ts
@@ -5,7 +5,7 @@ import { findOrDefault } from '../services/utilities';
 /**
  * A formatter to show the label property value of a params collection
  */
-export const collectionFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
+export const collectionFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
   if (!value || !columnDef || !columnDef.params || !columnDef.params.collection
     || !columnDef.params.collection.length) {
     return value;
@@ -20,7 +20,8 @@ export const collectionFormatter: Formatter = (row: number, cell: number, value:
       cell,
       value.map((v: any) => findOrDefault(collection, (c: any) => c[valueName] === v)[labelName]),
       columnDef,
-      dataContext);
+      dataContext,
+      grid);
   }
 
   return findOrDefault(collection, (c: any) => c[valueName] === value)[labelName] || '';
diff --git a/src/app/modules/angular-slickgrid/formatters/formatterUtilities.ts b/src/app/modules/angular-slickgrid/formatters/formatterUtilities.ts
index 71fa7da3d..c5d122579 100644
--- a/src/app/modules/angular-slickgrid/formatters/formatterUtilities.ts
+++ b/src/app/modules/angular-slickgrid/formatters/formatterUtilities.ts
@@ -25,12 +25,14 @@ export function getValueFromParamsOrFormatterOptions(optionName: string, columnD
 export function getAssociatedDateFormatter(fieldType: FieldType, defaultSeparator: string): Formatter {
   const defaultDateFormat = mapMomentDateFormatWithFieldType(fieldType);
 
-  return (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+  return (_row: number, _cell: number, value: any, columnDef: Column, _dataContext: any, grid: any) => {
     const gridOptions = ((grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {}) as GridOption;
     const customSeparator = gridOptions && gridOptions.formatterOptions && gridOptions.formatterOptions.dateSeparator || defaultSeparator;
+    const inputType = columnDef && columnDef.type || FieldType.date;
+    const inputDateFormat = mapMomentDateFormatWithFieldType(inputType);
     const isParsingAsUtc = columnDef && columnDef.params && columnDef.params.parseDateAsUtc || false;
 
-    const isDateValid = moment(value, defaultDateFormat, false).isValid();
+    const isDateValid = moment(value, inputDateFormat, false).isValid();
     let outputDate = value;
     if (value && isDateValid) {
       outputDate = isParsingAsUtc ? moment.utc(value).format(defaultDateFormat) : moment(value).format(defaultDateFormat);
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts
index 3ccc19ed4..347303a52 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsDollarFormatters.spec.ts
@@ -87,8 +87,8 @@ describe('avgTotalsDollarFormatter', () => {
   it('should display an average number with at least 2 decimals but no more than 4 by default, and dollar sign when a positive number is provided', () => {
     const totals = { avg: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('$123.4568');
     expect(output2).toBe('$345.20');
@@ -97,9 +97,9 @@ describe('avgTotalsDollarFormatter', () => {
   it('should display an average number with user defined minimum & maximum decimal count', () => {
     const totals = { avg: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = avgTotalsDollarFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = avgTotalsDollarFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('$123.46');
     expect(output2).toBe('$345.2');
@@ -122,8 +122,8 @@ describe('avgTotalsDollarFormatter', () => {
   it('should display an average number with prefix and suffix', () => {
     const totals = { avg: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ' } } as Column, {});
-    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)' } } as Column, {});
+    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ' } } as Column, {}, {});
+    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)' } } as Column, {}, {});
     const output3 = avgTotalsDollarFormatter(
       totals, {
         id: 'column3', field: 'column3',
@@ -138,8 +138,8 @@ describe('avgTotalsDollarFormatter', () => {
   it('should display an average number with prefix, suffix and thousand separator', () => {
     const totals = { avg: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = avgTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = avgTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = avgTotalsDollarFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts
index 1bce5abeb..019154b28 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('avgTotalsFormatter', () => {
   it('should display a negative average when its input is negative', () => {
     const totals = { avg: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('-123');
     expect(output2).toBe('-34.57');
@@ -46,9 +46,9 @@ describe('avgTotalsFormatter', () => {
   it('should display a negative average and thousand separator when its input is negative', () => {
     const totals = { avg: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('-12,345,678');
     expect(output2).toBe('-345,678.57');
@@ -58,8 +58,8 @@ describe('avgTotalsFormatter', () => {
   it('should display a negative average with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { avg: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('(123)');
     expect(output2).toBe('(34.57)');
@@ -68,9 +68,9 @@ describe('avgTotalsFormatter', () => {
   it('should display a negative average with and thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { avg: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('(12,345,678)');
     expect(output2).toBe('(345,678.57)');
@@ -88,8 +88,8 @@ describe('avgTotalsFormatter', () => {
   it('should display a rounded average number without decimals when no min/maxDecimal is defined and when a positive number is provided', () => {
     const totals = { avg: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('124');
     expect(output2).toBe('345');
@@ -98,9 +98,9 @@ describe('avgTotalsFormatter', () => {
   it('should display an average number with user defined minimum & maximum decimal count', () => {
     const totals = { avg: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = avgTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = avgTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('123.46');
     expect(output2).toBe('345.2');
@@ -123,8 +123,8 @@ describe('avgTotalsFormatter', () => {
   it('should display an average number a prefix and suffix', () => {
     const totals = { avg: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ' } } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)' } } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ' } } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)' } } as Column, {}, {});
     const output3 = avgTotalsFormatter(
       totals, {
         id: 'column3',
@@ -141,8 +141,8 @@ describe('avgTotalsFormatter', () => {
   it('should display an average number with prefix, suffix and thousand separator', () => {
     const totals = { avg: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = avgTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = avgTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = avgTotalsFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts
index 6ca194b1b..77c041917 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/avgTotalsPercentageFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display a negative percentage average when its input is negative', () => {
     const totals = { avg: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('-123%');
     expect(output2).toBe('-34.57%');
@@ -46,9 +46,9 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display a negative percentage average and thousand separator when its input is negative', () => {
     const totals = { avg: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('-12,345,678%');
     expect(output2).toBe('-345,678.57%');
@@ -58,8 +58,8 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display a negative percentage average with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { avg: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('(123%)');
     expect(output2).toBe('(34.57%)');
@@ -68,9 +68,9 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display a negative percentage average and thousand separator with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { avg: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('(12,345,678%)');
     expect(output2).toBe('(345,678.57%)');
@@ -88,8 +88,8 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display a rounded percentage average number without decimals when no min/maxDecimal is defined and a number with decimals is provided', () => {
     const totals = { avg: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('124%');
     expect(output2).toBe('345%');
@@ -98,9 +98,9 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display a percentage average number with user defined minimum & maximum decimal count', () => {
     const totals = { avg: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = avgTotalsPercentageFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = avgTotalsPercentageFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('123.46%');
     expect(output2).toBe('345.2%');
@@ -123,8 +123,8 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display a percentage average number a prefix and suffix', () => {
     const totals = { avg: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ' } } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)' } } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ' } } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)' } } as Column, {}, {});
     const output3 = avgTotalsPercentageFormatter(
       totals, {
         id: 'column3',
@@ -141,8 +141,8 @@ describe('avgTotalsPercentageFormatter', () => {
   it('should display an average number with prefix, suffix and thousand separator', () => {
     const totals = { avg: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = avgTotalsPercentageFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Avg: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = avgTotalsPercentageFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (avg)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = avgTotalsPercentageFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts
index 13f7b8ed8..f37d64244 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/maxTotalsFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('maxTotalsFormatter', () => {
   it('should display a negative maximum when its input is negative', () => {
     const totals = { max: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('-123');
     expect(output2).toBe('-34.57');
@@ -46,9 +46,9 @@ describe('maxTotalsFormatter', () => {
   it('should display a negative maximum and thousand separator when its input is negative', () => {
     const totals = { max: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('-12,345,678');
     expect(output2).toBe('-345,678.57');
@@ -58,8 +58,8 @@ describe('maxTotalsFormatter', () => {
   it('should display a negative maximum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { max: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('(123)');
     expect(output2).toBe('(34.57)');
@@ -68,9 +68,9 @@ describe('maxTotalsFormatter', () => {
   it('should display a negative maximum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { max: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('(12,345,678)');
     expect(output2).toBe('(345,678.57)');
@@ -88,8 +88,8 @@ describe('maxTotalsFormatter', () => {
   it('should display a positive maximum number even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { max: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('123');
     expect(output2).toBe('34.57');
@@ -98,8 +98,8 @@ describe('maxTotalsFormatter', () => {
   it('should display the same maximum value when a number with decimals is provided', () => {
     const totals = { max: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('123.55678');
     expect(output2).toBe('345.2');
@@ -121,9 +121,9 @@ describe('maxTotalsFormatter', () => {
   it('should display a maximum number with user defined minimum & maximum decimal count', () => {
     const totals = { max: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = maxTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = maxTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('123.46');
     expect(output2).toBe('345.2');
@@ -133,8 +133,8 @@ describe('maxTotalsFormatter', () => {
   it('should display a maximum number a prefix and suffix', () => {
     const totals = { max: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Max: ' } } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Max: ' } } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = maxTotalsFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('maxTotalsFormatter', () => {
   it('should display a max number with prefix, suffix and thousand separator', () => {
     const totals = { max: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Max: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = maxTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Max: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = maxTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = maxTotalsFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/minTotalsFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/minTotalsFormatter.spec.ts
index a6839e145..9c2cb55cf 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/minTotalsFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/minTotalsFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('minTotalsFormatter', () => {
   it('should display a negative minimum when its input is negative', () => {
     const totals = { min: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('-123');
     expect(output2).toBe('-34.57');
@@ -46,9 +46,9 @@ describe('minTotalsFormatter', () => {
   it('should display a negative minimum and thousand separator when its input is negative', () => {
     const totals = { min: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('-12,345,678');
     expect(output2).toBe('-345,678.57');
@@ -58,8 +58,8 @@ describe('minTotalsFormatter', () => {
   it('should display a negative minimum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { min: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('(123)');
     expect(output2).toBe('(34.57)');
@@ -68,9 +68,9 @@ describe('minTotalsFormatter', () => {
   it('should display a negative minimum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { min: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('(12,345,678)');
     expect(output2).toBe('(345,678.57)');
@@ -88,8 +88,8 @@ describe('minTotalsFormatter', () => {
   it('should display a positive minimum number even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { min: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('123');
     expect(output2).toBe('34.57');
@@ -98,8 +98,8 @@ describe('minTotalsFormatter', () => {
   it('should display the same minimum value when a number with decimals is provided', () => {
     const totals = { min: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('123.55678');
     expect(output2).toBe('345.2');
@@ -121,9 +121,9 @@ describe('minTotalsFormatter', () => {
   it('should display a minimum number with user defined minimum & maximum decimal count', () => {
     const totals = { min: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = minTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = minTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('123.46');
     expect(output2).toBe('345.2');
@@ -133,8 +133,8 @@ describe('minTotalsFormatter', () => {
   it('should display a minimum number a prefix and suffix', () => {
     const totals = { min: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'min: ' } } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'min: ' } } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = minTotalsFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('minTotalsFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { min: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Min: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (min)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = minTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Min: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = minTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (min)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = minTotalsFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts
index 5f8f2f475..19ede4e3c 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsBoldFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a negative sum when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('<b>-123</b>');
     expect(output2).toBe('<b>-34.57</b>');
@@ -46,9 +46,9 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a negative sum and thousand separator when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<b>-12,345,678</b>');
     expect(output2).toBe('<b>-345,678.57</b>');
@@ -58,8 +58,8 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a negative sum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<b>(123)</b>');
     expect(output2).toBe('<b>(34.57)</b>');
@@ -68,9 +68,9 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a negative sum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<b>(12,345,678)</b>');
     expect(output2).toBe('<b>(345,678.57)</b>');
@@ -88,8 +88,8 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a positive sum number even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { sum: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<b>123</b>');
     expect(output2).toBe('<b>34.57</b>');
@@ -98,8 +98,8 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display the same sum value when a number with decimals is provided', () => {
     const totals = { sum: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('<b>123.55678</b>');
     expect(output2).toBe('<b>345.2</b>');
@@ -121,9 +121,9 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a sum number with user defined minimum & maximum decimal count', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = sumTotalsBoldFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = sumTotalsBoldFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<b>123.46</b>');
     expect(output2).toBe('<b>345.2</b>');
@@ -133,8 +133,8 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a sum number a prefix and suffix', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ' } } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)' } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ' } } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)' } } as Column, {}, {});
     const output3 = sumTotalsBoldFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('sumTotalsBoldFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { sum: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = sumTotalsBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = sumTotalsBoldFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts
index 83f645ee7..06fa9180b 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsColoredFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a negative sum in red when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">-123</span>');
     expect(output2).toBe('<span style="color:red">-34.57</span>');
@@ -46,9 +46,9 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a negative sum and thousand separator when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">-12,345,678</span>');
     expect(output2).toBe('<span style="color:red">-345,678.57</span>');
@@ -58,8 +58,8 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a negative sum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">(123)</span>');
     expect(output2).toBe('<span style="color:red">(34.57)</span>');
@@ -68,9 +68,9 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a negative sum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">(12,345,678)</span>');
     expect(output2).toBe('<span style="color:red">(345,678.57)</span>');
@@ -88,8 +88,8 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a positive green sum number even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { sum: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green">123</span>');
     expect(output2).toBe('<span style="color:green">34.57</span>');
@@ -98,8 +98,8 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display the same sum value in green when a number with decimals is provided', () => {
     const totals = { sum: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green">123.55678</span>');
     expect(output2).toBe('<span style="color:green">345.2</span>');
@@ -121,9 +121,9 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a sum number in green (or red for negative) with user defined minimum & maximum decimal count', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = sumTotalsColoredFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = sumTotalsColoredFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green">123.46</span>');
     expect(output2).toBe('<span style="color:green">345.2</span>');
@@ -133,8 +133,8 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a sum number a prefix and suffix', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = sumTotalsColoredFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('sumTotalsColoredFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { sum: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = sumTotalsColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = sumTotalsColoredFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts
index 603bcdc96..445a86378 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarBoldFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a negative sum with at least 2 decimals in red when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('<b>-$123.00</b>');
     expect(output2).toBe('<b>-$34.57</b>');
@@ -46,9 +46,9 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a negative sum and thousand separator when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<b>-$12,345,678.00</b>');
     expect(output2).toBe('<b>-$345,678.57</b>');
@@ -58,8 +58,8 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a negative sum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<b>($123.00)</b>');
     expect(output2).toBe('<b>($34.57)</b>');
@@ -68,9 +68,9 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a negative sum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<b>($12,345,678.00)</b>');
     expect(output2).toBe('<b>($345,678.57)</b>');
@@ -88,8 +88,8 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a positive sum number with at least 2 decimals, even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { sum: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<b>$123.00</b>');
     expect(output2).toBe('<b>$34.57</b>');
@@ -98,8 +98,8 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display the same sum value in green with at least 2 decimals when a number with decimals is provided', () => {
     const totals = { sum: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('<b>$123.5568</b>');
     expect(output2).toBe('<b>$345.20</b>');
@@ -121,9 +121,9 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a sum number in correct color with at least 2 decimals when user provided minimum & maximum decimal count', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = sumTotalsDollarBoldFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = sumTotalsDollarBoldFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<b>$123.46</b>');
     expect(output2).toBe('<b>$345.2</b>');
@@ -133,8 +133,8 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a sum number with at least 2 decimals with prefix and suffix', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = sumTotalsDollarBoldFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('sumTotalsDollarBoldFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { sum: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = sumTotalsDollarBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = sumTotalsDollarBoldFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts
index 2b28340a8..8210b15b0 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredBoldFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a negative sum with at least 2 decimals in red when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red; font-weight: bold;">-$123.00</span>');
     expect(output2).toBe('<span style="color:red; font-weight: bold;">-$34.57</span>');
@@ -46,9 +46,9 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a negative sum and thousand separator when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red; font-weight: bold;">-$12,345,678.00</span>');
     expect(output2).toBe('<span style="color:red; font-weight: bold;">-$345,678.57</span>');
@@ -58,8 +58,8 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a negative sum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red; font-weight: bold;">($123.00)</span>');
     expect(output2).toBe('<span style="color:red; font-weight: bold;">($34.57)</span>');
@@ -68,9 +68,9 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a negative sum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red; font-weight: bold;">($12,345,678.00)</span>');
     expect(output2).toBe('<span style="color:red; font-weight: bold;">($345,678.57)</span>');
@@ -88,8 +88,8 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a positive sum number with at least 2 decimals, even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { sum: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green; font-weight: bold;">$123.00</span>');
     expect(output2).toBe('<span style="color:green; font-weight: bold;">$34.57</span>');
@@ -98,8 +98,8 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display the same sum value in green with at least 2 decimals when a number with decimals is provided', () => {
     const totals = { sum: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green; font-weight: bold;">$123.5568</span>');
     expect(output2).toBe('<span style="color:green; font-weight: bold;">$345.20</span>');
@@ -121,9 +121,9 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a sum number in correct color with at least 2 decimals when user provided minimum & maximum decimal count', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green; font-weight: bold;">$123.46</span>');
     expect(output2).toBe('<span style="color:green; font-weight: bold;">$345.2</span>');
@@ -133,8 +133,8 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a sum number with at least 2 decimals with prefix and suffix', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = sumTotalsDollarColoredBoldFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('sumTotalsDollarColoredBoldFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { sum: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredBoldFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = sumTotalsDollarColoredBoldFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts
index 091519570..f5682a0a3 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarColoredFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a negative sum with at least 2 decimals in red when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">-$123.00</span>');
     expect(output2).toBe('<span style="color:red">-$34.57</span>');
@@ -46,9 +46,9 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a negative sum and thousand separator when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">-$12,345,678.00</span>');
     expect(output2).toBe('<span style="color:red">-$345,678.57</span>');
@@ -58,8 +58,8 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a negative sum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">($123.00)</span>');
     expect(output2).toBe('<span style="color:red">($34.57)</span>');
@@ -68,9 +68,9 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a negative sum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:red">($12,345,678.00)</span>');
     expect(output2).toBe('<span style="color:red">($345,678.57)</span>');
@@ -88,8 +88,8 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a positive sum number with at least 2 decimals, even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { sum: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green">$123.00</span>');
     expect(output2).toBe('<span style="color:green">$34.57</span>');
@@ -98,8 +98,8 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display the same sum value in green with at least 2 decimals when a number with decimals is provided', () => {
     const totals = { sum: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green">$123.5568</span>');
     expect(output2).toBe('<span style="color:green">$345.20</span>');
@@ -121,9 +121,9 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a sum number in correct color with at least 2 decimals when user provided minimum & maximum decimal count', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = sumTotalsDollarColoredFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = sumTotalsDollarColoredFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('<span style="color:green">$123.46</span>');
     expect(output2).toBe('<span style="color:green">$345.2</span>');
@@ -133,8 +133,8 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a sum number with at least 2 decimals with prefix and suffix', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = sumTotalsDollarColoredFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('sumTotalsDollarColoredFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { sum: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarColoredFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = sumTotalsDollarColoredFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = sumTotalsDollarColoredFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts
index dfd1168dd..b730d01cc 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsDollarFormatter.spec.ts
@@ -36,8 +36,8 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a negative sum with at least 2 decimals in red when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
 
     expect(output1).toBe('-$123.00');
     expect(output2).toBe('-$34.57');
@@ -46,9 +46,9 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a negative sum and thousand separator when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('-$12,345,678.00');
     expect(output2).toBe('-$345,678.57');
@@ -58,8 +58,8 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a negative sum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('($123.00)');
     expect(output2).toBe('($34.57)');
@@ -68,9 +68,9 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a negative sum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('($12,345,678.00)');
     expect(output2).toBe('($345,678.57)');
@@ -88,8 +88,8 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a positive sum number with at least 2 decimals, even when displayNegativeNumberWithParentheses is enabled', () => {
     const totals = { sum: { column1: 123, column2: 34.5678, column3: 2.4 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('$123.00');
     expect(output2).toBe('$34.57');
@@ -98,8 +98,8 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display the same sum value in green with at least 2 decimals when a number with decimals is provided', () => {
     const totals = { sum: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('$123.5568');
     expect(output2).toBe('$345.20');
@@ -121,9 +121,9 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a sum number in correct color with at least 2 decimals when user provided minimum & maximum decimal count', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = sumTotalsDollarFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = sumTotalsDollarFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('$123.46');
     expect(output2).toBe('$345.2');
@@ -133,8 +133,8 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a sum number with at least 2 decimals with prefix and suffix', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = sumTotalsDollarFormatter(
       totals, {
         id: 'column3',
@@ -151,8 +151,8 @@ describe('sumTotalsDollarFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { sum: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsDollarFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = sumTotalsDollarFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = sumTotalsDollarFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts
index b416eb38f..55abcf94c 100644
--- a/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/grouping-formatters/__tests__/sumTotalsFormatter.spec.ts
@@ -36,9 +36,9 @@ describe('sumTotalsFormatter', () => {
   it('should display a negative sum when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {});
-    const output3 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',' } } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output3 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',' } } as Column, {}, {});
 
     expect(output1).toBe('-123');
     expect(output2).toBe('-34.57');
@@ -48,9 +48,9 @@ describe('sumTotalsFormatter', () => {
   it('should display a negative sum and thousand separator when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
 
     expect(output1).toBe('-12,345,678');
     expect(output2).toBe('-345,678.57');
@@ -60,8 +60,8 @@ describe('sumTotalsFormatter', () => {
   it('should display a negative sum with parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -123, column2: -34.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true } } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('(123)');
     expect(output2).toBe('(34.57)');
@@ -70,9 +70,9 @@ describe('sumTotalsFormatter', () => {
   it('should display a negative sum with thousand separator and parentheses instead of the negative sign when its input is negative', () => {
     const totals = { sum: { column1: -12345678, column2: -345678.5678, column3: -2.4 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {});
-    const output3 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column, {}, {});
+    const output3 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { maxDecimal: 2, displayNegativeNumberWithParentheses: true, decimalSeparator: ',', thousandSeparator: ' ' } } as Column, {}, {});
 
     expect(output1).toBe('(12,345,678)');
     expect(output2).toBe('(345,678.57)');
@@ -90,8 +90,8 @@ describe('sumTotalsFormatter', () => {
   it('should display the same sum value when a number with decimals is provided', () => {
     const totals = { sum: { column1: 123.55678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1' } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2' } as Column, {}, {});
 
     expect(output1).toBe('123.55678');
     expect(output2).toBe('345.2');
@@ -100,9 +100,9 @@ describe('sumTotalsFormatter', () => {
   it('should display a sum number with user defined minimum & maximum decimal count', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {});
-    const output3 = sumTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2 } } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0 } } as Column, {}, {});
+    const output3 = sumTotalsFormatter(totals, { id: 'column3', field: 'column3', params: { minDecimal: 3, displayNegativeNumberWithParentheses: true } } as Column, {}, {});
 
     expect(output1).toBe('123.46');
     expect(output2).toBe('345.2');
@@ -125,8 +125,8 @@ describe('sumTotalsFormatter', () => {
   it('should display a sum number a prefix and suffix', () => {
     const totals = { sum: { column1: 123.45678, column2: 345.2, column3: -2.45 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'sum: ' } } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (max)' } } as Column, {}, {});
     const output3 = sumTotalsFormatter(
       totals, {
         id: 'column3',
@@ -143,8 +143,8 @@ describe('sumTotalsFormatter', () => {
   it('should display a sum number with prefix, suffix and thousand separator', () => {
     const totals = { sum: { column1: 12345678.45678, column2: 345678.2, column3: -345678.45 } };
 
-    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
-    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {});
+    const output1 = sumTotalsFormatter(totals, { id: 'column1', field: 'column1', params: { maxDecimal: 2, groupFormatterPrefix: 'Sum: ', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
+    const output2 = sumTotalsFormatter(totals, { id: 'column2', field: 'column2', params: { minDecimal: 0, groupFormatterSuffix: ' (sum)', decimalSeparator: ',', thousandSeparator: '_' } } as Column, {}, {});
     const output3 = sumTotalsFormatter(
       totals, {
         id: 'column3', field: 'column3',
diff --git a/src/app/modules/angular-slickgrid/models/formatter.interface.ts b/src/app/modules/angular-slickgrid/models/formatter.interface.ts
index baa5c8d46..56bad61e7 100644
--- a/src/app/modules/angular-slickgrid/models/formatter.interface.ts
+++ b/src/app/modules/angular-slickgrid/models/formatter.interface.ts
@@ -1,4 +1,4 @@
 import { Column } from './column.interface';
 import { FormatterResultObject } from './formatterResultObject.interface';
 
-export declare type Formatter = (row: number, cell: number, value: any, columnDef?: Column, dataContext?: any, grid?: any) => string | FormatterResultObject;
+export declare type Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => string | FormatterResultObject;