feat(Table): column widths can be defined by consumer

BREAKING CHANGE: - `TsColumn` definitions must be passed to `TsTable`. - `minWidth` support has been removed in favor of `TsColumn` definitions. ISSUES CLOSED: #1617
GetTerminus · Oct 25, 2019 · 2dc796c · 2dc796c
1 parent 9306553
commit 2dc796c
Show file tree

Hide file tree

Showing 15 changed files with 450 additions and 337 deletions.
diff --git a/demo/app/components/table/table.component.html b/demo/app/components/table/table.component.html
@@ -17,20 +17,22 @@
 <div class="example-container">
   <ts-table
     [dataSource]="dataSource"
+    [columns]="resizableColumns"
     tsSort
     tsVerticalSpacing
+    #myTable="tsTable"
   >
 
-    <ng-container tsColumnDef="created" noWrap="true" minWidth="200px">
-      <ts-header-cell *tsHeaderCellDef ts-sort-header>
-        Created
+    <ng-container tsColumnDef="title" sticky>
+      <ts-header-cell *tsHeaderCellDef>
+        Title
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        {{ item.created_at | date:"shortDate" }}
+        {{ item.title }}
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="updated" noWrap="true" minWidth="200px" sticky>
+    <ng-container tsColumnDef="updated" noWrap="true">
       <ts-header-cell *tsHeaderCellDef ts-sort-header>
         Updated
       </ts-header-cell>
@@ -39,92 +41,105 @@
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="number" noWrap="true" minWidth="100px">
-      <ts-header-cell *tsHeaderCellDef>
-        Number
+    <ng-container tsColumnDef="comments" noWrap="true">
+      <ts-header-cell *tsHeaderCellDef ts-sort-header>
+        Comments
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        {{ item.number }}
+        {{ item.comments }}
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="title" minWidth="400px">
-      <ts-header-cell *tsHeaderCellDef>
-        Title
+    <ng-container tsColumnDef="assignee" noWrap="true">
+      <ts-header-cell *tsHeaderCellDef ts-sort-header>
+        Assignee
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        {{ item.title }}
+        {{ item.login }}
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="body" minWidth="500px">
+    <ng-container tsColumnDef="number" noWrap="true" alignment="right">
       <ts-header-cell *tsHeaderCellDef>
-        Body
+        Number
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        <span [innerHTML]="item.body"></span>
+        {{ item.number }}
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="state" noWrap="true" minWidth="200px">
+    <ng-container tsColumnDef="labels">
       <ts-header-cell *tsHeaderCellDef>
-        State
+        Labels
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        {{ item.state }}
+        <span *ngFor="let l of item.labels">
+          {{ l.name }},
+        </span>
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="comments" noWrap="true" alignment="right" minWidth="200px">
+    <ng-container tsColumnDef="created" noWrap="true">
       <ts-header-cell *tsHeaderCellDef ts-sort-header>
-        Comments
+        Created
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        {{ item.comments }}
+        {{ item.created_at | date:"shortDate" }}
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="assignee" noWrap="true" minWidth="200px">
-      <ts-header-cell *tsHeaderCellDef ts-sort-header>
-        Assignee
+    <ng-container tsColumnDef="body">
+      <ts-header-cell *tsHeaderCellDef>
+        Body
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        {{ item.login }}
+        <span class="truncate" [innerHTML]="sanitize(item.body)"></span>
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="labels" minWidth="200px">
+    <ng-container tsColumnDef="state" noWrap="true">
       <ts-header-cell *tsHeaderCellDef>
-        Labels
+        State
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        <span *ngFor="let l of item.labels">
-          {{ l.name }},
-        </span>
+        {{ item.state }}
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="id" minWidth="200px" stickyEnd>
+    <ng-container tsColumnDef="id" alignment="right">
       <ts-header-cell *tsHeaderCellDef>
         ID
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
-        {{ item.id }},
+        {{ item.id }}
+      </ts-cell>
+    </ng-container>
+
+    <ng-container tsColumnDef="html_url" noWrap="true" stickyEnd>
+      <ts-header-cell *tsHeaderCellDef>
+        View
+      </ts-header-cell>
+      <ts-cell *tsCellDef="let item">
+        <a href="{{ item.html_url }}">
+          <ts-icon>open_in_new</ts-icon>
+        </a>
       </ts-cell>
     </ng-container>
 
-    <ts-header-row *tsHeaderRowDef="displayedColumns; sticky: true"></ts-header-row>
+    <ts-header-row *tsHeaderRowDef="myTable.columnNames; sticky: true"></ts-header-row>
 
-    <ts-row *tsRowDef="let row; columns: displayedColumns;">
+    <ts-row *tsRowDef="let row; columns: myTable.columnNames;">
     </ts-row>
 
   </ts-table>
 </div>
 
-<ts-paginator
-  [totalRecords]="resultsLength"
-  recordCountTooHighMessage="Please refine your filters."
-  (pageSelect)="onPageSelect($event)"
-  (recordsPerPageChange)="perPageChange($event)"
-></ts-paginator>
+<div fxLayout="row" fxLayoutAlign="end start">
+  <ts-paginator
+    [totalRecords]="resultsLength"
+    recordCountTooHighMessage="Please refine your filters."
+    (pageSelect)="onPageSelect($event)"
+    (recordsPerPageChange)="perPageChange($event)"
+  ></ts-paginator>
+</div>
 
diff --git a/demo/app/components/table/table.component.scss b/demo/app/components/table/table.component.scss
@@ -6,3 +6,10 @@
   overflow: auto;
   @include visible-scrollbars;
 }
+
+.truncate {
+  display: block;
+  max-height: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/demo/app/components/table/table.component.ts b/demo/app/components/table/table.component.ts
@@ -4,12 +4,16 @@ import {
   Component,
   ViewChild,
 } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import {
   TsPaginatorComponent,
   TsPaginatorMenuItem,
 } from '@terminus/ui/paginator';
 import { TsSortDirective } from '@terminus/ui/sort';
-import { TsTableDataSource } from '@terminus/ui/table';
+import {
+  TsColumn,
+  TsTableDataSource,
+} from '@terminus/ui/table';
 import {
   merge,
   Observable,
@@ -76,10 +80,14 @@ const COLUMNS_SOURCE_GITHUB = [
 
 export interface GithubApi {
   items: GithubIssue[];
+  // NOTE: Format controlled by GitHub
+  // eslint-disable-next-line camelcase
   total_count: number;
 }
 
 export interface GithubIssue {
+  // NOTE: Format controlled by GitHub
+  // eslint-disable-next-line camelcase
   created_at: string;
   number: string;
   state: string;
@@ -92,11 +100,10 @@ export interface GithubIssue {
 export class ExampleHttpDao {
   constructor(private http: HttpClient) {}
 
-  getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable<GithubApi> {
-    const href = 'https://api.github.com/search/issues';
+  public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable<GithubApi> {
+    const href = `https://api.github.com/search/issues`;
     const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;
     const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;
-
     return this.http.get<GithubApi>(`${requestUrl}${requestParams}`);
   }
 }
@@ -108,35 +115,61 @@ export class ExampleHttpDao {
   styleUrls: ['./table.component.scss'],
 })
 export class TableComponent implements AfterViewInit {
-  allColumns = COLUMNS_SOURCE_GITHUB.slice(0);
-  displayedColumns: string[] = [
+  public allColumns = COLUMNS_SOURCE_GITHUB.slice(0);
+  public displayedColumns = [
     'title',
     'updated',
     'comments',
     'assignee',
     'number',
     'labels',
     'created',
-    'id',
     'body',
+    'id',
+    'html_url',
+  ];
+  public exampleDatabase!: ExampleHttpDao;
+  public dataSource = new TsTableDataSource<GithubIssue>();
+  public resultsLength = 0;
+  public resizableColumns: TsColumn[] = [
+    {
+      name: 'title',
+      width: '400px',
+    },
+    { name: 'updated' },
+    { name: 'comments' },
+    {
+      name: 'assignee',
+      width: '160px',
+    },
+    { name: 'number' },
+    {
+      name: 'labels',
+      width: '260px',
+    },
+    { name: 'created' },
+    { name: 'id' },
+    {
+      name: 'body',
+      width: '500px',
+    },
+    { name: 'html_url' },
   ];
-  exampleDatabase!: ExampleHttpDao;
-  dataSource: TsTableDataSource<GithubIssue> = new TsTableDataSource();
-  resultsLength = 0;
 
-  @ViewChild(TsSortDirective, {static: true})
-  sort!: TsSortDirective;
+  @ViewChild(TsSortDirective, { static: true })
+  public sort!: TsSortDirective;
 
-  @ViewChild(TsPaginatorComponent, {static: true})
-  paginator!: TsPaginatorComponent;
+  @ViewChild(TsPaginatorComponent, { static: true })
+  public readonly paginator!: TsPaginatorComponent;
 
 
   constructor(
+    private domSanitizer: DomSanitizer,
     private http: HttpClient,
   ) {}
 
 
-  ngAfterViewInit(): void {
+  public ngAfterViewInit(): void {
     this.exampleDatabase = new ExampleHttpDao(this.http);
 
     // If the user changes the sort order, reset back to the first page.
@@ -171,12 +204,16 @@ export class TableComponent implements AfterViewInit {
   }
 
 
-  perPageChange(e: number): void {
+  public perPageChange(e: number): void {
     console.log('DEMO records per page changed: ', e);
   }
 
-  onPageSelect(e: TsPaginatorMenuItem): void {
+  public onPageSelect(e: TsPaginatorMenuItem): void {
     console.log('DEMO page selected: ', e);
   }
 
+  public sanitize(content): SafeHtml {
+    return this.domSanitizer.bypassSecurityTrustHtml(content);
+  }
+
 }
diff --git a/demo/app/components/table/table.module.ts b/demo/app/components/table/table.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { TsCardModule } from '@terminus/ui/card';
+import { TsIconModule } from '@terminus/ui/icon';
 import { TsOptionModule } from '@terminus/ui/option';
 import { TsPaginatorModule } from '@terminus/ui/paginator';
 import { TsSelectModule } from '@terminus/ui/select';
@@ -21,6 +22,7 @@ import { TableComponent } from './table.component';
     FormsModule,
     TableRoutingModule,
     TsCardModule,
+    TsIconModule,
     TsOptionModule,
     TsPaginatorModule,
     TsSelectModule,

diff --git a/terminus-ui/sort/src/sort-header.component.ts b/terminus-ui/sort/src/sort-header.component.ts
@@ -13,10 +13,7 @@ import {
   Optional,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  CanDisable,
-  mixinDisabled,
-} from '@angular/material/core';
+import { CanDisable } from '@angular/material/core';
 import { coerceBooleanProperty } from '@terminus/ngx-tools/coercion';
 import { isBoolean } from '@terminus/ngx-tools/type-guards';
 import { untilComponentDestroyed } from '@terminus/ngx-tools/utilities';
@@ -48,12 +45,10 @@ import {
  * <example-url>https://getterminus.github.io/ui-demos-release/components/table</example-url>
  */
 @Component({
-  // NOTE(B$): This component needs to be added to another component so we need a non-element
-  // selector
+  // NOTE: This component needs to be added to another component so we need a non-element selector
   // tslint:disable: component-selector
   selector: '[ts-sort-header]',
   // tslint:enable: component-selector
-  exportAs: 'tsSortHeader',
   templateUrl: './sort-header.component.html',
   styleUrls: ['./sort-header.component.scss'],
   host: {
@@ -63,8 +58,6 @@ import {
     '(click)': '_handleClick()',
   },
   preserveWhitespaces: false,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
   // NOTE: @Inputs are defined here rather than using decorators since we are extending the @Inputs of the base class
   // tslint:disable-next-line:no-inputs-metadata-property
   inputs: ['disabled'],
@@ -74,6 +67,9 @@ import {
     tsSortAnimations.rightPointer,
     tsSortAnimations.indicatorToggle,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'tsSortHeader',
 })
 export class TsSortHeaderComponent implements TsSortableItem, CanDisable, OnInit, OnDestroy  {
   public disabled = false;

diff --git a/terminus-ui/table/package.json b/terminus-ui/table/package.json
@@ -1,7 +1,10 @@
 {
   "ngPackage": {
     "lib": {
-      "entryFile": "src/public-api.ts"
+      "entryFile": "src/public-api.ts",
+      "umdModuleIds": {
+        "@terminus/ngx-tools/type-guards": "terminus.ngxTools.type-guards"
+      }
     }
   }
 }