feat(Table): support compact density

Now supporting two density settings: `comfy` and `compact`

ISSUES CLOSED: #1676

demo/app/components/components.component.ts

@@ -1,12 +1,14 @@
 import {
   Component,
+  OnDestroy,
   OnInit,
   VERSION as NG_VERSION,
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { VERSION as MAT_VERSION } from '@angular/material';
 import {
-  NavigationEnd, Route,
+  NavigationEnd,
+  Route,
   Router,
   Routes,
 } from '@angular/router';
@@ -17,11 +19,12 @@ import {
 import { TsSelectionListChange } from '@terminus/ui/selection-list';
 import { VERSION as UI_VERSION } from '@terminus/ui/utilities';
 import {
-  BehaviorSubject, Observable,
+  BehaviorSubject,
+  Observable,
 } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { orderArrayByProperty } from './../utilities/orderArrayByProperty';
+import { orderArrayByProperty } from '../utilities/orderArrayByProperty';
 import { componentsList } from './components.constant';
 
 
@@ -30,7 +33,7 @@ import { componentsList } from './components.constant';
   templateUrl: './components.component.html',
   styleUrls: ['./components.component.scss'],
 })
-export class ComponentsComponent implements OnInit {
+export class ComponentsComponent implements OnInit, OnDestroy {
   public components = orderArrayByProperty(componentsList, 'path');
   public path = '';
   public uiVersion = UI_VERSION;

demo/app/components/table/table.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="space-between center">
+<div fxLayout="row" fxLayoutAlign="space-between center" tsVerticalSpacing>
   <div style="font-size: 12px;">
     <p>
       To get around GitHub rate limiting, we cache response data by default.
@@ -14,6 +14,16 @@
 
       <button (click)="clearCachedData()">Clear cached GitHub data</button>
     </div>
+
+    <div>
+      <label>
+        Table density:
+        <select name="density" id="density" [(ngModel)]="density">
+          <option value="comfy">Comfy</option>
+          <option value="compact">Compact</option>
+        </select>
+      </label>
+    </div>
   </div>
 
   <span fxFlex></span>
@@ -57,7 +67,9 @@
 
 
 <div class="example-container">
-  <table ts-table
+  <table
+    ts-table
+    [density]="density"
     [dataSource]="dataSource"
     [columns]="visibleColumns"
     (columnsChange)="columnsChange($event)"
@@ -85,7 +97,7 @@
       </td>
     </ng-container>
 
-    <ng-container tsColumnDef="comments">
+    <ng-container tsColumnDef="comments" alignment="right">
       <th ts-header-cell *tsHeaderCellDef>
         Comments
       </th>

demo/app/components/table/table.component.ts

@@ -26,7 +26,7 @@ import {
   TsColumn,
   TsTableColumnsChangeEvent,
   TsTableComponent,
-  TsTableDataSource,
+  TsTableDataSource, TsTableDensity,
 } from '@terminus/ui/table';
 import {
   merge,
@@ -155,6 +155,7 @@ export class TableComponent implements AfterViewInit {
   public exampleDatabase!: ExampleHttpDao;
   public dataSource = new TsTableDataSource<GithubIssue>();
   public resultsLength = 0;
+  public density: TsTableDensity = 'comfy';
 
   /**
    * Return all visible columns

terminus-ui/table/src/table.component.md

@@ -18,6 +18,7 @@
 - [Sticky column](#sticky-column)
   - [Sticky column at end](#sticky-column-at-end)
 - [Re-orderable columns](#re-orderable-columns)
+- [Density](#density)
 - [Events](#events)
   - [Table](#table)
   - [Cell](#cell)
@@ -472,6 +473,17 @@ export class TableComponent {
 ```
 
 
+## Density
+
+The table supports two density settings: `comfy` (default) & `compact`.
+
+```html
+<table ts-table density="compact">
+  ...
+</table>
+```
+
+
 ## Events
 
 ### Table

terminus-ui/table/src/table.component.scss

@@ -21,6 +21,7 @@
   $primary: color(primary);
   --drop-bg: #{desaturate(lighten($primary, 66%), 70%)};
   --z-index-base-context: 1;
+  --cell-padding: #{spacing(default)};
   // Must be greater than 40 as that is the length of the generated z-indexes for header cells
   --sticky-end-z: 50;
   @include reset;
@@ -34,6 +35,10 @@
   max-width: 100%;
   overflow: scroll;
 
+  &.ts-table--compact {
+    --cell-padding: #{spacing(small, 2)};
+  }
+
   // Class added to all sticky-end cells
   .ts-table__column--sticky-end {
     // For the last sticky cell of a row, hide the overflow so that the resize grabber doesn't create extra space past the final cell.
@@ -114,7 +119,7 @@
   .ts-cell {
     background-color: var(--table-bg);
     overflow: hidden;
-    padding: spacing(default);
+    padding: var(--cell-padding);
     text-overflow: ellipsis;
     transition: background-color 200ms ease-out;
     white-space: nowrap;
@@ -128,7 +133,7 @@
   .ts-header-cell {
     background-color: var(--header-bg);
     border-color: var(--header-border-color);
-    padding: spacing(default);
+    padding: var(--cell-padding);
 
     // Class added when the column is sorted
     &.ts-sort-header-sorted {

terminus-ui/table/src/table.component.spec.ts

@@ -316,4 +316,22 @@ describe(`TsTableComponent`, function() {
 
   });
 
+  describe(`density`, () => {
+
+    test(`should be able to change the density of the table spacing`, () => {
+      const fixture = createComponent(testComponents.TableApp, undefined, [TsTableModule]);
+      fixture.detectChanges();
+      const tableElement = fixture.nativeElement.querySelector('.ts-table');
+      expect(tableElement.classList).toContain('ts-table--comfy');
+      expect(tableElement.classList).not.toContain('ts-table--compact');
+
+      fixture.componentInstance.density = 'compact';
+      fixture.detectChanges();
+
+      expect(tableElement.classList).not.toContain('ts-table--comfy');
+      expect(tableElement.classList).toContain('ts-table--compact');
+    });
+
+  });
+
 });

terminus-ui/table/src/table.component.ts

@@ -57,6 +57,14 @@ export interface TsColumn {
   [key: string]: any;
 }
 
+/**
+ * The possible table density settings
+ */
+export type TsTableDensity
+  = 'comfy'
+  | 'compact'
+;
+
 /**
  * Default column width.
  *
@@ -119,7 +127,11 @@ export class TsTableColumnsChangeEvent {
   selector: 'ts-table, table[ts-table]',
   template: CDK_TABLE_TEMPLATE,
   styleUrls: ['./table.component.scss'],
-  host: { class: 'ts-table' },
+  host: {
+    'class': 'ts-table',
+    '[class.ts-table--comfy]': 'density === "comfy"',
+    '[class.ts-table--compact]': 'density === "compact"',
+  },
   providers: [{
     provide: CdkTable,
     useExisting: TsTableComponent,
@@ -212,6 +224,12 @@ export class TsTableComponent<T = any> extends CdkTable<T> implements OnInit, Af
   }
   private _columns: TsColumn[] = [];
 
+  /**
+   * Define the density of the cells
+   */
+  @Input()
+  public density: TsTableDensity = 'comfy';
+
   /**
    * Emit when a column is resized
    *

terminus-ui/table/testing/src/test-components.ts

@@ -10,7 +10,7 @@ import {
 import {
   TsTableColumnsChangeEvent,
   TsTableComponent,
-  TsTableDataSource,
+  TsTableDataSource, TsTableDensity,
   TsTableModule,
 } from '@terminus/ui/table';
 
@@ -25,6 +25,7 @@ import {
     <table
       ts-table
       [dataSource]="dataSource"
+      [density]="density"
       [columns]="columns"
       (columnsChange)="columnsChanged($event)"
       #myTable="tsTable"
@@ -57,7 +58,7 @@ import {
 export class TableApp {
   @ViewChild(TsTableComponent, { static: true })
   public table!: TsTableComponent<TestData>;
-
+  public density: TsTableDensity = 'comfy';
   public dataSource: FakeDataSource | null = new FakeDataSource();
   public columnsToRender = ['column_a', 'column_b', 'column_c'];
   public columns = this.columnsToRender.map(c => ({