angular-pivot-table
Version:
Angular Pivot Table is a simple pivot table built in Angular. If data needs to be grouped by fields then check out this <a href="https://github.com/debabratapatra/ngtreegrid" target="_blank">ngtreegrid</a> Package. If header needs to be fixed/freezed and
61 lines • 8.22 kB
JavaScript
import { Component, Input } from '@angular/core';
import { Store } from './store/store';
export class AngularPivotTableComponent {
constructor() {
this.source = [];
this.default_configs = {
rows: '',
columns: '',
css: {
row_selection_class: 'selected',
header_class: '',
table_class: ''
},
data_loading_text: 'Loading...',
row_class_function: () => true,
row_select_function: () => true
};
this.store = new Store();
this.processed_data = [];
this.processed_headers = [];
}
ngOnInit() {
this.validateConfigs();
this.setDefaultConfigs();
}
ngOnChanges() {
this.validateConfigs();
this.setDefaultConfigs();
this.store.processData(this.source, this.configs);
this.processed_data = this.store.getProcessedData();
this.processed_headers = this.store.getProcessedHeaders();
}
validateConfigs() {
if (!this.source) {
window.console.warn('source can\'t be empty!');
return;
}
if (!this.configs) {
window.console.warn('configs can\'t be empty!');
return;
}
}
setDefaultConfigs() {
this.configs = Object.assign({}, this.default_configs, this.configs);
// Deep clone.
this.configs.css = Object.assign({}, this.default_configs.css, this.configs.css);
}
}
AngularPivotTableComponent.decorators = [
{ type: Component, args: [{
selector: 'db-angular-pivot-table',
template: "<table [attr.class]=\"'db-table-view' + configs.css.table_class\">\n <thead>\n <tr>\n <th class=\"header-corner\">\n <table class=\"header-corner\">\n <tr>\n <td class=\"corner-top\">{{configs.columns}}</td>\n </tr>\n <tr>\n <td class=\"corner-bottom\">{{configs.rows}}</td>\n </tr>\n </table>\n </th>\n <th *ngFor=\"let header of processed_headers\">\n {{header}}\n </th>\n <th>\n Total\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor=\"let row of processed_data\">\n <td *ngFor=\"let col of row\">\n {{col}}\n </td>\n </tr>\n </tbody>\n</table>",
styles: [".db-table-view{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;max-width:100%;overflow:auto;word-break:normal;word-break:keep-all;border:1px solid grey;color:#4b4b4b}.db-table-view table.header-corner{width:100%;border-collapse:collapse}.db-table-view table.header-corner td{font-weight:400}.db-table-view table.header-corner td.corner-top{border-width:0 0 1px}.db-table-view table.header-corner td.corner-bottom{border-width:0}.db-table-view tbody tr td:first-child{font-weight:600}.db-table-view tr.selected{background-color:#e2e7eb}.db-table-view tr th{font-size:1rem;font-weight:600;line-height:1.25;color:#181818;border:1px solid #cdd5dc;vertical-align:middle;position:relative;box-sizing:border-box;padding:.5rem}.db-table-view tr th.header-corner{padding:0}.db-table-view tr td{border:1px solid #cdd5dc;vertical-align:middle;position:relative;padding:.5rem;box-sizing:border-box}"]
},] }
];
AngularPivotTableComponent.ctorParameters = () => [];
AngularPivotTableComponent.propDecorators = {
source: [{ type: Input }],
configs: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1waXZvdC10YWJsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXBpdm90LXRhYmxlL3NyYy9saWIvYW5ndWxhci1waXZvdC10YWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFFekQsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQU90QyxNQUFNLE9BQU8sMEJBQTBCO0lBd0JyQztRQXRCQSxXQUFNLEdBQVUsRUFBRSxDQUFDO1FBS25CLG9CQUFlLEdBQVk7WUFDekIsSUFBSSxFQUFFLEVBQUU7WUFDUixPQUFPLEVBQUUsRUFBRTtZQUNYLEdBQUcsRUFBRTtnQkFDSCxtQkFBbUIsRUFBRSxVQUFVO2dCQUMvQixZQUFZLEVBQUUsRUFBRTtnQkFDaEIsV0FBVyxFQUFFLEVBQUU7YUFDaEI7WUFDRCxpQkFBaUIsRUFBRSxZQUFZO1lBQy9CLGtCQUFrQixFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUk7WUFDOUIsbUJBQW1CLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSTtTQUNoQyxDQUFDO1FBQ0YsVUFBSyxHQUFHLElBQUksS0FBSyxFQUFFLENBQUM7UUFFcEIsbUJBQWMsR0FBVSxFQUFFLENBQUM7UUFDM0Isc0JBQWlCLEdBQVUsRUFBRSxDQUFDO0lBRWQsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUNwQixJQUFJLENBQUMsTUFBTSxFQUNYLElBQUksQ0FBQyxPQUFPLENBQ2IsQ0FBQztRQUNGLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1FBQ3BELElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDNUQsQ0FBQztJQUVELGVBQWU7UUFDYixJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNoQixNQUFNLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDO1lBQy9DLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2pCLE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLDBCQUEwQixDQUFDLENBQUM7WUFDaEQsT0FBTztTQUNSO0lBQ0gsQ0FBQztJQUVELGlCQUFpQjtRQUNmLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLGVBQWUsRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFckUsY0FBYztRQUNkLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxlQUFlLENBQUMsR0FBRyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDbkYsQ0FBQzs7O1lBL0RGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsd0JBQXdCO2dCQUNsQyx1M0JBQW1EOzthQUVwRDs7OztxQkFFRSxLQUFLO3NCQUdMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbmZpZ3MgfSBmcm9tICcuL21vZGVscy9Db25maWdzLm1vZGVsJztcbmltcG9ydCB7IFN0b3JlIH0gZnJvbSAnLi9zdG9yZS9zdG9yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2RiLWFuZ3VsYXItcGl2b3QtdGFibGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vYW5ndWxhci1waXZvdC10YWJsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FuZ3VsYXItcGl2b3QtdGFibGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBBbmd1bGFyUGl2b3RUYWJsZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpXG4gIHNvdXJjZTogYW55W10gPSBbXTtcblxuICBASW5wdXQoKVxuICBjb25maWdzOiBDb25maWdzO1xuXG4gIGRlZmF1bHRfY29uZmlnczogQ29uZmlncyA9IHtcbiAgICByb3dzOiAnJyxcbiAgICBjb2x1bW5zOiAnJyxcbiAgICBjc3M6IHtcbiAgICAgIHJvd19zZWxlY3Rpb25fY2xhc3M6ICdzZWxlY3RlZCcsXG4gICAgICBoZWFkZXJfY2xhc3M6ICcnLFxuICAgICAgdGFibGVfY2xhc3M6ICcnXG4gICAgfSxcbiAgICBkYXRhX2xvYWRpbmdfdGV4dDogJ0xvYWRpbmcuLi4nLFxuICAgIHJvd19jbGFzc19mdW5jdGlvbjogKCkgPT4gdHJ1ZSxcbiAgICByb3dfc2VsZWN0X2Z1bmN0aW9uOiAoKSA9PiB0cnVlXG4gIH07XG4gIHN0b3JlID0gbmV3IFN0b3JlKCk7XG4gIFxuICBwcm9jZXNzZWRfZGF0YTogYW55W10gPSBbXTtcbiAgcHJvY2Vzc2VkX2hlYWRlcnM6IGFueVtdID0gW107XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnZhbGlkYXRlQ29uZmlncygpO1xuICAgIHRoaXMuc2V0RGVmYXVsdENvbmZpZ3MoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMudmFsaWRhdGVDb25maWdzKCk7XG4gICAgdGhpcy5zZXREZWZhdWx0Q29uZmlncygpO1xuICAgIHRoaXMuc3RvcmUucHJvY2Vzc0RhdGEoXG4gICAgICB0aGlzLnNvdXJjZSxcbiAgICAgIHRoaXMuY29uZmlnc1xuICAgICk7XG4gICAgdGhpcy5wcm9jZXNzZWRfZGF0YSA9IHRoaXMuc3RvcmUuZ2V0UHJvY2Vzc2VkRGF0YSgpO1xuICAgIHRoaXMucHJvY2Vzc2VkX2hlYWRlcnMgPSB0aGlzLnN0b3JlLmdldFByb2Nlc3NlZEhlYWRlcnMoKTtcbiAgfVxuXG4gIHZhbGlkYXRlQ29uZmlncygpIHtcbiAgICBpZiAoIXRoaXMuc291cmNlKSB7XG4gICAgICB3aW5kb3cuY29uc29sZS53YXJuKCdzb3VyY2UgY2FuXFwndCBiZSBlbXB0eSEnKTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKCF0aGlzLmNvbmZpZ3MpIHtcbiAgICAgIHdpbmRvdy5jb25zb2xlLndhcm4oJ2NvbmZpZ3MgY2FuXFwndCBiZSBlbXB0eSEnKTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gIH1cblxuICBzZXREZWZhdWx0Q29uZmlncygpIHtcbiAgICB0aGlzLmNvbmZpZ3MgPSBPYmplY3QuYXNzaWduKHt9LCB0aGlzLmRlZmF1bHRfY29uZmlncywgdGhpcy5jb25maWdzKTtcblxuICAgIC8vIERlZXAgY2xvbmUuXG4gICAgdGhpcy5jb25maWdzLmNzcyA9IE9iamVjdC5hc3NpZ24oe30sIHRoaXMuZGVmYXVsdF9jb25maWdzLmNzcywgdGhpcy5jb25maWdzLmNzcyk7XG4gIH1cblxufVxuIl19