UNPKG

ngx-material-dynamic-table

Version:

Componente angular dinâmico que ajuda a criar uma tabela utilizando o Angular material, de maneira fácil e rápida.

1 lines 8.02 kB
{"__symbolic":"module","version":4,"metadata":{"buttonsConfig":{"read":{"icon":"search","name":"read","tooltip":"Visualizar"},"update":{"icon":"edit","name":"edit","tooltip":"Editar"},"delete":{"icon":"delete","name":"delete","tooltip":"Excluir"},"download":{"icon":"arrow_downward","name":"download","tooltip":"Download"}},"NgxMaterialDynamicTableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":33,"character":1},"arguments":[{"selector":"ngx-material-dynamic-table","template":"\r\n\r\n <mat-form-field class=\"pesquisa\" *ngIf=\"filter\">\r\n <span matPrefix>\r\n <i class=\"material-icons\">search</i>\r\n <input type=\"text\" matInput (keyup)=\"applyFilter($event.target.value)\" placelholder=\"Filtrar\">\r\n </span>\r\n </mat-form-field>\r\n <mat-table #table [dataSource]=\"dados\" [hidden]=\"loading || !dados || !displayedColumns || !displayedColumnsObject\">\r\n\r\n <ng-container *ngFor=\"let disCol of displayedColumns; let colIndex = index\" matColumnDef=\"{{disCol.column}}\">\r\n <th mat-header-cell *matHeaderCellDef> {{disCol.title}} </th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span *ngIf=\"disCol.column !== 'actions'; else blockActions\">\r\n {{element[disCol.column]}}\r\n </span>\r\n <ng-template #blockActions>\r\n <div class=\"actionsList\">\r\n <span *ngFor=\"let action of actions\">\r\n <a (click)=\"sendAction(action)\" matTooltip=\"{{buttonsConfig[action.column].tooltip}}\">\r\n <i class=\"material-icons\">{{buttonsConfig[action.column].icon}}</i>\r\n </a>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsObject\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumnsObject;\"></tr>\r\n </mat-table>\r\n <div *ngIf=\"dados && dados.filteredData && dados.filteredData.length === 0\">\r\n <p>Nenhum registro encontrado</p>\r\n </div>\r\n <mat-paginator [hidden]=\"dados === undefined\" [pageSizeOptions]=\"[5,10,20]\" showFirstLastButtons></mat-paginator>\r\n","styles":["[hidden]{display:none}.actionsList{display:flex;align-items:center}.actionsList span+span{margin-left:10px}.mat-table{width:100%;display:table}.mat-table tr.mat-header-row{height:auto}.mat-form-field,.pesquisa{width:100%}"]}]}],"members":{"dataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"displayedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"actions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"configEditRow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"buttonAddNewItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"buttonExport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"componentName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"buttonsConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"sendClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":52,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/table","name":"MatTable","line":52,"character":13},{"static":true}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":53,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":53,"character":13},{"static":true}]}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":54,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":54,"character":13},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"createDatasource":[{"__symbolic":"method"}],"createColumns":[{"__symbolic":"method"}],"showTable":[{"__symbolic":"method"}],"sendAction":[{"__symbolic":"method"}],"addActionColumn":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}]}},"NgxMaterialDynamicTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxMaterialDynamicTableComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":22,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxMaterialDynamicTableComponent"},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":31,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":32,"character":4}]}]}],"members":{}}},"origins":{"buttonsConfig":"./lib/ngx-material-dynamic-table.component","NgxMaterialDynamicTableComponent":"./lib/ngx-material-dynamic-table.component","NgxMaterialDynamicTableModule":"./lib/ngx-material-dynamic-table.module"},"importAs":"ngx-material-dynamic-table"}