ngx-nested-data-table
Version:
angular master-detail table angular material style
127 lines (122 loc) • 12.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, ViewChild, Input } from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material';
import { NgxDataTableDataSource } from './ngx-data-table-datasource';
import { trigger, state, style, transition, animate, } from '@angular/animations';
export class NgxDataTableComponent {
constructor() {
this.isExpansionDetailRow = (i, row) => row.hasOwnProperty('detailRow');
}
/**
* @param {?} _data
* @return {?}
*/
set data(_data) {
if (_data) {
this.dataSource = new NgxDataTableDataSource(this.paginator, _data, this.sort);
this.displayedColumns = Object.keys(_data[0]).filter(key => key !== 'details');
}
}
/**
* expand collapse a row
* @param {?} row
* @return {?}
*/
toggleRow(row) {
if (this.expandedElement === row) {
this.expandedElement = null;
}
else {
this.expandedElement = row;
}
}
/**
* @param {?} filterValue
* @return {?}
*/
applyFilter(filterValue) {
this.dataSource.filter = filterValue;
}
}
NgxDataTableComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-data-table',
template: `<div class="mat-elevation-z8">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" class="filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
<ng-container [matColumnDef]="cols" *ngFor="let cols of displayedColumns; let i = index">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{cols}}</mat-header-cell>
<mat-cell *matCellDef="let element" [ngClass]="{'col-value': element.details === undefined}">
<!-- expand caret -->
<span *ngIf="i === 0 && element.details">
<span *ngIf="expandedElement && expandedElement[cols] === element[cols]; else plusIcon" class="expand-icon">▲</span>
<ng-template #plusIcon><span class="expand-icon">▼</span></ng-template>
</span>
<span>{{element[cols]}}</span>
</mat-cell>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let detail">
<ngx-data-table [data]="detail.element.details" class="detail-table"></ngx-data-table>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
[class.expanded]="expandedElement == row"
(click)="toggleRow(row)"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
[]="row.element == expandedElement ? 'expanded' : 'collapsed'"
style="overflow: hidden"></mat-row>
</mat-table>
<mat-paginator #paginator
[length]="dataSource?.data?.length"
[pageIndex]="0"
[pageSize]="25"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
`,
styles: [
`.detail-table {display: flex;flex-direction: column;display: block;margin: 10px;width: 100%;}
.expand-icon {color: rgba(0,0,0,.44);font-size: 12px; margin-right: 5px; cursor: pointer;}
.col-value:first-child span{margin-left: 15px;}
.mat-form-field {padding: 10px 10px 0 10px;width: calc(100% - 20px);}`
],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
state('expanded', style({ height: '*', visibility: 'visible' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
},] },
];
NgxDataTableComponent.propDecorators = {
data: [{ type: Input }],
paginator: [{ type: ViewChild, args: [MatPaginator,] }],
sort: [{ type: ViewChild, args: [MatSort,] }]
};
function NgxDataTableComponent_tsickle_Closure_declarations() {
/** @type {?} */
NgxDataTableComponent.prototype.paginator;
/** @type {?} */
NgxDataTableComponent.prototype.sort;
/** @type {?} */
NgxDataTableComponent.prototype.dataSource;
/**
* Columns displayed in the table. Columns IDs can be added, removed, or reordered.
* @type {?}
*/
NgxDataTableComponent.prototype.displayedColumns;
/** @type {?} */
NgxDataTableComponent.prototype.expandedElement;
/** @type {?} */
NgxDataTableComponent.prototype.isExpansionDetailRow;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWRhdGEtdGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LW5lc3RlZC1kYXRhLXRhYmxlLyIsInNvdXJjZXMiOlsibGliL25neC1kYXRhLXRhYmxlL25neC1kYXRhLXRhYmxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUQsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDckUsT0FBTyxFQUNMLE9BQU8sRUFDUCxLQUFLLEVBQ0wsS0FBSyxFQUNMLFVBQVUsRUFDVixPQUFPLEdBQ1IsTUFBTSxxQkFBcUIsQ0FBQztBQWtFN0IsTUFBTTs7b0NBcUJtQixDQUFDLENBQVMsRUFBRSxHQUFXLEVBQUUsRUFBRSxDQUNoRCxHQUFHLENBQUMsY0FBYyxDQUFDLFdBQVcsQ0FBQzs7Ozs7O0lBckJqQyxJQUNJLElBQUksQ0FBQyxLQUFZO1FBQ25CLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDVixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksc0JBQXNCLENBQzFDLElBQUksQ0FBQyxTQUFTLEVBQ2QsS0FBSyxFQUNMLElBQUksQ0FBQyxJQUFJLENBQ1YsQ0FBQztZQUNGLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FDbEQsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssU0FBUyxDQUN6QixDQUFDO1NBQ0g7S0FDRjs7Ozs7O0lBZUQsU0FBUyxDQUFDLEdBQUc7UUFDWCxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsZUFBZSxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDakMsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7U0FDN0I7UUFBQyxJQUFJLENBQUMsQ0FBQztZQUNOLElBQUksQ0FBQyxlQUFlLEdBQUcsR0FBRyxDQUFDO1NBQzVCO0tBQ0Y7Ozs7O0lBRUQsV0FBVyxDQUFDLFdBQW1CO1FBQzdCLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLFdBQVcsQ0FBQztLQUN0Qzs7O1lBdEdGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO2dCQUMxQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBeUNYO2dCQUNDLE1BQU0sRUFBRTtvQkFDTjs7OzBFQUdzRTtpQkFDdkU7Z0JBQ0QsVUFBVSxFQUFFO29CQUNWLE9BQU8sQ0FBQyxjQUFjLEVBQUU7d0JBQ3RCLEtBQUssQ0FDSCxXQUFXLEVBQ1gsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUMvRDt3QkFDRCxLQUFLLENBQUMsVUFBVSxFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxDQUFDLENBQUM7d0JBQ2hFLFVBQVUsQ0FDUix3QkFBd0IsRUFDeEIsT0FBTyxDQUFDLHNDQUFzQyxDQUFDLENBQ2hEO3FCQUNGLENBQUM7aUJBQ0g7YUFDRjs7O21CQUVFLEtBQUs7d0JBYUwsU0FBUyxTQUFDLFlBQVk7bUJBQ3RCLFNBQVMsU0FBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIFZpZXdDaGlsZCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdFBhZ2luYXRvciwgTWF0U29ydCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsJztcbmltcG9ydCB7IE5neERhdGFUYWJsZURhdGFTb3VyY2UgfSBmcm9tICcuL25neC1kYXRhLXRhYmxlLWRhdGFzb3VyY2UnO1xuaW1wb3J0IHtcbiAgdHJpZ2dlcixcbiAgc3RhdGUsXG4gIHN0eWxlLFxuICB0cmFuc2l0aW9uLFxuICBhbmltYXRlLFxufSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LWRhdGEtdGFibGUnLFxuICB0ZW1wbGF0ZTogYDxkaXYgY2xhc3M9XCJtYXQtZWxldmF0aW9uLXo4XCI+XG4gICAgPG1hdC1mb3JtLWZpZWxkPlxuICAgICAgPGlucHV0IG1hdElucHV0IChrZXl1cCk9XCJhcHBseUZpbHRlcigkZXZlbnQudGFyZ2V0LnZhbHVlKVwiIHBsYWNlaG9sZGVyPVwiRmlsdGVyXCIgY2xhc3M9XCJmaWx0ZXJcIj5cbiAgICA8L21hdC1mb3JtLWZpZWxkPlxuICA8bWF0LXRhYmxlICN0YWJsZSBbZGF0YVNvdXJjZV09XCJkYXRhU291cmNlXCIgbWF0U29ydCBhcmlhLWxhYmVsPVwiRWxlbWVudHNcIj5cbiAgICA8bmctY29udGFpbmVyIFttYXRDb2x1bW5EZWZdPVwiY29sc1wiICpuZ0Zvcj1cImxldCBjb2xzIG9mIGRpc3BsYXllZENvbHVtbnM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgIDxtYXQtaGVhZGVyLWNlbGwgKm1hdEhlYWRlckNlbGxEZWYgbWF0LXNvcnQtaGVhZGVyPnt7Y29sc319PC9tYXQtaGVhZGVyLWNlbGw+XG4gICAgICA8bWF0LWNlbGwgKm1hdENlbGxEZWY9XCJsZXQgZWxlbWVudFwiIFtuZ0NsYXNzXT1cInsnY29sLXZhbHVlJzogZWxlbWVudC5kZXRhaWxzID09PSB1bmRlZmluZWR9XCI+XG4gICAgICAgIDwhLS0gZXhwYW5kIGNhcmV0IC0tPlxuICAgICAgICA8c3BhbiAqbmdJZj1cImkgPT09IDAgJiYgZWxlbWVudC5kZXRhaWxzXCI+XG4gICAgICAgICAgPHNwYW4gKm5nSWY9XCJleHBhbmRlZEVsZW1lbnQgJiYgZXhwYW5kZWRFbGVtZW50W2NvbHNdID09PSBlbGVtZW50W2NvbHNdOyBlbHNlIHBsdXNJY29uXCIgY2xhc3M9XCJleHBhbmQtaWNvblwiPiYjOTY1MDs8L3NwYW4+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlICNwbHVzSWNvbj48c3BhbiBjbGFzcz1cImV4cGFuZC1pY29uXCI+JiM5NjYwOzwvc3Bhbj48L25nLXRlbXBsYXRlPlxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxzcGFuPnt7ZWxlbWVudFtjb2xzXX19PC9zcGFuPlxuICAgICAgPC9tYXQtY2VsbD5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDwhLS0gRXhwYW5kZWQgQ29udGVudCBDb2x1bW4gLSBUaGUgZGV0YWlsIHJvdyBpcyBtYWRlIHVwIG9mIHRoaXMgb25lIGNvbHVtbiAtLT5cbiAgICA8bmctY29udGFpbmVyIG1hdENvbHVtbkRlZj1cImV4cGFuZGVkRGV0YWlsXCI+XG4gICAgICA8bWF0LWNlbGwgKm1hdENlbGxEZWY9XCJsZXQgZGV0YWlsXCI+XG4gICAgICAgIDxuZ3gtZGF0YS10YWJsZSBbZGF0YV09XCJkZXRhaWwuZWxlbWVudC5kZXRhaWxzXCIgY2xhc3M9XCJkZXRhaWwtdGFibGVcIj48L25neC1kYXRhLXRhYmxlPlxuICAgICAgPC9tYXQtY2VsbD5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDxtYXQtaGVhZGVyLXJvdyAqbWF0SGVhZGVyUm93RGVmPVwiZGlzcGxheWVkQ29sdW1uc1wiPjwvbWF0LWhlYWRlci1yb3c+XG4gICAgPG1hdC1yb3cgKm1hdFJvd0RlZj1cImxldCByb3c7IGNvbHVtbnM6IGRpc3BsYXllZENvbHVtbnM7XCJcbiAgICAgICAgICAgICAgW2NsYXNzLmV4cGFuZGVkXT1cImV4cGFuZGVkRWxlbWVudCA9PSByb3dcIlxuICAgICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlUm93KHJvdylcIj48L21hdC1yb3c+XG4gICAgPG1hdC1yb3cgKm1hdFJvd0RlZj1cImxldCByb3c7IGNvbHVtbnM6IFsnZXhwYW5kZWREZXRhaWwnXTsgd2hlbjogaXNFeHBhbnNpb25EZXRhaWxSb3dcIlxuICAgIFtAZGV0YWlsRXhwYW5kXT1cInJvdy5lbGVtZW50ID09IGV4cGFuZGVkRWxlbWVudCA/ICdleHBhbmRlZCcgOiAnY29sbGFwc2VkJ1wiXG4gICAgc3R5bGU9XCJvdmVyZmxvdzogaGlkZGVuXCI+PC9tYXQtcm93PlxuICA8L21hdC10YWJsZT5cblxuICA8bWF0LXBhZ2luYXRvciAjcGFnaW5hdG9yXG5cbiAgICBbbGVuZ3RoXT1cImRhdGFTb3VyY2U/LmRhdGE/Lmxlbmd0aFwiXG4gICAgW3BhZ2VJbmRleF09XCIwXCJcbiAgICBbcGFnZVNpemVdPVwiMjVcIlxuICAgIFtwYWdlU2l6ZU9wdGlvbnNdPVwiWzI1LCA1MCwgMTAwLCAyNTBdXCI+XG4gIDwvbWF0LXBhZ2luYXRvcj5cbjwvZGl2PlxuYCxcbiAgc3R5bGVzOiBbXG4gICAgYC5kZXRhaWwtdGFibGUge2Rpc3BsYXk6IGZsZXg7ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtkaXNwbGF5OiBibG9jazttYXJnaW46IDEwcHg7d2lkdGg6IDEwMCU7fVxuICAgIC5leHBhbmQtaWNvbiB7Y29sb3I6IHJnYmEoMCwwLDAsLjQ0KTtmb250LXNpemU6IDEycHg7IG1hcmdpbi1yaWdodDogNXB4OyBjdXJzb3I6IHBvaW50ZXI7fVxuICAgIC5jb2wtdmFsdWU6Zmlyc3QtY2hpbGQgc3BhbnttYXJnaW4tbGVmdDogMTVweDt9XG4gICAgLm1hdC1mb3JtLWZpZWxkIHtwYWRkaW5nOiAxMHB4IDEwcHggMCAxMHB4O3dpZHRoOiBjYWxjKDEwMCUgLSAyMHB4KTt9YFxuICBdLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignZGV0YWlsRXhwYW5kJywgW1xuICAgICAgc3RhdGUoXG4gICAgICAgICdjb2xsYXBzZWQnLFxuICAgICAgICBzdHlsZSh7IGhlaWdodDogJzBweCcsIG1pbkhlaWdodDogJzAnLCB2aXNpYmlsaXR5OiAnaGlkZGVuJyB9KVxuICAgICAgKSxcbiAgICAgIHN0YXRlKCdleHBhbmRlZCcsIHN0eWxlKHsgaGVpZ2h0OiAnKicsIHZpc2liaWxpdHk6ICd2aXNpYmxlJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKFxuICAgICAgICAnZXhwYW5kZWQgPD0+IGNvbGxhcHNlZCcsXG4gICAgICAgIGFuaW1hdGUoJzIyNW1zIGN1YmljLWJlemllcigwLjQsIDAuMCwgMC4yLCAxKScpXG4gICAgICApLFxuICAgIF0pLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hEYXRhVGFibGVDb21wb25lbnQge1xuICBASW5wdXQoKVxuICBzZXQgZGF0YShfZGF0YTogYW55W10pIHtcbiAgICBpZiAoX2RhdGEpIHtcbiAgICAgIHRoaXMuZGF0YVNvdXJjZSA9IG5ldyBOZ3hEYXRhVGFibGVEYXRhU291cmNlKFxuICAgICAgICB0aGlzLnBhZ2luYXRvcixcbiAgICAgICAgX2RhdGEsXG4gICAgICAgIHRoaXMuc29ydFxuICAgICAgKTtcbiAgICAgIHRoaXMuZGlzcGxheWVkQ29sdW1ucyA9IE9iamVjdC5rZXlzKF9kYXRhWzBdKS5maWx0ZXIoXG4gICAgICAgIGtleSA9PiBrZXkgIT09ICdkZXRhaWxzJ1xuICAgICAgKTtcbiAgICB9XG4gIH1cbiAgQFZpZXdDaGlsZChNYXRQYWdpbmF0b3IpIHBhZ2luYXRvcjogTWF0UGFnaW5hdG9yO1xuICBAVmlld0NoaWxkKE1hdFNvcnQpIHNvcnQ6IE1hdFNvcnQ7XG4gIGRhdGFTb3VyY2U6IE5neERhdGFUYWJsZURhdGFTb3VyY2U7XG5cbiAgLyoqIENvbHVtbnMgZGlzcGxheWVkIGluIHRoZSB0YWJsZS4gQ29sdW1ucyBJRHMgY2FuIGJlIGFkZGVkLCByZW1vdmVkLCBvciByZW9yZGVyZWQuICovXG4gIGRpc3BsYXllZENvbHVtbnM6IEFycmF5PHN0cmluZz47XG4gIGV4cGFuZGVkRWxlbWVudDogQXJyYXk8c3RyaW5nPjtcbiAgaXNFeHBhbnNpb25EZXRhaWxSb3cgPSAoaTogbnVtYmVyLCByb3c6IE9iamVjdCkgPT5cbiAgICByb3cuaGFzT3duUHJvcGVydHkoJ2RldGFpbFJvdycpO1xuXG4gIC8qKlxuICAgKiBleHBhbmQgY29sbGFwc2UgYSByb3dcbiAgICogQHBhcmFtIHJvd1xuICAgKi9cbiAgdG9nZ2xlUm93KHJvdykge1xuICAgIGlmICh0aGlzLmV4cGFuZGVkRWxlbWVudCA9PT0gcm93KSB7XG4gICAgICB0aGlzLmV4cGFuZGVkRWxlbWVudCA9IG51bGw7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZXhwYW5kZWRFbGVtZW50ID0gcm93O1xuICAgIH1cbiAgfVxuXG4gIGFwcGx5RmlsdGVyKGZpbHRlclZhbHVlOiBzdHJpbmcpIHtcbiAgICB0aGlzLmRhdGFTb3VyY2UuZmlsdGVyID0gZmlsdGVyVmFsdWU7XG4gIH1cbn1cbiJdfQ==