diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts
new file mode 100644
index 000000000..b057a69a9
--- /dev/null
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/alignRightFormatter.spec.ts
@@ -0,0 +1,32 @@
+import { Column } from '../../models/column.interface';
+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, {});
+ expect(output).toBe('
');
+ });
+
+ 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, {});
+
+ expect(output1).toBe('');
+ expect(output2).toBe('');
+ });
+
+ it('should return a string all in uppercase', () => {
+ const output = alignRightFormatter(1, 1, 'hello', {} as Column, {});
+ expect(output).toBe('hello
');
+ });
+
+ it('should return a number as a string', () => {
+ const output = alignRightFormatter(1, 1, 99, {} as Column, {});
+ expect(output).toBe('99
');
+ });
+
+ it('should return a boolean as a string all in uppercase', () => {
+ const output = alignRightFormatter(1, 1, false, {} as Column, {});
+ expect(output).toBe('false
');
+ });
+});
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts
new file mode 100644
index 000000000..aca11c7ef
--- /dev/null
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/centerFormatter.spec.ts
@@ -0,0 +1,33 @@
+import { Column } from '../../models/column.interface';
+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, {});
+ expect(output).toBe('');
+ });
+
+ 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, {});
+
+ expect(output1).toBe('');
+ expect(output2).toBe('');
+ });
+
+
+ it('should return a string all in uppercase', () => {
+ const output = centerFormatter(1, 1, 'hello', {} as Column, {});
+ expect(output).toBe('hello');
+ });
+
+ it('should return a number as a string', () => {
+ const output = centerFormatter(1, 1, 99, {} as Column, {});
+ expect(output).toBe('99');
+ });
+
+ it('should return a boolean as a string all in uppercase', () => {
+ const output = centerFormatter(1, 1, false, {} as Column, {});
+ expect(output).toBe('false');
+ });
+});
diff --git a/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts b/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts
index b47c1ad5b..403f21fdc 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/treeFormatter.spec.ts
@@ -12,7 +12,7 @@ const gridStub = {
getOptions: jest.fn(),
};
-describe('the Uppercase Formatter', () => {
+describe('Tree Formatter', () => {
let dataset;
let mockGridOptions: GridOption;
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 493b346cd..80361804e 100644
--- a/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts
+++ b/src/app/modules/angular-slickgrid/formatters/__tests__/yesNoFormatter.spec.ts
@@ -1,7 +1,7 @@
import { Column } from '../../models';
import { yesNoFormatter } from '../yesNoFormatter';
-describe('the Uppercase Formatter', () => {
+describe('Yes/No Formatter', () => {
it('should return a "Yes" string when value is passed', () => {
const output = yesNoFormatter(1, 1, 'blah', {} as Column, {});
expect(output).toBe('Yes');
diff --git a/src/app/modules/angular-slickgrid/formatters/alignRightFormatter.ts b/src/app/modules/angular-slickgrid/formatters/alignRightFormatter.ts
new file mode 100644
index 000000000..ed46bdc43
--- /dev/null
+++ b/src/app/modules/angular-slickgrid/formatters/alignRightFormatter.ts
@@ -0,0 +1,10 @@
+import { Formatter } from './../models/index';
+
+export const alignRightFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => {
+ let outputValue = value;
+
+ if (value === null || value === undefined) {
+ outputValue = '';
+ }
+ return `${outputValue}
`;
+};
diff --git a/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts b/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts
index 9e196c369..4ea3fe233 100644
--- a/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts
+++ b/src/app/modules/angular-slickgrid/formatters/boldFormatter.ts
@@ -1,5 +1,5 @@
import { Column, Formatter } from './../models/index';
-export const boldFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
+export const boldFormatter: Formatter = (row: number, cell: number, value: any) => {
return value ? `${value}` : '';
};
diff --git a/src/app/modules/angular-slickgrid/formatters/centerFormatter.ts b/src/app/modules/angular-slickgrid/formatters/centerFormatter.ts
new file mode 100644
index 000000000..76064d8c7
--- /dev/null
+++ b/src/app/modules/angular-slickgrid/formatters/centerFormatter.ts
@@ -0,0 +1,10 @@
+import { Formatter } from './../models/index';
+
+export const centerFormatter: Formatter = (_row: number, _cell: number, value: string | any): string => {
+ let outputValue = value;
+
+ if (value === null || value === undefined) {
+ outputValue = '';
+ }
+ return `${outputValue}`;
+};
diff --git a/src/app/modules/angular-slickgrid/formatters/index.ts b/src/app/modules/angular-slickgrid/formatters/index.ts
index 7721d045b..687c5475d 100644
--- a/src/app/modules/angular-slickgrid/formatters/index.ts
+++ b/src/app/modules/angular-slickgrid/formatters/index.ts
@@ -1,8 +1,10 @@
import { FieldType } from '../models/index';
import { getAssociatedDateFormatter } from './formatterUtilities';
+import { alignRightFormatter } from './alignRightFormatter';
import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter';
import { arrayToCsvFormatter } from './arrayToCsvFormatter';
import { boldFormatter } from './boldFormatter';
+import { centerFormatter } from './centerFormatter';
import { checkboxFormatter } from './checkboxFormatter';
import { checkmarkFormatter } from './checkmarkFormatter';
import { collectionFormatter } from './collectionFormatter';
@@ -36,6 +38,12 @@ import { bsDropdownFormatter } from './bsDropdownFormatter';
/** Provides a list of different Formatters that will change the cell value displayed in the UI */
export const Formatters = {
+ /** Align cell value to the center (alias to Formatters.center) */
+ alignCenter: centerFormatter,
+
+ /** Align cell value to the right */
+ alignRight: alignRightFormatter,
+
/**
* Takes an array of complex objects converts it to a comma delimited string.
* Requires to pass an array of "propertyNames" in the column definition the generic "params" property
@@ -53,6 +61,9 @@ export const Formatters = {
/** boostrap dropdown formatter */
bsDropdown: bsDropdownFormatter,
+ /** Center a text value horizontally */
+ center: centerFormatter,
+
/** When value is filled (true), it will display a checkbox Unicode icon */
checkbox: checkboxFormatter,