Skip to content

Commit

Permalink
feat(Table): support for multiple headers
Browse files Browse the repository at this point in the history 
Moved back to native HTML table

BREAKING CHANGE:
Moved to native HTML table

ISSUES CLOSED: #1675
  • Loading branch information
@benjamincharity
benjamincharity committed Oct 24, 2019
1 parent e78f8c0 commit 05873b6
Show file tree
Hide file tree
Showing 13 changed files with 325 additions and 378 deletions.
126 changes: 65 additions & 61 deletions demo/app/components/table/table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@
<br>
Clear cached data and/or disable below.
</p>
<label style="margin-right: 1rem;">
Use cached data:
<input type="checkbox" [(ngModel)]="useCachedData">
</label>
<button (click)="clearCachedData()">Clear cached GitHub data</button>

<div>
<label style="margin-right: 1rem;">
Use cached data:
<input type="checkbox" [(ngModel)]="useCachedData">
</label>

<button (click)="clearCachedData()">Clear cached GitHub data</button>
</div>
</div>

<span fxFlex></span>
Expand Down Expand Up @@ -53,7 +57,7 @@


<div class="example-container">
<ts-table
<table ts-table
[dataSource]="dataSource"
[columns]="visibleColumns"
(columnsChange)="columnsChange($event)"
Expand All @@ -63,112 +67,112 @@
#myTable="tsTable"
>

<ng-container tsColumnDef="title">
<ts-header-cell *tsHeaderCellDef sticky>
<ng-container tsColumnDef="title" sticky>
<th ts-header-cell *tsHeaderCellDef>
Title
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.title }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="updated" noWrap="true" alignment="right">
<ts-header-cell *tsHeaderCellDef ts-sort-header>
<ng-container tsColumnDef="updated" alignment="right">
<th ts-header-cell *tsHeaderCellDef ts-sort-header>
Updated
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.updated_at | date:"shortDate" }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="comments" noWrap="true">
<ts-header-cell *tsHeaderCellDef ts-sort-header>
<ng-container tsColumnDef="comments">
<th ts-header-cell *tsHeaderCellDef>
Comments
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.comments }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="assignee" noWrap="true">
<ts-header-cell *tsHeaderCellDef ts-sort-header>
<ng-container tsColumnDef="assignee">
<th ts-header-cell *tsHeaderCellDef ts-sort-header>
Assignee
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.login }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="number" noWrap="true" alignment="right">
<ts-header-cell *tsHeaderCellDef ts-sort-header>
<ng-container tsColumnDef="number" alignment="right">
<th ts-header-cell *tsHeaderCellDef ts-sort-header>
Number
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.number }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="labels">
<ts-header-cell *tsHeaderCellDef>
<th ts-header-cell *tsHeaderCellDef>
Labels
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
<span *ngFor="let l of item.labels">
{{ l.name }},
</span>
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="created" noWrap="true">
<ts-header-cell *tsHeaderCellDef ts-sort-header>
<ng-container tsColumnDef="created">
<th ts-header-cell *tsHeaderCellDef ts-sort-header>
Created
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.created_at | date:"shortDate" }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="body">
<ts-header-cell *tsHeaderCellDef>
<th ts-header-cell *tsHeaderCellDef>
Body
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
<span class="truncate" [innerHTML]="sanitize(item.body)"></span>
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="state" noWrap="true">
<ts-header-cell *tsHeaderCellDef>
<ng-container tsColumnDef="state">
<th ts-header-cell *tsHeaderCellDef>
State
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.state }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="id" alignment="right">
<ts-header-cell *tsHeaderCellDef>
<th ts-header-cell *tsHeaderCellDef>
ID
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
{{ item.id }}
</ts-cell>
</td>
</ng-container>

<ng-container tsColumnDef="html_url" noWrap="true" stickyEnd>
<ts-header-cell *tsHeaderCellDef>
<ng-container tsColumnDef="html_url" stickyEnd>
<th ts-header-cell *tsHeaderCellDef>
View
</ts-header-cell>
<ts-cell *tsCellDef="let item">
</th>
<td ts-cell *tsCellDef="let item">
<a href="{{ item.html_url }}">
<ts-icon theme="accent">open_in_new</ts-icon>
</a>
</ts-cell>
</td>
</ng-container>

<ts-header-row *tsHeaderRowDef="myTable.columnNames; sticky: true"></ts-header-row>
<ts-row *tsRowDef="let row; columns: myTable.columnNames;"></ts-row>
</ts-table>
<tr ts-header-row *tsHeaderRowDef="myTable.columnNames; sticky: true"></tr>
<tr ts-row *tsRowDef="let row; columns: myTable.columnNames;"></tr>
</table>
</div>

<div fxLayout="row" fxLayoutAlign="end start">
Expand Down
14 changes: 8 additions & 6 deletions demo/app/components/table/table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import {
} from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import {
AfterViewInit, ChangeDetectorRef,
AfterViewInit,
ChangeDetectorRef,
Component,
ViewChild,
} from '@angular/core';
Expand Down Expand Up @@ -63,6 +64,7 @@ export interface GithubIssue {
number: string;
state: string;
title: string;
comments: string;
}

/**
Expand Down Expand Up @@ -94,6 +96,11 @@ export class TableComponent implements AfterViewInit {
width: '400px',
control: new FormControl(true),
},
{
display: 'Comments',
name: 'comments',
control: new FormControl(true),
},
{
display: 'Number',
name: 'number',
Expand All @@ -120,11 +127,6 @@ export class TableComponent implements AfterViewInit {
width: '260px',
control: new FormControl(true),
},
{
display: 'Comments',
name: 'comments',
control: new FormControl(true),
},
{
display: 'Assignee',
name: 'assignee',
Expand Down
24 changes: 12 additions & 12 deletions terminus-ui/sort/src/sort.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,22 +174,22 @@ class CdkTableTsSortApp {

@Component({
template: `
<ts-table [dataSource]="dataSource" tsSort>
<table ts-table [dataSource]="dataSource" tsSort>
<ng-container tsColumnDef="column_a">
<ts-header-cell *tsHeaderCellDef #sortHeaderA ts-sort-header> Column A </ts-header-cell>
<ts-cell *tsCellDef="let row">{{ row.a }}</ts-cell>
<th ts-header-cell *tsHeaderCellDef #sortHeaderA ts-sort-header> Column A </th>
<td ts-cell *tsCellDef="let row">{{ row.a }}</td>
</ng-container>
<ng-container tsColumnDef="column_b">
<ts-header-cell *tsHeaderCellDef #sortHeaderB ts-sort-header> Column B </ts-header-cell>
<ts-cell *tsCellDef="let row">{{ row.b }}</ts-cell>
<th ts-header-cell *tsHeaderCellDef #sortHeaderB ts-sort-header> Column B </th>
<td ts-cell *tsCellDef="let row">{{ row.b }}</td>
</ng-container>
<ng-container tsColumnDef="column_c">
<ts-header-cell *tsHeaderCellDef #sortHeaderC ts-sort-header> Column C </ts-header-cell>
<ts-cell *tsCellDef="let row">{{ row.c }}</ts-cell>
<th ts-header-cell *tsHeaderCellDef #sortHeaderC ts-sort-header> Column C </th>
<td ts-cell *tsCellDef="let row">{{ row.c }}</td>
</ng-container>
<ts-header-row *tsHeaderRowDef="columnsToRender"></ts-header-row>
<ts-row *tsRowDef="let row; columns: columnsToRender"></ts-row>
</ts-table>
<tr ts-header-row *tsHeaderRowDef="columnsToRender"></tr>
<tr ts-row *tsRowDef="let row; columns: columnsToRenderrt"></tr>
</table>
`,
})
class TsTableTsSortApp {
Expand Down Expand Up @@ -290,7 +290,7 @@ describe('TsSort', () => {
cdkTableTsSortAppFixture.detectChanges();
cdkTableTsSortAppFixture.detectChanges();

const sortables = cdkTableTsSortAppComponent.tsSort.sortables;
const sortables = cdkTableTsSortAppComponent.tsSort['sortables'];
expect(sortables.size).toBe(3);
expect(sortables.has('column_a')).toBe(true);
expect(sortables.has('column_b')).toBe(true);
Expand All @@ -305,7 +305,7 @@ describe('TsSort', () => {
tsTableTsSortAppFixture.detectChanges();
tsTableTsSortAppFixture.detectChanges();

const sortables = tsTableTsSortAppComponent.tsSort.sortables;
const sortables = tsTableTsSortAppComponent.tsSort['sortables'];
expect(sortables.size).toBe(3);
expect(sortables.has('column_a')).toBe(true);
expect(sortables.has('column_b')).toBe(true);
Expand Down
23 changes: 13 additions & 10 deletions terminus-ui/table/src/cell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ import {
Output,
Renderer2,
} from '@angular/core';
import { untilComponentDestroyed } from '@terminus/ngx-tools';
import {
TsDocumentService,
TsWindowService,
} from '@terminus/ngx-tools/browser';
import { untilComponentDestroyed } from '@terminus/ngx-tools/utilities';
import { TsUILibraryError } from '@terminus/ui/utilities';
import {
fromEvent,
Expand Down Expand Up @@ -116,7 +116,7 @@ export class TsHeaderCellResizeHoverEvent {
* Header cell template container that adds the right classes and role.
*/
@Directive({
selector: 'ts-header-cell',
selector: 'ts-header-cell, th[ts-header-cell]',
host: {
class: 'ts-header-cell',
role: 'columnheader',
Expand Down Expand Up @@ -183,7 +183,11 @@ export class TsHeaderCellDirective extends CdkHeaderCell implements AfterViewIni

// eslint-disable-next-line no-underscore-dangle
if (columnDef._stickyEnd) {
elementRef.nativeElement.classList.add(`ts-table--sticky-end`);
elementRef.nativeElement.classList.add(`ts-table__column--sticky-end`);
}

if (columnDef.sticky) {
elementRef.nativeElement.classList.add(`ts-table__column--sticky`);
}

setColumnAlignment(this.column, renderer, elementRef);
Expand Down Expand Up @@ -301,7 +305,7 @@ export class TsHeaderCellDirective extends CdkHeaderCell implements AfterViewIni
* Cell template container that adds the right classes and role.
*/
@Directive({
selector: 'ts-cell',
selector: 'ts-cell, td[ts-cell]',
host: {
class: 'ts-cell',
role: 'gridcell',
Expand All @@ -327,16 +331,15 @@ export class TsCellDirective extends CdkCell {
// Set a custom class for each column
elementRef.nativeElement.classList.add(`ts-column-${columnDef.cssClassFriendlyName}`);

// Set the no-wrap class if needed
if (this.column.noWrap) {
elementRef.nativeElement.classList.add(`ts-column-no-wrap`);
}

setColumnAlignment(this.column, renderer, elementRef);

// eslint-disable-next-line no-underscore-dangle
if (columnDef._stickyEnd) {
elementRef.nativeElement.classList.add(`ts-table--sticky-end`);
elementRef.nativeElement.classList.add(`ts-table__column--sticky-end`);
}

if (columnDef.sticky) {
elementRef.nativeElement.classList.add(`ts-table__column--sticky`);
}

}
Expand Down
6 changes: 0 additions & 6 deletions terminus-ui/table/src/column.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@ export class TsColumnDefDirective extends CdkColumnDef {
public name!: string;
// tslint:enable: no-input-rename

/**
* Define if a column's contents should wrap when long
*/
@Input()
public noWrap = false;

/**
* Define an alignment type for the cell.
*/
Expand Down
4 changes: 2 additions & 2 deletions terminus-ui/table/src/row.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { TsTableComponent } from './table.component';
* Header template container that contains the cell outlet. Adds the right class and role.
*/
@Component({
selector: 'ts-header-row',
selector: 'ts-header-row, tr[ts-header-row]',
template: CDK_ROW_TEMPLATE,
host: {
class: 'ts-header-row',
Expand All @@ -44,7 +44,7 @@ export class TsHeaderRowComponent extends CdkHeaderRow {
* Data row template container that contains the cell outlet. Adds the right class and role.
*/
@Component({
selector: 'ts-row',
selector: 'ts-row, tr[ts-row]',
template: CDK_ROW_TEMPLATE,
host: {
class: 'ts-row',
Expand Down
Loading

0 comments on commit 05873b6

Please sign in to comment.