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.
125 lines • 14 kB
JavaScript
import { __decorate } from "tslib";
import { Component, ViewChild, EventEmitter, Output, Input, } from '@angular/core';
import { MatTableDataSource, MatTable } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
export const 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',
},
};
let NgxMaterialDynamicTableComponent = class NgxMaterialDynamicTableComponent {
constructor() {
this.displayedColumns = [];
this.filter = true;
this.buttonAddNewItem = false;
this.buttonExport = false;
this.buttonsConfig = buttonsConfig;
this.sendClick = new EventEmitter();
this.loading = true;
this.action = false;
this.displayedColumnsObject = [];
}
ngOnChanges() {
if (this.displayedColumns) {
this.addActionColumn();
}
if (this.dataSource) {
this.createDatasource();
}
}
createDatasource() {
this.dados = new MatTableDataSource(this.dataSource);
this.dados.paginator = this.paginator;
this.dados.sort = this.sort;
this.showTable();
}
createColumns() {
this.displayedColumnsObject = this.displayedColumns.map((col) => typeof col.column === 'number' ? col.column.toString() : col.column);
this.showTable();
}
showTable() {
if (this.dados && this.displayedColumns && this.displayedColumnsObject) {
this.loading = false;
}
}
sendAction(action, row, index) {
const content = { action, row, index };
this.sendClick.emit(content);
}
addActionColumn() {
if (this.actions) {
const columnAction = { column: 'actions', title: 'Ações' };
this.displayedColumns = [...this.displayedColumns, columnAction];
}
this.createColumns();
}
applyFilter(filterValue) {
this.dados.filter = filterValue.trim().toLowerCase();
}
};
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "dataSource", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "displayedColumns", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "actions", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "configEditRow", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "filter", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "buttonAddNewItem", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "buttonExport", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "componentName", void 0);
__decorate([
Input()
], NgxMaterialDynamicTableComponent.prototype, "buttonsConfig", void 0);
__decorate([
Output()
], NgxMaterialDynamicTableComponent.prototype, "sendClick", void 0);
__decorate([
ViewChild(MatTable, { static: true })
], NgxMaterialDynamicTableComponent.prototype, "table", void 0);
__decorate([
ViewChild(MatPaginator, { static: true })
], NgxMaterialDynamicTableComponent.prototype, "paginator", void 0);
__decorate([
ViewChild(MatSort, { static: true })
], NgxMaterialDynamicTableComponent.prototype, "sort", void 0);
NgxMaterialDynamicTableComponent = __decorate([
Component({
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%}"]
})
], NgxMaterialDynamicTableComponent);
export { NgxMaterialDynamicTableComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1hdGVyaWFsLWR5bmFtaWMtdGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LW1hdGVyaWFsLWR5bmFtaWMtdGFibGUvIiwic291cmNlcyI6WyJsaWIvbmd4LW1hdGVyaWFsLWR5bmFtaWMtdGFibGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFNBQVMsRUFDVCxZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssR0FFTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsUUFBUSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzNELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNqRCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQUc7SUFDM0IsSUFBSSxFQUFFO1FBQ0osSUFBSSxFQUFFLFFBQVE7UUFDZCxJQUFJLEVBQUUsTUFBTTtRQUNaLE9BQU8sRUFBRSxZQUFZO0tBQ3RCO0lBQ0QsTUFBTSxFQUFFO1FBQ04sSUFBSSxFQUFFLE1BQU07UUFDWixJQUFJLEVBQUUsTUFBTTtRQUNaLE9BQU8sRUFBRSxRQUFRO0tBQ2xCO0lBQ0QsTUFBTSxFQUFFO1FBQ04sSUFBSSxFQUFFLFFBQVE7UUFDZCxJQUFJLEVBQUUsUUFBUTtRQUNkLE9BQU8sRUFBRSxTQUFTO0tBQ25CO0lBQ0QsUUFBUSxFQUFFO1FBQ1IsSUFBSSxFQUFFLGdCQUFnQjtRQUN0QixJQUFJLEVBQUUsVUFBVTtRQUNoQixPQUFPLEVBQUUsVUFBVTtLQUNwQjtDQUNGLENBQUM7QUFNRixJQUFhLGdDQUFnQyxHQUE3QyxNQUFhLGdDQUFnQztJQXVCM0M7UUFyQlMscUJBQWdCLEdBQUcsRUFBRSxDQUFDO1FBR3RCLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFDZCxxQkFBZ0IsR0FBRyxLQUFL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RUFBRSxDQUFDOytEQUFzQjtBQUNqQjtJQUExQyxTQUFTLENBQUMsWUFBWSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDO21FQUF5QjtBQUM3QjtJQUFyQyxTQUFTLENBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDOzhEQUFxQjtBQWhCL0MsZ0NBQWdDO0lBTDVDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSw0QkFBNEI7UUFDdEMsbXJEQUEwRDs7S0FFM0QsQ0FBQztHQUNXLGdDQUFnQyxDQW1FNUM7U0FuRVksZ0NBQWdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgVmlld0NoaWxkLFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBPdXRwdXQsXHJcbiAgSW5wdXQsXHJcbiAgT25DaGFuZ2VzLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXRUYWJsZURhdGFTb3VyY2UsIE1hdFRhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvdGFibGUnO1xyXG5pbXBvcnQgeyBNYXRQYWdpbmF0b3IgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9wYWdpbmF0b3InO1xyXG5pbXBvcnQgeyBNYXRTb3J0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc29ydCc7XHJcbmV4cG9ydCBjb25zdCBidXR0b25zQ29uZmlnID0ge1xyXG4gIHJlYWQ6IHtcclxuICAgIGljb246ICdzZWFyY2gnLFxyXG4gICAgbmFtZTogJ3JlYWQnLFxyXG4gICAgdG9vbHRpcDogJ1Zpc3VhbGl6YXInLFxyXG4gIH0sXHJcbiAgdXBkYXRlOiB7XHJcbiAgICBpY29uOiAnZWRpdCcsXHJcbiAgICBuYW1lOiAnZWRpdCcsXHJcbiAgICB0b29sdGlwOiAnRWRpdGFyJyxcclxuICB9LFxyXG4gIGRlbGV0ZToge1xyXG4gICAgaWNvbjogJ2RlbGV0ZScsXHJcbiAgICBuYW1lOiAnZGVsZXRlJyxcclxuICAgIHRvb2x0aXA6ICdFeGNsdWlyJyxcclxuICB9LFxyXG4gIGRvd25sb2FkOiB7XHJcbiAgICBpY29uOiAnYXJyb3dfZG93bndhcmQnLFxyXG4gICAgbmFtZTogJ2Rvd25sb2FkJyxcclxuICAgIHRvb2x0aXA6ICdEb3dubG9hZCcsXHJcbiAgfSxcclxufTtcclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ3gtbWF0ZXJpYWwtZHluYW1pYy10YWJsZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL25neC1tYXRlcmlhbC1keW5hbWljLXRhYmxlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9uZ3gtbWF0ZXJpYWwtZHluYW1pYy10YWJsZS5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmd4TWF0ZXJpYWxEeW5hbWljVGFibGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG4gIEBJbnB1dCgpIGRhdGFTb3VyY2U7XHJcbiAgQElucHV0KCkgZGlzcGxheWVkQ29sdW1ucyA9IFtdO1xyXG4gIEBJbnB1dCgpIGFjdGlvbnM7XHJcbiAgQElucHV0KCkgY29uZmlnRWRpdFJvdztcclxuICBASW5wdXQoKSBmaWx0ZXIgPSB0cnVlO1xyXG4gIEBJbnB1dCgpIGJ1dHRvbkFkZE5ld0l0ZW0gPSBmYWxzZTtcclxuICBASW5wdXQoKSBidXR0b25FeHBvcnQgPSBmYWxzZTtcclxuICBASW5wdXQoKSBjb21wb25lbnROYW1lO1xyXG5cclxuICBASW5wdXQoKSBidXR0b25zQ29uZmlnID0gYnV0dG9uc0NvbmZpZztcclxuXHJcbiAgQE91dHB1dCgpIHNlbmRDbGljayA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgQFZpZXdDaGlsZChNYXRUYWJsZSwgeyBzdGF0aWM6IHRydWUgfSkgdGFibGU6IE1hdFRhYmxlPGFueT47XHJcbiAgQFZpZXdDaGlsZChNYXRQYWdpbmF0b3IsIHsgc3RhdGljOiB0cnVlIH0pIHBhZ2luYXRvcjogTWF0UGFnaW5hdG9yO1xyXG4gIEBWaWV3Q2hpbGQoTWF0U29ydCwgeyBzdGF0aWM6IHRydWUgfSkgc29ydDogTWF0VGFibGU8YW55PjtcclxuXHJcbiAgcHVibGljIGxvYWRpbmcgPSB0cnVlO1xyXG4gIHB1YmxpYyBhY3Rpb24gPSBmYWxzZTtcclxuICBwdWJsaWMgZGlzcGxheWVkQ29sdW1uc09iamVjdDogYW55W10gPSBbXTtcclxuICBwdWJsaWMgZGFkb3M7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5kaXNwbGF5ZWRDb2x1bW5zKSB7XHJcbiAgICAgIHRoaXMuYWRkQWN0aW9uQ29sdW1uKCk7XHJcbiAgICB9XHJcbiAgICBpZiAodGhpcy5kYXRhU291cmNlKSB7XHJcbiAgICAgIHRoaXMuY3JlYXRlRGF0YXNvdXJjZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgY3JlYXRlRGF0YXNvdXJjZSgpIHtcclxuICAgIHRoaXMuZGFkb3MgPSBuZXcgTWF0VGFibGVEYXRhU291cmNlPGFueT4odGhpcy5kYXRhU291cmNlKTtcclxuICAgIHRoaXMuZGFkb3MucGFnaW5hdG9yID0gdGhpcy5wYWdpbmF0b3I7XHJcbiAgICB0aGlzLmRhZG9zLnNvcnQgPSB0aGlzLnNvcnQ7XHJcbiAgICB0aGlzLnNob3dUYWJsZSgpO1xyXG4gIH1cclxuXHJcbiAgY3JlYXRlQ29sdW1ucygpIHtcclxuICAgIHRoaXMuZGlzcGxheWVkQ29sdW1uc09iamVjdCA9IHRoaXMuZGlzcGxheWVkQ29sdW1ucy5tYXAoKGNvbCkgPT5cclxuICAgICAgdHlwZW9mIGNvbC5jb2x1bW4gPT09ICdudW1iZXInID8gY29sLmNvbHVtbi50b1N0cmluZygpIDogY29sLmNvbHVtblxyXG4gICAgKTtcclxuICAgIHRoaXMuc2hvd1RhYmxlKCk7XHJcbiAgfVxyXG5cclxuICBzaG93VGFibGUoKSB7XHJcbiAgICBpZiAodGhpcy5kYWRvcyAmJiB0aGlzLmRpc3BsYXllZENvbHVtbnMgJiYgdGhpcy5kaXNwbGF5ZWRDb2x1bW5zT2JqZWN0KSB7XHJcbiAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxuICBzZW5kQWN0aW9uKGFjdGlvbiwgcm93PywgaW5kZXg/KSB7XHJcbiAgICBjb25zdCBjb250ZW50OiBhbnkgPSB7IGFjdGlvbiwgcm93LCBpbmRleCB9O1xyXG4gICAgdGhpcy5zZW5kQ2xpY2suZW1pdChjb250ZW50KTtcclxuICB9XHJcbiAgYWRkQWN0aW9uQ29sdW1uKCkge1xyXG4gICAgaWYgKHRoaXMuYWN0aW9ucykge1xyXG4gICAgICBjb25zdCBjb2x1bW5BY3Rpb24gPSB7IGNvbHVtbjogJ2FjdGlvbnMnLCB0aXRsZTogJ0HDp8O1ZXMnIH07XHJcbiAgICAgIHRoaXMuZGlzcGxheWVkQ29sdW1ucyA9IFsuLi50aGlzLmRpc3BsYXllZENvbHVtbnMsIGNvbHVtbkFjdGlvbl07XHJcbiAgICB9XHJcbiAgICB0aGlzLmNyZWF0ZUNvbHVtbnMoKTtcclxuICB9XHJcbiAgYXBwbHlGaWx0ZXIoZmlsdGVyVmFsdWU6IHN0cmluZykge1xyXG4gICAgdGhpcy5kYWRvcy5maWx0ZXIgPSBmaWx0ZXJWYWx1ZS50cmltKCkudG9Mb3dlckNhc2UoKTtcclxuICB9XHJcbn1cclxuIl19