fix(Table): correctly set any possible column alignment

ISSUES CLOSED: #2066
GetTerminus · Mar 6, 2020 · 954291b · 954291b
1 parent c307664
commit 954291b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/projects/library/table/src/cell.ts b/projects/library/table/src/cell.ts
@@ -60,7 +60,7 @@ export function setColumnAlignment(column: TsColumnDefDirective, renderer: Rende
         + `See "TsTableColumnAlignment" type for available options.`);
     }
 
-    renderer.addClass(elementRef.nativeElement, 'ts-cell--align-right');
+    renderer.addClass(elementRef.nativeElement, `ts-cell--align-${column.alignment}`);
   }
 }
 

diff --git a/projects/library/table/src/table.component.scss b/projects/library/table/src/table.component.scss
@@ -122,6 +122,14 @@
         justify-content: flex-end;
       }
     }
+
+    &--align-left {
+      text-align: left;
+    }
+
+    &--align-center {
+      text-align: center;
+    }
   }
 
   // Body cell

diff --git a/projects/library/table/src/table.component.spec.ts b/projects/library/table/src/table.component.spec.ts
@@ -181,9 +181,12 @@ describe(`TsTableComponent`, function() {
     });
 
     test(`should add the text-align class`, () => {
-      const column = fixture.nativeElement.querySelector('.ts-cell.ts-column-column_a');
-
-      expect(column.classList).toContain('ts-cell--align-right');
+      const columnA = fixture.nativeElement.querySelector('.ts-cell.ts-column-column_a');
+      const columnB = fixture.nativeElement.querySelector('.ts-cell.ts-column-column_b');
+      const columnC = fixture.nativeElement.querySelector('.ts-cell.ts-column-column_c');
+      expect(columnA.classList).toContain('ts-cell--align-left');
+      expect(columnB.classList).toContain('ts-cell--align-center');
+      expect(columnC.classList).toContain('ts-cell--align-right');
     });
 
     test(`should NOT add the text-align style if alignment is not provided`, () => {

diff --git a/projects/library/table/testing/src/test-components.ts b/projects/library/table/testing/src/test-components.ts
@@ -10,7 +10,8 @@ import {
 import {
   TsTableColumnsChangeEvent,
   TsTableComponent,
-  TsTableDataSource, TsTableDensity,
+  TsTableDataSource,
+  TsTableDensity,
   TsTableModule,
 } from '@terminus/ui/table';
 
@@ -164,12 +165,12 @@ export class ArrayDataSourceTableApp {
         <td ts-cell *tsCellDef="let row">{{ row.a }}</td>
       </ng-container>
 
-      <ng-container tsColumnDef="column_b">
+      <ng-container tsColumnDef="column_b" alignment="center">
         <th ts-header-cell *tsHeaderCellDef>Column B</th>
         <td ts-cell *tsCellDef="let row">{{ row.b }}</td>
       </ng-container>
 
-      <ng-container tsColumnDef="column_c">
+      <ng-container tsColumnDef="column_c" alignment="right">
         <th ts-header-cell *tsHeaderCellDef>Column C</th>
         <td ts-cell *tsCellDef="let row">{{ row.c }}</td>
       </ng-container>
-Original file line number
+Diff line change
@@ Expand Up @@
             + `See "TsTableColumnAlignment" type for available options.`);
         }
-        renderer.addClass(elementRef.nativeElement, 'ts-cell--align-right');
+        renderer.addClass(elementRef.nativeElement, `ts-cell--align-${column.alignment}`);
       }
     }
@@ Expand Down @@