Friday, 24 May 2019

Implementing Matsort and Matpaginator in Angular Material TreeTable Component

I am using a npm library ng-material-treetable. I want to implement matsort and mat paginator in this library.

I was trying to add @ViewChild method in the ng-material-treetable.js file in fesm5 folder of this library but getting error as unexpected identifier @.

Below is the piece of code that was trying to modify (My Line is the piece of code that I have added)-

Line 394 to 416
    TreetableComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        @ViewChild(MatSort) sort: MatSort;                 //My line
        @ViewChild(MatPaginator) paginator: MatPaginator;  //My line
        function () {
            var _this = this;
            this.tree = Array.isArray(this.tree) ? this.tree : [this.tree];
            this.options = this.parseOptions(defaultOptions);
            /** @type {?} */
            var customOrderValidator = this.validatorService.validateCustomOrder(this.tree[0], this.options.customColumnOrder);
            if (this.options.customColumnOrder && !customOrderValidator.valid) {
                throw new Error("\n        Properties " + customOrderValidator.xor.map(function (x) { return "'" + x + "'"; }).join(', ') + " incorrect or missing in customColumnOrder");
            }
            this.displayedColumns = this.options.customColumnOrder
                ? this.options.customColumnOrder
                : this.extractNodeProps(this.tree[0]);
            this.searchableTree = this.tree.map(function (t) { return _this.converterService.toSearchableTree(t); });
            /** @type {?} */
            var treeTableTree = this.searchableTree.map(function (st) { return _this.converterService.toTreeTableTree(st); });
            this.treeTable = flatMap(treeTableTree, this.treeService.flatten);
            this.dataSource = this.generateDataSource();
            this.dataSource.paginator = this.paginator;  //My line
            this.dataSource.sort = this.sort;            //My line
        };

Line 497 to 504 -

TreetableComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ng-treetable, treetable',
                    // 'ng-treetable' is currently being deprecated
                    template: "<table mat-table [dataSource]=\"dataSource\" matSort [ngClass]=\"formatElevation()\">\n\n  <div *ngFor=\"let column of displayedColumns; first as isFirst;\">\n    <ng-container matColumnDef=\"\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]=\"{'vertical-separator': options.verticalSeparator}\">\n        \n      </th>\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"{'vertical-separator': options.verticalSeparator}\">\n        <div *ngIf=\"isFirst\">\n          <div class=\"value-cell\">\n            <div [innerHTML]=\"formatIndentation(element)\"></div>\n            <mat-icon [ngStyle]=\"{'visibility': element.children.length ? 'visible' : 'hidden'}\" (click)=\"onNodeClick(element)\">\n              \n            </mat-icon>\n            <div></div>\n          </div>\n        </div>\n        <div *ngIf=\"!isFirst\">\n          \n        </div>\n      </td>\n    </ng-container>\n  </div>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row [ngClass]=\"{'highlight-on-hover': options.highlightRowOnHover}\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n\n</table>\n",
                    styles: ["table{width:100%}.value-cell{display:flex;align-items:center}mat-icon{cursor:pointer}.highlight-on-hover:hover{background-color:#f0f0f5}td[class*=' mat-column']{width:10vw;min-width:10vw;max-width:10vw}.mat-cell,.mat-header-cell{padding:10px}.vertical-separator{border-left:1px solid #f0f0f5}"]
                }] }
    ];

Here in this template code I have added matSort with table. But this is not working out.Please help if anybody having idea about it.

Note - This piece of code is from that library under folder structure - ng-material-treetable/fesm5/ng-material-treetable.js Thanks in Advance !!



from Implementing Matsort and Matpaginator in Angular Material TreeTable Component

No comments:

Post a Comment