angular-datatables
Version:
Angular directive for DataTables
147 lines (141 loc) • 7.22 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.angular = global.angular || {}, global.angular.datatables = {}), global.ng.core, null, global.ng.common));
}(this, (function (exports, core, rxjs, common) { 'use strict';
/**
* @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
*/
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: core.Directive, args: [{
selector: '[datatable]'
},] }
];
DataTableDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.ViewContainerRef },
{ type: core.Renderer2 }
]; };
DataTableDirective.propDecorators = {
dtOptions: [{ type: core.Input }],
dtTrigger: [{ type: core.Input }]
};
return DataTableDirective;
}());
/**
* @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
*/
var DataTablesModule = /** @class */ (function () {
function DataTablesModule() {
}
DataTablesModule.forRoot = function () {
return {
ngModule: DataTablesModule
};
};
DataTablesModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule],
declarations: [DataTableDirective],
exports: [DataTableDirective]
},] }
];
return DataTablesModule;
}());
exports.DataTableDirective = DataTableDirective;
exports.DataTablesModule = DataTablesModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=angular-datatables.umd.js.map