angular-datatables
Version:
Angular directive for DataTables
112 lines • 5.35 kB
JavaScript
/**
* @license
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://raw.githubusercontent.com/l-lin/angular-datatables/master/LICENSE
*/
import { Directive, ElementRef, Input, Renderer2, ViewContainerRef } from '@angular/core';
import { Subject } from 'rxjs';
var DataTableDirective = /** @class */ (function () {
function DataTableDirective(el, vcr, renderer) {
this.el = el;
this.vcr = vcr;
this.renderer = renderer;
/**
* The DataTable option you pass to configure your table.
*/
this.dtOptions = {};
}
DataTableDirective.prototype.ngOnInit = function () {
var _this = this;
if (this.dtTrigger) {
this.dtTrigger.subscribe(function () {
_this.displayTable();
});
}
else {
this.displayTable();
}
};
DataTableDirective.prototype.ngOnDestroy = function () {
if (this.dtTrigger) {
this.dtTrigger.unsubscribe();
}
if (this.dt) {
this.dt.destroy(true);
}
};
DataTableDirective.prototype.displayTable = function () {
var _this = this;
var self = this;
this.dtInstance = new Promise(function (resolve, reject) {
Promise.resolve(_this.dtOptions).then(function (dtOptions) {
// Using setTimeout as a "hack" to be "part" of NgZone
setTimeout(function () {
// Assign DT properties here
var options = {
rowCallback: function (row, data, index) {
if (dtOptions.columns) {
var columns_1 = dtOptions.columns;
// Filter columns with pipe declared
var colsWithPipe = columns_1.filter(function (x) { return x.ngPipeInstance && !x.ngTemplateRef; });
// Iterate
colsWithPipe.forEach(function (el) {
var pipe = el.ngPipeInstance;
// find index of column using `data` attr
var i = columns_1.findIndex(function (e) { return e.data == el.data; });
// get <td> element which holds data using index
var rowFromCol = row.childNodes.item(i);
// Transform data with Pipe
var rowVal = $(rowFromCol).text();
var rowValAfter = pipe.transform(rowVal);
// Apply transformed string to <td>
$(rowFromCol).text(rowValAfter);
});
// Filter columns using `ngTemplateRef`
var colsWithTemplate = columns_1.filter(function (x) { return x.ngTemplateRef && !x.ngPipeInstance; });
colsWithTemplate.forEach(function (el) {
var _a = el.ngTemplateRef, ref = _a.ref, context = _a.context;
// get <td> element which holds data using index
var index = columns_1.findIndex(function (e) { return e.data == el.data; });
var cellFromIndex = row.childNodes.item(index);
// render onto DOM
// finalize context to be sent to user
var _context = Object.assign({}, context, context === null || context === void 0 ? void 0 : context.userData, {
adtData: data
});
var instance = self.vcr.createEmbeddedView(ref, _context);
self.renderer.appendChild(cellFromIndex, instance.rootNodes[0]);
});
}
// run user specified row callback if provided.
if (_this.dtOptions.rowCallback) {
_this.dtOptions.rowCallback(row, data, index);
}
}
};
// merge user's config with ours
options = Object.assign({}, dtOptions, options);
_this.dt = $(_this.el.nativeElement).DataTable(options);
resolve(_this.dt);
});
});
});
};
DataTableDirective.decorators = [
{ type: Directive, args: [{
selector: '[datatable]'
},] }
];
DataTableDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: ViewContainerRef },
{ type: Renderer2 }
]; };
DataTableDirective.propDecorators = {
dtOptions: [{ type: Input }],
dtTrigger: [{ type: Input }]
};
return DataTableDirective;
}());
export { DataTableDirective };
//# sourceMappingURL=angular-datatables.directive.js.map