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