ngx-nested-data-table
Version:
angular master-detail table angular material style
104 lines (103 loc) • 13.5 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';
var NgxDataTableComponent = /** @class */ (function () {
function NgxDataTableComponent() {
this.isExpansionDetailRow = function (i, row) {
return row.hasOwnProperty('detailRow');
};
}
Object.defineProperty(NgxDataTableComponent.prototype, "data", {
set: /**
* @param {?} _data
* @return {?}
*/
function (_data) {
if (_data) {
this.dataSource = new NgxDataTableDataSource(this.paginator, _data, this.sort);
this.displayedColumns = Object.keys(_data[0]).filter(function (key) { return key !== 'details'; });
}
},
enumerable: true,
configurable: true
});
/**
* expand collapse a row
* @param row
*/
/**
* expand collapse a row
* @param {?} row
* @return {?}
*/
NgxDataTableComponent.prototype.toggleRow = /**
* expand collapse a row
* @param {?} row
* @return {?}
*/
function (row) {
if (this.expandedElement === row) {
this.expandedElement = null;
}
else {
this.expandedElement = row;
}
};
/**
* @param {?} filterValue
* @return {?}
*/
NgxDataTableComponent.prototype.applyFilter = /**
* @param {?} filterValue
* @return {?}
*/
function (filterValue) {
this.dataSource.filter = filterValue;
};
NgxDataTableComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-data-table',
template: "<div class=\"mat-elevation-z8\">\n <mat-form-field>\n <input matInput (keyup)=\"applyFilter($event.target.value)\" placeholder=\"Filter\" class=\"filter\">\n </mat-form-field>\n <mat-table #table [dataSource]=\"dataSource\" matSort aria-label=\"Elements\">\n <ng-container [matColumnDef]=\"cols\" *ngFor=\"let cols of displayedColumns; let i = index\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>{{cols}}</mat-header-cell>\n <mat-cell *matCellDef=\"let element\" [ngClass]=\"{'col-value': element.details === undefined}\">\n <!-- expand caret -->\n <span *ngIf=\"i === 0 && element.details\">\n <span *ngIf=\"expandedElement && expandedElement[cols] === element[cols]; else plusIcon\" class=\"expand-icon\">▲</span>\n <ng-template #plusIcon><span class=\"expand-icon\">▼</span></ng-template>\n </span>\n <span>{{element[cols]}}</span>\n </mat-cell>\n </ng-container>\n\n <!-- Expanded Content Column - The detail row is made up of this one column -->\n <ng-container matColumnDef=\"expandedDetail\">\n <mat-cell *matCellDef=\"let detail\">\n <ngx-data-table [data]=\"detail.element.details\" class=\"detail-table\"></ngx-data-table>\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n [class.expanded]=\"expandedElement == row\"\n (click)=\"toggleRow(row)\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpansionDetailRow\"\n [@detailExpand]=\"row.element == expandedElement ? 'expanded' : 'collapsed'\"\n style=\"overflow: hidden\"></mat-row>\n </mat-table>\n\n <mat-paginator #paginator\n\n [length]=\"dataSource?.data?.length\"\n [pageIndex]=\"0\"\n [pageSize]=\"25\"\n [pageSizeOptions]=\"[25, 50, 100, 250]\">\n </mat-paginator>\n</div>\n",
styles: [
".detail-table {display: flex;flex-direction: column;display: block;margin: 10px;width: 100%;}\n .expand-icon {color: rgba(0,0,0,.44);font-size: 12px; margin-right: 5px; cursor: pointer;}\n .col-value:first-child span{margin-left: 15px;}\n .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,] }]
};
return NgxDataTableComponent;
}());
export { NgxDataTableComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWRhdGEtdGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LW5lc3RlZC1kYXRhLXRhYmxlLyIsInNvdXJjZXMiOlsibGliL25neC1kYXRhLXRhYmxlL25neC1kYXRhLXRhYmxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUQsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDckUsT0FBTyxFQUNMLE9BQU8sRUFDUCxLQUFLLEVBQ0wsS0FBSyxFQUNMLFVBQVUsRUFDVixPQUFPLEdBQ1IsTUFBTSxxQkFBcUIsQ0FBQzs7O29DQXVGSixVQUFDLENBQVMsRUFBRSxHQUFXO1lBQzVDLE9BQUEsR0FBRyxDQUFDLGNBQWMsQ0FBQyxXQUFXLENBQUM7UUFBL0IsQ0FBK0I7O0lBckJqQyxzQkFDSSx1Q0FBSTs7Ozs7UUFEUixVQUNTLEtBQVk7WUFDbkIsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztnQkFDVixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksc0JBQXNCLENBQzFDLElBQUksQ0FBQyxTQUFTLEVBQ2QsS0FBSyxFQUNMLElBQUksQ0FBQyxJQUFJLENBQ1YsQ0FBQztnQkFDRixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQ2xELFVBQUEsR0FBRyxJQUFJLE9BQUEsR0FBRyxLQUFLLFNBQVMsRUFBakIsQ0FBaUIsQ0FDekIsQ0FBQzthQUNIO1NBQ0Y7OztPQUFBO0lBV0Q7OztPQUdHOzs7Ozs7SUFDSCx5Q0FBUzs7Ozs7SUFBVCxVQUFVLEdBQUc7UUFDWCxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsZUFBZSxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDakMsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7U0FDN0I7UUFBQyxJQUFJLENBQUMsQ0FBQztZQUNOLElBQUksQ0FBQyxlQUFlLEdBQUcsR0FBRyxDQUFDO1NBQzVCO0tBQ0Y7Ozs7O0lBRUQsMkNBQVc7Ozs7SUFBWCxVQUFZLFdBQW1CO1FBQzdCLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLFdBQVcsQ0FBQztLQUN0Qzs7Z0JBdEdGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixRQUFRLEVBQUUsZzhEQXlDWDtvQkFDQyxNQUFNLEVBQUU7d0JBQ04sK1RBR3NFO3FCQUN2RTtvQkFDRCxVQUFVLEVBQUU7d0JBQ1YsT0FBTyxDQUFDLGNBQWMsRUFBRTs0QkFDdEIsS0FBSyxDQUNILFdBQVcsRUFDWCxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQy9EOzRCQUNELEtBQUssQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQzs0QkFDaEUsVUFBVSxDQUNSLHdCQUF3QixFQUN4QixPQUFPLENBQUMsc0NBQXNDLENBQUMsQ0FDaEQ7eUJBQ0YsQ0FBQztxQkFDSDtpQkFDRjs7O3VCQUVFLEtBQUs7NEJBYUwsU0FBUyxTQUFDLFlBQVk7dUJBQ3RCLFNBQVMsU0FBQyxPQUFPOztnQ0ExRnBCOztTQTJFYSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgVmlld0NoaWxkLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0UGFnaW5hdG9yLCBNYXRTb3J0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwnO1xuaW1wb3J0IHsgTmd4RGF0YVRhYmxlRGF0YVNvdXJjZSB9IGZyb20gJy4vbmd4LWRhdGEtdGFibGUtZGF0YXNvdXJjZSc7XG5pbXBvcnQge1xuICB0cmlnZ2VyLFxuICBzdGF0ZSxcbiAgc3R5bGUsXG4gIHRyYW5zaXRpb24sXG4gIGFuaW1hdGUsXG59IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtZGF0YS10YWJsZScsXG4gIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cIm1hdC1lbGV2YXRpb24tejhcIj5cbiAgICA8bWF0LWZvcm0tZmllbGQ+XG4gICAgICA8aW5wdXQgbWF0SW5wdXQgKGtleXVwKT1cImFwcGx5RmlsdGVyKCRldmVudC50YXJnZXQudmFsdWUpXCIgcGxhY2Vob2xkZXI9XCJGaWx0ZXJcIiBjbGFzcz1cImZpbHRlclwiPlxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gIDxtYXQtdGFibGUgI3RhYmxlIFtkYXRhU291cmNlXT1cImRhdGFTb3VyY2VcIiBtYXRTb3J0IGFyaWEtbGFiZWw9XCJFbGVtZW50c1wiPlxuICAgIDxuZy1jb250YWluZXIgW21hdENvbHVtbkRlZl09XCJjb2xzXCIgKm5nRm9yPVwibGV0IGNvbHMgb2YgZGlzcGxheWVkQ29sdW1uczsgbGV0IGkgPSBpbmRleFwiPlxuICAgICAgPG1hdC1oZWFkZXItY2VsbCAqbWF0SGVhZGVyQ2VsbERlZiBtYXQtc29ydC1oZWFkZXI+e3tjb2xzfX08L21hdC1oZWFkZXItY2VsbD5cbiAgICAgIDxtYXQtY2VsbCAqbWF0Q2VsbERlZj1cImxldCBlbGVtZW50XCIgW25nQ2xhc3NdPVwieydjb2wtdmFsdWUnOiBlbGVtZW50LmRldGFpbHMgPT09IHVuZGVmaW5lZH1cIj5cbiAgICAgICAgPCEtLSBleHBhbmQgY2FyZXQgLS0+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwiaSA9PT0gMCAmJiBlbGVtZW50LmRldGFpbHNcIj5cbiAgICAgICAgICA8c3BhbiAqbmdJZj1cImV4cGFuZGVkRWxlbWVudCAmJiBleHBhbmRlZEVsZW1lbnRbY29sc10gPT09IGVsZW1lbnRbY29sc107IGVsc2UgcGx1c0ljb25cIiBjbGFzcz1cImV4cGFuZC1pY29uXCI+JiM5NjUwOzwvc3Bhbj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgI3BsdXNJY29uPjxzcGFuIGNsYXNzPVwiZXhwYW5kLWljb25cIj4mIzk2NjA7PC9zcGFuPjwvbmctdGVtcGxhdGU+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPHNwYW4+e3tlbGVtZW50W2NvbHNdfX08L3NwYW4+XG4gICAgICA8L21hdC1jZWxsPlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPCEtLSBFeHBhbmRlZCBDb250ZW50IENvbHVtbiAtIFRoZSBkZXRhaWwgcm93IGlzIG1hZGUgdXAgb2YgdGhpcyBvbmUgY29sdW1uIC0tPlxuICAgIDxuZy1jb250YWluZXIgbWF0Q29sdW1uRGVmPVwiZXhwYW5kZWREZXRhaWxcIj5cbiAgICAgIDxtYXQtY2VsbCAqbWF0Q2VsbERlZj1cImxldCBkZXRhaWxcIj5cbiAgICAgICAgPG5neC1kYXRhLXRhYmxlIFtkYXRhXT1cImRldGFpbC5lbGVtZW50LmRldGFpbHNcIiBjbGFzcz1cImRldGFpbC10YWJsZVwiPjwvbmd4LWRhdGEtdGFibGU+XG4gICAgICA8L21hdC1jZWxsPlxuICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgPG1hdC1oZWFkZXItcm93ICptYXRIZWFkZXJSb3dEZWY9XCJkaXNwbGF5ZWRDb2x1bW5zXCI+PC9tYXQtaGVhZGVyLXJvdz5cbiAgICA8bWF0LXJvdyAqbWF0Um93RGVmPVwibGV0IHJvdzsgY29sdW1uczogZGlzcGxheWVkQ29sdW1ucztcIlxuICAgICAgICAgICAgICBbY2xhc3MuZXhwYW5kZWRdPVwiZXhwYW5kZWRFbGVtZW50ID09IHJvd1wiXG4gICAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVSb3cocm93KVwiPjwvbWF0LXJvdz5cbiAgICA8bWF0LXJvdyAqbWF0Um93RGVmPVwibGV0IHJvdzsgY29sdW1uczogWydleHBhbmRlZERldGFpbCddOyB3aGVuOiBpc0V4cGFuc2lvbkRldGFpbFJvd1wiXG4gICAgW0BkZXRhaWxFeHBhbmRdPVwicm93LmVsZW1lbnQgPT0gZXhwYW5kZWRFbGVtZW50ID8gJ2V4cGFuZGVkJyA6ICdjb2xsYXBzZWQnXCJcbiAgICBzdHlsZT1cIm92ZXJmbG93OiBoaWRkZW5cIj48L21hdC1yb3c+XG4gIDwvbWF0LXRhYmxlPlxuXG4gIDxtYXQtcGFnaW5hdG9yICNwYWdpbmF0b3JcblxuICAgIFtsZW5ndGhdPVwiZGF0YVNvdXJjZT8uZGF0YT8ubGVuZ3RoXCJcbiAgICBbcGFnZUluZGV4XT1cIjBcIlxuICAgIFtwYWdlU2l6ZV09XCIyNVwiXG4gICAgW3BhZ2VTaXplT3B0aW9uc109XCJbMjUsIDUwLCAxMDAsIDI1MF1cIj5cbiAgPC9tYXQtcGFnaW5hdG9yPlxuPC9kaXY+XG5gLFxuICBzdHlsZXM6IFtcbiAgICBgLmRldGFpbC10YWJsZSB7ZGlzcGxheTogZmxleDtmbGV4LWRpcmVjdGlvbjogY29sdW1uO2Rpc3BsYXk6IGJsb2NrO21hcmdpbjogMTBweDt3aWR0aDogMTAwJTt9XG4gICAgLmV4cGFuZC1pY29uIHtjb2xvcjogcmdiYSgwLDAsMCwuNDQpO2ZvbnQtc2l6ZTogMTJweDsgbWFyZ2luLXJpZ2h0OiA1cHg7IGN1cnNvcjogcG9pbnRlcjt9XG4gICAgLmNvbC12YWx1ZTpmaXJzdC1jaGlsZCBzcGFue21hcmdpbi1sZWZ0OiAxNXB4O31cbiAgICAubWF0LWZvcm0tZmllbGQge3BhZGRpbmc6IDEwcHggMTBweCAwIDEwcHg7d2lkdGg6IGNhbGMoMTAwJSAtIDIwcHgpO31gXG4gIF0sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdkZXRhaWxFeHBhbmQnLCBbXG4gICAgICBzdGF0ZShcbiAgICAgICAgJ2NvbGxhcHNlZCcsXG4gICAgICAgIHN0eWxlKHsgaGVpZ2h0OiAnMHB4JywgbWluSGVpZ2h0OiAnMCcsIHZpc2liaWxpdHk6ICdoaWRkZW4nIH0pXG4gICAgICApLFxuICAgICAgc3RhdGUoJ2V4cGFuZGVkJywgc3R5bGUoeyBoZWlnaHQ6ICcqJywgdmlzaWJpbGl0eTogJ3Zpc2libGUnIH0pKSxcbiAgICAgIHRyYW5zaXRpb24oXG4gICAgICAgICdleHBhbmRlZCA8PT4gY29sbGFwc2VkJyxcbiAgICAgICAgYW5pbWF0ZSgnMjI1bXMgY3ViaWMtYmV6aWVyKDAuNCwgMC4wLCAwLjIsIDEpJylcbiAgICAgICksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE5neERhdGFUYWJsZUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIHNldCBkYXRhKF9kYXRhOiBhbnlbXSkge1xuICAgIGlmIChfZGF0YSkge1xuICAgICAgdGhpcy5kYXRhU291cmNlID0gbmV3IE5neERhdGFUYWJsZURhdGFTb3VyY2UoXG4gICAgICAgIHRoaXMucGFnaW5hdG9yLFxuICAgICAgICBfZGF0YSxcbiAgICAgICAgdGhpcy5zb3J0XG4gICAgICApO1xuICAgICAgdGhpcy5kaXNwbGF5ZWRDb2x1bW5zID0gT2JqZWN0LmtleXMoX2RhdGFbMF0pLmZpbHRlcihcbiAgICAgICAga2V5ID0+IGtleSAhPT0gJ2RldGFpbHMnXG4gICAgICApO1xuICAgIH1cbiAgfVxuICBAVmlld0NoaWxkKE1hdFBhZ2luYXRvcikgcGFnaW5hdG9yOiBNYXRQYWdpbmF0b3I7XG4gIEBWaWV3Q2hpbGQoTWF0U29ydCkgc29ydDogTWF0U29ydDtcbiAgZGF0YVNvdXJjZTogTmd4RGF0YVRhYmxlRGF0YVNvdXJjZTtcblxuICAvKiogQ29sdW1ucyBkaXNwbGF5ZWQgaW4gdGhlIHRhYmxlLiBDb2x1bW5zIElEcyBjYW4gYmUgYWRkZWQsIHJlbW92ZWQsIG9yIHJlb3JkZXJlZC4gKi9cbiAgZGlzcGxheWVkQ29sdW1uczogQXJyYXk8c3RyaW5nPjtcbiAgZXhwYW5kZWRFbGVtZW50OiBBcnJheTxzdHJpbmc+O1xuICBpc0V4cGFuc2lvbkRldGFpbFJvdyA9IChpOiBudW1iZXIsIHJvdzogT2JqZWN0KSA9PlxuICAgIHJvdy5oYXNPd25Qcm9wZXJ0eSgnZGV0YWlsUm93Jyk7XG5cbiAgLyoqXG4gICAqIGV4cGFuZCBjb2xsYXBzZSBhIHJvd1xuICAgKiBAcGFyYW0gcm93XG4gICAqL1xuICB0b2dnbGVSb3cocm93KSB7XG4gICAgaWYgKHRoaXMuZXhwYW5kZWRFbGVtZW50ID09PSByb3cpIHtcbiAgICAgIHRoaXMuZXhwYW5kZWRFbGVtZW50ID0gbnVsbDtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5leHBhbmRlZEVsZW1lbnQgPSByb3c7XG4gICAgfVxuICB9XG5cbiAgYXBwbHlGaWx0ZXIoZmlsdGVyVmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuZGF0YVNvdXJjZS5maWx0ZXIgPSBmaWx0ZXJWYWx1ZTtcbiAgfVxufVxuIl19