ngx-smart-datatable
Version:
A light weight Angular component used as a wrapper for DataTables.net, the smartest datatable.
340 lines (333 loc) • 16.5 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Inject, ɵɵdefineInjectable, ɵɵinject, Injectable, EventEmitter, Input, Output, Component, NgModule } from '@angular/core';
import { forkJoin, ReplaySubject } from 'rxjs';
import { DOCUMENT, CommonModule } from '@angular/common';
var NgxSmartDatatableService = /** @class */ (function () {
function NgxSmartDatatableService(document) {
this.document = document;
this._loadedLibraries = {};
}
NgxSmartDatatableService.prototype.lazyLoadDataTableMainLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.21/datatables.min.js'),
this.loadStyle('https://cdn.datatables.net/v/bs4/dt-1.10.21/datatables.min.css'),
this.loadStyle('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableColReorderLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js'),
this.loadStyle('https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableRowReorderLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js'),
this.loadStyle('https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableSelectLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js'),
this.loadStyle('https://cdn.datatables.net/select/1.3.1/css/select.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableFixedHeaderLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js'),
this.loadStyle('https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableFixedColumnsLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js'),
this.loadStyle('https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableButtonsLib = function () {
return forkJoin([
this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js'),
this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js'),
this.loadScript('https://cdn.datatables.net/v/bs4/jszip-2.5.0/b-1.6.2/b-colvis-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.js'),
this.loadStyle('https://cdn.datatables.net/v/bs4/jszip-2.5.0/b-1.6.2/b-colvis-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableAutoFillLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/v/bs4/af-2.3.5/datatables.min.js'),
this.loadStyle('https://cdn.datatables.net/v/bs4/af-2.3.5/datatables.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableKeyTableLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/keytable/2.5.2/js/dataTables.keyTable.min.js'),
this.loadStyle('https://cdn.datatables.net/keytable/2.5.2/css/keyTable.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableResponsiveLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/v/bs4/r-2.2.5/datatables.min.js'),
this.loadStyle('https://cdn.datatables.net/v/bs4/r-2.2.5/datatables.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableRowGroupLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js'),
this.loadStyle('https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableScrollerLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js'),
this.loadStyle('https://cdn.datatables.net/scroller/2.0.2/css/scroller.bootstrap4.min.css'),
]);
};
NgxSmartDatatableService.prototype.lazyLoadDataTableSearchPanesLib = function () {
return forkJoin([
this.loadScript('https://cdn.datatables.net/v/bs4/sp-1.1.1/datatables.min.js'),
this.loadStyle('https://cdn.datatables.net/v/bs4/sp-1.1.1/datatables.min.css'),
]);
};
NgxSmartDatatableService.prototype.loadScript = function (url) {
var _this = this;
if (this._loadedLibraries[url]) {
return this._loadedLibraries[url].asObservable();
}
this._loadedLibraries[url] = new ReplaySubject();
var script = this.document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = url;
script.onload = function () {
_this._loadedLibraries[url].next();
_this._loadedLibraries[url].complete();
};
this.document.body.appendChild(script);
return this._loadedLibraries[url].asObservable();
};
NgxSmartDatatableService.prototype.loadStyle = function (url) {
var _this = this;
if (this._loadedLibraries[url]) {
return this._loadedLibraries[url].asObservable();
}
this._loadedLibraries[url] = new ReplaySubject();
var style = this.document.createElement('link');
style.type = 'text/css';
style.href = url;
style.rel = 'stylesheet';
style.onload = function () {
_this._loadedLibraries[url].next();
_this._loadedLibraries[url].complete();
};
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
return this._loadedLibraries[url].asObservable();
};
NgxSmartDatatableService.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
NgxSmartDatatableService.ɵprov = ɵɵdefineInjectable({ factory: function NgxSmartDatatableService_Factory() { return new NgxSmartDatatableService(ɵɵinject(DOCUMENT)); }, token: NgxSmartDatatableService, providedIn: "root" });
NgxSmartDatatableService = __decorate([
Injectable({
providedIn: 'root',
}),
__param(0, Inject(DOCUMENT))
], NgxSmartDatatableService);
return NgxSmartDatatableService;
}());
var NgxSmartDatatableComponent = /** @class */ (function () {
function NgxSmartDatatableComponent(ngxSmartDatatableSvc, document) {
this.ngxSmartDatatableSvc = ngxSmartDatatableSvc;
this.document = document;
this.loadedjQuery = new EventEmitter();
this.emittedEvent = new EventEmitter();
this.sortedOrder = new EventEmitter();
this.selectedRows = new EventEmitter();
this.deselectedRows = new EventEmitter();
this.selectedKeyCells = new EventEmitter();
this.reorderedRow = new EventEmitter();
this.reorderedColumn = new EventEmitter();
this.changedPage = new EventEmitter();
this.autoFilledCells = new EventEmitter();
this.displayedResponsive = new EventEmitter();
this.loadedTable = new EventEmitter();
this.loadTable = false;
}
NgxSmartDatatableComponent.prototype.ngAfterViewInit = function () { };
NgxSmartDatatableComponent.prototype.ngOnInit = function () {
var _this = this;
this.ngxSmartDatatableSvc.lazyLoadDataTableMainLib().subscribe(function (_) {
if (!jQuery) {
jQuery = _this.document.defaultView.jQuery;
}
_this.loadedjQuery.emit(jQuery);
_this.settings = _this.settings || {};
var libs = [];
_this.settings.colReorder &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableColReorderLib());
_this.settings.rowReorder &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableRowReorderLib());
_this.settings.select &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableSelectLib());
_this.settings.fixedHeader &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableFixedHeaderLib());
_this.settings.fixedColumns &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableFixedColumnsLib());
_this.settings.autoFill &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableAutoFillLib());
_this.settings.keys &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableKeyTableLib());
_this.settings.responsive &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableResponsiveLib());
_this.settings.rowGroup &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableRowGroupLib());
_this.settings.scroller &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableScrollerLib());
_this.settings.searchPanes &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableSearchPanesLib());
_this.settings.buttons &&
_this.settings.buttons.length &&
libs.push(_this.ngxSmartDatatableSvc.lazyLoadDataTableButtonsLib());
if (libs.length) {
forkJoin(libs).subscribe(function (_) {
_this.initTable();
});
}
else {
_this.initTable();
}
});
};
NgxSmartDatatableComponent.prototype.initTable = function () {
var _this = this;
jQuery &&
setTimeout(function () {
_this.loadTable = true;
(function ($) {
$(document).ready(function () {
var table = $('#smartTable').DataTable(_this.settings);
_this.loadedTable.emit(table);
_this.settings.eventNames &&
Array.isArray(_this.settings.eventNames) &&
_this.settings.eventNames.forEach(function (event) {
table.on(event, function (e, parm1, parm2, parm3, parm4, parm5) {
_this.emittedEvent.emit({
e: e,
parm1: parm1,
parm2: parm2,
parm3: parm3,
parm4: parm4,
parm5: parm5,
});
});
});
table.on('order', function (e, details, changes) {
_this.sortedOrder.emit(changes);
});
table.on('key', function (e, datatable, key, cell, originalEvent) {
_this.selectedKeyCells.emit({ key: key, cell: cell });
});
table.on('row-reorder', function (e, details, changes) {
_this.reorderedRow.emit(details);
});
table.on('column-reorder', function (e, settings, details) {
_this.reorderedColumn.emit(details);
});
table.on('page', function (e, settings) {
var info = table.page.info();
_this.changedPage.emit(info);
});
table.on('select', function (e, dt, type, indexes) {
if (type === 'row') {
var rows = table.rows({ selected: true }).data();
_this.selectedRows.emit(rows);
}
});
table.on('deselect', function (e, dt, type, indexes) {
if (type === 'row') {
var rows = table.rows(indexes).data();
_this.deselectedRows.emit(rows);
}
});
table.on('autoFill', function (e, datatable, cells) {
_this.autoFilledCells.emit(cells);
});
table.on('responsive-display', function (e, datatable, row, showHide, update) {
_this.displayedResponsive.emit({ row: row, showHide: showHide, update: update });
});
});
})(jQuery);
}, 100);
};
NgxSmartDatatableComponent.ctorParameters = function () { return [
{ type: NgxSmartDatatableService },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
__decorate([
Input()
], NgxSmartDatatableComponent.prototype, "settings", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "loadedjQuery", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "emittedEvent", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "sortedOrder", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "selectedRows", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "deselectedRows", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "selectedKeyCells", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "reorderedRow", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "reorderedColumn", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "changedPage", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "autoFilledCells", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "displayedResponsive", void 0);
__decorate([
Output()
], NgxSmartDatatableComponent.prototype, "loadedTable", void 0);
NgxSmartDatatableComponent = __decorate([
Component({
selector: 'ngx-smart-datatable',
template: "<table\n *ngIf=\"loadTable\"\n id=\"smartTable\"\n [ngClass]=\"{\n 'table-striped': settings?.stylings?.striped,\n 'table-bordered': settings?.stylings?.bordered,\n 'table-hover': settings?.stylings?.hover\n }\"\n class=\"table\"\n style=\"width: 100%;\"\n></table>\n"
}),
__param(1, Inject(DOCUMENT))
], NgxSmartDatatableComponent);
return NgxSmartDatatableComponent;
}());
var NgxSmartDatatableModule = /** @class */ (function () {
function NgxSmartDatatableModule() {
}
NgxSmartDatatableModule = __decorate([
NgModule({
declarations: [NgxSmartDatatableComponent],
imports: [CommonModule],
exports: [NgxSmartDatatableComponent],
})
], NgxSmartDatatableModule);
return NgxSmartDatatableModule;
}());
/*
* Public API Surface of ngx-smart-datatable
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxSmartDatatableComponent, NgxSmartDatatableModule, NgxSmartDatatableService };
//# sourceMappingURL=ngx-smart-datatable.js.map