ngx-nested-data-table
Version:
angular master-detail table angular material style
2 lines • 6.06 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("@angular/cdk/collections"),require("rxjs/operators"),require("rxjs"),require("@angular/core"),require("@angular/material"),require("@angular/animations"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-nested-data-table",["exports","tslib","@angular/cdk/collections","rxjs/operators","rxjs","@angular/core","@angular/material","@angular/animations","@angular/common"],t):t(e["ngx-nested-data-table"]={},e.tslib,e.ng.cdk.collections,e.Rx.Observable.prototype,null,e.ng.core,e.ng.material,e.ng.animations,e.ng.common)}(this,function(e,a,t,n,o,r,i,l,s){"use strict";var d=function(i){function e(e,t,a){var n=i.call(this)||this;n.paginator=e,n._data=t,n.sort=a,n._filterChange=new o.BehaviorSubject(""),n.data=t;var r=[];return t.forEach(function(e){return e.details?r.push(e,{detailRow:!0,element:e}):r.push(e)}),n.data=r,n}return a.__extends(e,i),Object.defineProperty(e.prototype,"filter",{get:function(){return this._filterChange.value},set:function(e){this._filterChange.next(e)},enumerable:!0,configurable:!0}),e.prototype.connect=function(){var t=this,e=[o.of(this.data),this.paginator.page,this.sort.sortChange,this._filterChange];return this.paginator.length=this.data.length,o.merge.apply(void 0,a.__spread(e)).pipe(n.map(function(){var e=t._filterData(t._data);return t.data=t._enrichData(e),t.getPagedData(t.getSortedData(a.__spread(t.data)))}))},e.prototype._enrichData=function(e){var t=[];return e.forEach(function(e){return e.details?t.push(e,{detailRow:!0,element:e}):t.push(e)}),t},e.prototype._filterData=function(e){var n=this;return this.filteredData=this.filter?e.filter(function(a){var e=Object.keys(a).reduce(function(e,t){return e+a[t]},"").toLowerCase(),t=n.filter.trim().toLowerCase();return-1!==e.indexOf(t)}):e,this.filteredData},e.prototype.disconnect=function(){},e.prototype.getPagedData=function(e){var t=this.paginator.pageIndex*this.paginator.pageSize;return e.splice(t,this.paginator.pageSize)},e.prototype.getSortedData=function(e){var n=this;return this.sort.active&&""!==this.sort.direction?e.sort(function(e,t){var a="asc"===n.sort.direction;return isNaN(e[n.sort.active])?p(e[n.sort.active],t[n.sort.active],a):p(+e[n.sort.active],+t[n.sort.active],a)}):e},e}(t.DataSource);function p(e,t,a){return(e<t?-1:1)*(a?1:-1)}var c=function(){function e(){this.isExpansionDetailRow=function(e,t){return t.hasOwnProperty("detailRow")}}return Object.defineProperty(e.prototype,"data",{set:function(e){e&&(this.dataSource=new d(this.paginator,e,this.sort),this.displayedColumns=Object.keys(e[0]).filter(function(e){return"details"!==e}))},enumerable:!0,configurable:!0}),e.prototype.toggleRow=function(e){this.expandedElement===e?this.expandedElement=null:this.expandedElement=e},e.prototype.applyFilter=function(e){this.dataSource.filter=e},e.decorators=[{type:r.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 \x3c!-- expand caret --\x3e\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 \x3c!-- Expanded Content Column - The detail row is made up of this one column --\x3e\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:[l.trigger("detailExpand",[l.state("collapsed",l.style({height:"0px",minHeight:"0",visibility:"hidden"})),l.state("expanded",l.style({height:"*",visibility:"visible"})),l.transition("expanded <=> collapsed",l.animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)"))])]}]}],e.propDecorators={data:[{type:r.Input}],paginator:[{type:r.ViewChild,args:[i.MatPaginator]}],sort:[{type:r.ViewChild,args:[i.MatSort]}]},e}(),u=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{imports:[s.CommonModule,i.MatTableModule,i.MatPaginatorModule,i.MatSortModule,i.MatInputModule],declarations:[c],exports:[c]}]}],e}();e.NgxDataTableDataSource=d,e.NgxDataTableComponent=c,e.NgxDataTableModule=u,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-nested-data-table.umd.min.js.map