Skip to content

Commit

Permalink
feat(Table): now supports pinning
Browse files Browse the repository at this point in the history 
header and/or column
  • Loading branch information
@shani-terminus @benjamincharity
shani-terminus authored and benjamincharity committed Oct 25, 2019
1 parent efc3dea commit dd69833
Show file tree
Hide file tree
Showing 15 changed files with 719 additions and 588 deletions.
234 changes: 114 additions & 120 deletions demo/app/components/table/table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,123 +14,117 @@
</div>


<ts-card style="height: 600px;">
<div fxLayout="column" style="height: 100%;">
<ts-table
[dataSource]="dataSource"
tsSort
tsVerticalSpacing
fxFlex
>

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

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

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

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

<ng-container tsColumnDef="body">
<ts-header-cell *tsHeaderCellDef>
Body
</ts-header-cell>
<ts-cell *tsCellDef="let item">
<span [innerHTML]="item.body"></span>
</ts-cell>
</ng-container>

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

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

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

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

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

<ts-header-row *tsHeaderRowDef="displayedColumns">
</ts-header-row>

<ts-row *tsRowDef="let row; columns: displayedColumns;">
</ts-row>

</ts-table>


<div fxLayout="row" fxLayoutAlign="end center">
<ts-paginator
[totalRecords]="resultsLength"
recordCountTooHighMessage="Please refine your filters."
(pageSelect)="onPageSelect($event)"
(recordsPerPageChange)="perPageChange($event)"
></ts-paginator>
</div>
</div>
</ts-card>
<div class="example-container">
<ts-table
[dataSource]="dataSource"
tsSort
tsVerticalSpacing
>

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

<ng-container tsColumnDef="updated" noWrap="true" minWidth="200px" sticky>
<ts-header-cell *tsHeaderCellDef ts-sort-header>
Updated
</ts-header-cell>
<ts-cell *tsCellDef="let item">
{{ item.updated_at | date:"shortDate" }}
</ts-cell>
</ng-container>

<ng-container tsColumnDef="number" noWrap="true" minWidth="100px">
<ts-header-cell *tsHeaderCellDef>
Number
</ts-header-cell>
<ts-cell *tsCellDef="let item">
{{ item.number }}
</ts-cell>
</ng-container>

<ng-container tsColumnDef="title" minWidth="400px">
<ts-header-cell *tsHeaderCellDef>
Title
</ts-header-cell>
<ts-cell *tsCellDef="let item">
{{ item.title }}
</ts-cell>
</ng-container>

<ng-container tsColumnDef="body" minWidth="500px">
<ts-header-cell *tsHeaderCellDef>
Body
</ts-header-cell>
<ts-cell *tsCellDef="let item">
<span [innerHTML]="item.body"></span>
</ts-cell>
</ng-container>

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

<ng-container tsColumnDef="comments" noWrap="true" alignment="right" minWidth="200px">
<ts-header-cell *tsHeaderCellDef ts-sort-header>
Comments
</ts-header-cell>
<ts-cell *tsCellDef="let item">
{{ item.comments }}
</ts-cell>
</ng-container>

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

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

<ng-container tsColumnDef="id" minWidth="200px" stickyEnd>
<ts-header-cell *tsHeaderCellDef>
ID
</ts-header-cell>
<ts-cell *tsCellDef="let item">
{{ item.id }},
</ts-cell>
</ng-container>

<ts-header-row *tsHeaderRowDef="displayedColumns; sticky: true"></ts-header-row>

<ts-row *tsRowDef="let row; columns: displayedColumns;">
</ts-row>

</ts-table>
</div>

<ts-paginator
[totalRecords]="resultsLength"
recordCountTooHighMessage="Please refine your filters."
(pageSelect)="onPageSelect($event)"
(recordsPerPageChange)="perPageChange($event)"
></ts-paginator>

4 changes: 4 additions & 0 deletions demo/app/components/table/table.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.example-container {
height: 400px;
overflow: auto;
}
11 changes: 6 additions & 5 deletions demo/app/components/table/table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,19 +105,20 @@ export class ExampleHttpDao {
@Component({
selector: 'demo-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements AfterViewInit {
allColumns = COLUMNS_SOURCE_GITHUB.slice(0);
displayedColumns: string[] = [
'updated',
'number',
'state',
'title',
'labels',
'updated',
'comments',
'assignee',
'id',
'number',
'labels',
'created',
'id',
'body',
];
exampleDatabase!: ExampleHttpDao;
dataSource: TsTableDataSource<GithubIssue> = new TsTableDataSource();
Expand Down
38 changes: 32 additions & 6 deletions terminus-ui/table/src/cell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,21 @@ export class TsHeaderCellDefDirective extends CdkHeaderCellDef {}
},
})
export class TsHeaderCellDirective extends CdkHeaderCell {
constructor(columnDef: CdkColumnDef, elementRef: ElementRef) {
constructor(
columnDef: CdkColumnDef,
elementRef: ElementRef,
public renderer: Renderer2,
) {
super(columnDef, elementRef);
elementRef.nativeElement.classList.add(`ts-column-${columnDef.cssClassFriendlyName}`);

// tslint:disable-next-line no-any
const column: any = columnDef;

// Set inline style for min-width if passed in
if (column.minWidth) {
renderer.setStyle(elementRef.nativeElement, 'flex-basis', column.minWidth);
}
}
}

Expand Down Expand Up @@ -110,7 +122,7 @@ export class TsCellDirective extends CdkCell {

// Set inline style for min-width if passed in
if (column.minWidth) {
renderer.setStyle(elementRef.nativeElement, 'minWidth', column.minWidth);
renderer.setStyle(elementRef.nativeElement, 'flex-basis', column.minWidth);
}

// Skip the following in or to maintain backward compatibility with cells that do not use alignment
Expand All @@ -136,10 +148,12 @@ export class TsCellDirective extends CdkCell {
*/
@Directive({
selector: '[tsColumnDef]',
providers: [{
provide: CdkColumnDef,
useExisting: TsColumnDefDirective,
}],
providers: [
{
provide: CdkColumnDef,
useExisting: TsColumnDefDirective,
},
],
})
export class TsColumnDefDirective extends CdkColumnDef {
// NOTE(B$): We must rename here so that the property matches the extended CdkColumnDef class
Expand Down Expand Up @@ -168,4 +182,16 @@ export class TsColumnDefDirective extends CdkColumnDef {
*/
@Input()
public alignment: TsTableColumnAlignment | undefined;

/**
* Define stickiness for the column
*/
@Input()
public sticky = false;

/**
* Define if a column should stick to the end
*/
@Input()
public stickyEnd = false;
}
Loading

0 comments on commit dd69833

Please sign in to comment.