dynamic-mat-table
Version:
dynamic-mat-table is an Angular component for presenting large and complex data with a lightning fast performance (at least 10x faster) and excellent level of control over the presentation.
55 lines • 8.01 kB
JavaScript
import { Component, ViewChild, ElementRef, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
// tslint:disable-next-line:max-line-length
const styles = 'body{margin:15px;}table{width:100%;border-collapse:collapse;}h2{text-align:center;}th.mat-header-cell{text-align:center;}div{text-align:center;margin:30px }tr{border-bottom:1px solid }td,th{padding:10px; text-align: center }.param-list{text-align: left;border:solid gray;border-width: 0px 0px 2px 0;margin-bottom: 10px;padding-bottom: 10px;}.param {display: inline-block;margin: 10px;}';
export class PrintTableDialogComponent {
constructor(dialogRef, printTable) {
this.dialogRef = dialogRef;
this.printTable = printTable;
}
ngOnInit() {
}
print() {
setTimeout(() => {
const dialogConfig = 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no';
const printDoc = `
<html>
<head>
<style> ${styles} </style>
</head>
<body onload="window.print();" onafterprint="window.close()">
${this.printContentRef.nativeElement.innerHTML}
</body>
</html>
`;
const popupWinindow = window.open('', '_blank', dialogConfig);
popupWinindow.document.write(printDoc);
popupWinindow.document.close();
});
}
}
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
PrintTableDialogComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line: component-selector
selector: 'print-dialog',
template: "<mat-dialog-content>\r\n <div dir='{{ printTable.direction }}' #printContentRef>\r\n <h2>\r\n {{ printTable?.title }}\r\n </h2>\r\n <div class=\"param-list\">\r\n <div class=\"param\" *ngFor='let param of printTable?.userPrintParameters'>\r\n <b>{{ param.key }} </b> : {{ param.value }}\r\n </div>\r\n <div class=\"param\" *ngFor='let param of printTable?.tablePrintParameters'>\r\n <b>{{ param.key }} </b> : {{ param.value }}\r\n </div>\r\n </div>\r\n <table class=\"print-table\" mat-table [dataSource]=\"printTable.data\">\r\n <ng-container *ngFor=\"let column of printTable.columns\" matColumnDef=\"{{ column.name }}\">\r\n <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>\r\n <td mat-cell *matCellDef=\"let row\"> {{ row[column.name] }} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"printTable.displayedFields\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: printTable.displayedFields;\"></tr>\r\n </table>\r\n </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n <button mat-button type=\"button\" mat-dialog-close>Cancel</button>\r\n <button mat-button type=\"button\" [mat-dialog-close]=\"true\" cdkFocusInitial (click)=\"print()\">Print</button>\r\n</mat-dialog-actions>\r\n",
styles: ["#print-section{text-align:center;margin:30px}h2{text-align:center}.param-list{width:100%;display:inline-block;border:solid gray;border-width:0px 0px 2px 0;margin-bottom:10px;padding-bottom:10px}.param{display:inline-block;margin:10px}.print-table{width:100%}.print-table th.mat-header-cell{font-size:medium;font-size:initial}\n"]
},] }
];
/**
* @type {function(): !Array<(null|{
* type: ?,
* decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
* })>}
* @nocollapse
*/
PrintTableDialogComponent.ctorParameters = () => [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
PrintTableDialogComponent.propDecorators = {
printContentRef: [{ type: ViewChild, args: ['printContentRef', { static: true },] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJpbnQtZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2R5bmFtaWMtbWF0LXRhYmxlL3NyYy9saWIvZHluYW1pYy1tYXQtdGFibGUvZXh0ZW5zaW9ucy9wcmludC1kaWFsb2cvcHJpbnQtZGlhbG9nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFHekUsMkNBQTJDO0FBQzNDLE1BQU0sTUFBTSxHQUFHLG1ZQUFtWSxDQUFDO0FBUW5aLE1BQU0sT0FBTyx5QkFBeUI7SUFHcEMsWUFBb0IsU0FBa0QsRUFBa0MsVUFBdUI7UUFBM0csY0FBUyxHQUFULFNBQVMsQ0FBeUM7UUFBa0MsZUFBVSxHQUFWLFVBQVUsQ0FBYTtJQUFHLENBQUM7SUFFbkksUUFBUTtJQUNSLENBQUM7SUFFRCxLQUFLO1FBQ0gsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLE1BQU0sWUFBWSxHQUFHLDRGQUE0RixDQUFDO1lBQ2xILE1BQU0sUUFBUSxHQUFHOzs7a0JBR0wsTUFBTTs7O1VBR2QsSUFBSSxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsU0FBUzs7O0tBR2pELENBQUM7WUFFQSxNQUFNLGFBQWEsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxRQUFRLEVBQUUsWUFBWSxDQUFDLENBQUM7WUFDOUQsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDdkMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNqQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7Ozs7WUFoQ0YsU0FBUyxTQUFDO2dCQUNULCtDQUErQztnQkFDL0MsUUFBUSxFQUFFLGNBQWM7Z0JBQ3hCLG8xQ0FBNEM7O2FBRTdDOzs7Ozs7Ozs7O1lBWFEsWUFBWTs0Q0Flc0QsTUFBTSxTQUFDLGVBQWU7Ozs7OEJBRjlGLFNBQVMsU0FBQyxpQkFBaUIsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgVmlld0NoaWxkLCBFbGVtZW50UmVmLCBJbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWF0RGlhbG9nUmVmLCBNQVRfRElBTE9HX0RBVEEgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xyXG5pbXBvcnQgeyBQcmludENvbmZpZyB9IGZyb20gJy4uLy4uLy4uL21vZGVscy9wcmludC1jb25maWcubW9kZWwnO1xyXG5cclxuLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOm1heC1saW5lLWxlbmd0aFxyXG5jb25zdCBzdHlsZXMgPSAnYm9keXttYXJnaW46MTVweDt9dGFibGV7d2lkdGg6MTAwJTtib3JkZXItY29sbGFwc2U6Y29sbGFwc2U7fWgye3RleHQtYWxpZ246Y2VudGVyO310aC5tYXQtaGVhZGVyLWNlbGx7dGV4dC1hbGlnbjpjZW50ZXI7fWRpdnt0ZXh0LWFsaWduOmNlbnRlcjttYXJnaW46MzBweCB9dHJ7Ym9yZGVyLWJvdHRvbToxcHggc29saWQgfXRkLHRoe3BhZGRpbmc6MTBweDsgdGV4dC1hbGlnbjogY2VudGVyIH0ucGFyYW0tbGlzdHt0ZXh0LWFsaWduOiBsZWZ0O2JvcmRlcjpzb2xpZCBncmF5O2JvcmRlci13aWR0aDogMHB4IDBweCAycHggMDttYXJnaW4tYm90dG9tOiAxMHB4O3BhZGRpbmctYm90dG9tOiAxMHB4O30ucGFyYW0ge2Rpc3BsYXk6IGlubGluZS1ibG9jazttYXJnaW46IDEwcHg7fSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IGNvbXBvbmVudC1zZWxlY3RvclxyXG4gIHNlbGVjdG9yOiAncHJpbnQtZGlhbG9nJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcHJpbnQtZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9wcmludC1kaWFsb2cuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUHJpbnRUYWJsZURpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQFZpZXdDaGlsZCgncHJpbnRDb250ZW50UmVmJywge3N0YXRpYzogdHJ1ZX0pIHByaW50Q29udGVudFJlZiAhOiBFbGVtZW50UmVmO1xyXG5cclxuICBjb25zdHJ1Y3RvciggcHVibGljIGRpYWxvZ1JlZjogTWF0RGlhbG9nUmVmPFByaW50VGFibGVEaWFsb2dDb21wb25lbnQ+LCBASW5qZWN0KE1BVF9ESUFMT0dfREFUQSkgcHVibGljIHByaW50VGFibGU6IFByaW50Q29uZmlnKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIHByaW50KCkge1xyXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XHJcbiAgICAgIGNvbnN0IGRpYWxvZ0NvbmZpZyA9ICd3aWR0aD02MDAsaGVpZ2h0PTcwMCxzY3JvbGxiYXJzPW5vLG1lbnViYXI9bm8sdG9vbGJhcj1ubyxsb2NhdGlvbj1ubyxzdGF0dXM9bm8sdGl0bGViYXI9bm8nO1xyXG4gICAgICBjb25zdCBwcmludERvYyA9IGBcclxuICAgIDxodG1sPlxyXG4gICAgICA8aGVhZD5cclxuICAgICAgICA8c3R5bGU+ICR7c3R5bGVzfSA8L3N0eWxlPlxyXG4gICAgICA8L2hlYWQ+XHJcbiAgICAgIDxib2R5IG9ubG9hZD1cIndpbmRvdy5wcmludCgpO1wiIG9uYWZ0ZXJwcmludD1cIndpbmRvdy5jbG9zZSgpXCI+XHJcbiAgICAgICAgJHt0aGlzLnByaW50Q29udGVudFJlZi5uYXRpdmVFbGVtZW50LmlubmVySFRNTH1cclxuICAgICAgPC9ib2R5PlxyXG4gICAgPC9odG1sPlxyXG4gICAgYDtcclxuXHJcbiAgICAgIGNvbnN0IHBvcHVwV2luaW5kb3cgPSB3aW5kb3cub3BlbignJywgJ19ibGFuaycsIGRpYWxvZ0NvbmZpZyk7XHJcbiAgICAgIHBvcHVwV2luaW5kb3cuZG9jdW1lbnQud3JpdGUocHJpbnREb2MpO1xyXG4gICAgICBwb3B1cFdpbmluZG93LmRvY3VtZW50LmNsb3NlKCk7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==