ngx-nested-data-table
Version:
angular master-detail table angular material style
1 lines • 6.64 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgxDataTableDataSource":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/collections","name":"DataSource","line":10,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material","name":"MatPaginator","line":23,"character":23},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/material","name":"MatSort","line":25,"character":18}]}],"connect":[{"__symbolic":"method"}],"_enrichData":[{"__symbolic":"method"}],"_filterData":[{"__symbolic":"method"}],"disconnect":[{"__symbolic":"method"}],"getPagedData":[{"__symbolic":"method"}],"getSortedData":[{"__symbolic":"method"}]}},"NgxDataTableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"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":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":62,"character":4},"arguments":["detailExpand",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":63,"character":6},"arguments":["collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":65,"character":8},"arguments":[{"height":"0px","minHeight":"0","visibility":"hidden"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":67,"character":6},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":67,"character":24},"arguments":[{"height":"*","visibility":"visible"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":68,"character":6},"arguments":["expanded <=> collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":70,"character":8},"arguments":["225ms cubic-bezier(0.4, 0.0, 0.2, 1)"]}]}]]}]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MatPaginator","line":89,"character":13}]}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":90,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material","name":"MatSort","line":90,"character":13}]}]}],"toggleRow":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}]}},"NgxDataTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatTableModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatPaginatorModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSortModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":16,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgxDataTableComponent"}],"exports":[{"__symbolic":"reference","name":"NgxDataTableComponent"}]}]}],"members":{}}},"origins":{"NgxDataTableDataSource":"./lib/ngx-data-table/ngx-data-table-datasource","NgxDataTableComponent":"./lib/ngx-data-table/ngx-data-table.component","NgxDataTableModule":"./lib/ngx-data-table/ngx-data-table.module"},"importAs":"ngx-nested-data-table"}