feat(formatters): add AlignRight and AlignCenter Formatters

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('<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, {});
+
+    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, {});
+    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, {});
+    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, {});
+    expect(output).toBe('<div style="float: right">false</div>');
+  });
+});

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('<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, {});
+
+    expect(output1).toBe('<center></center>');
+    expect(output2).toBe('<center></center>');
+  });
+
+
+  it('should return a string all in uppercase', () => {
+    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, {});
+    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, {});
+    expect(output).toBe('<center>false</center>');
+  });
+});

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;
 

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');

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 `<div style="float: right">${outputValue}</div>`;
+};

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 ? `<b>${value}</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 `<center>${outputValue}</center>`;
+};

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,