@petkit/ngx-table-descartes
Version:
Angular descartes table component
159 lines (150 loc) • 13.5 kB
JavaScript
import { Component, Input, NgModule } from '@angular/core';
import { groupBy, keys, values, orderBy, isArray } from 'lodash-es';
import { of, combineLatest } from 'rxjs';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class TableDescartesComponent {
constructor() {
this.data = of([]);
this.order = of(null);
this.table = [];
}
/**
* @return {?}
*/
ngOnInit() {
combineLatest([
this.data,
this.order,
]).subscribe(([data, order]) => {
if (!isArray(data)) {
return;
}
/** @type {?} */
const _order = order || (data[0] && keys(data[0]) || null);
this._order = _order;
if (!isArray(_order)) {
return;
}
/** @type {?} */
const orderData = orderBy(data, _order);
this.orderData = orderData;
/** @type {?} */
const aoaData = this.getAoA(orderData, _order);
this.aoaData = aoaData;
this.table = this.format(aoaData);
});
}
/**
* @param {?} AoO
* @param {?} order
* @return {?}
*/
getAoA(AoO, order) {
return AoO.map(row => order.map(key => row[key]).filter(key => key !== undefined));
}
/**
* @param {?} data
* @return {?}
*/
format(data) {
if (!isArray(data) || data.length === 0) {
return [];
}
if (!isArray(data[0]) || data[0].length === 0) {
return [];
}
/** @type {?} */
const groupDatas = groupBy(data, row => row[0]);
/** @type {?} */
const result = values(groupDatas).map(groupData => {
/** @type {?} */
const _data = [];
/** @type {?} */
const firstCols = [];
/** @type {?} */
let nextResult;
groupData.forEach(([col, ...row]) => {
firstCols.push(col);
_data.push(row);
});
/** @type {?} */
const firstCol = {
content: firstCols[0],
rowspan: firstCols.length,
key: this._order ? this._order[this._order.length - _data[0].length - 1] : null,
};
/** @type {?} */
const next = this.format(_data);
if (next.length) {
next[0].unshift(firstCol);
nextResult = next;
}
else {
const [, ...leaves] = firstCols;
nextResult = [[firstCol], ...leaves.map(() => [])];
}
return nextResult;
}).reduce((a, b) => a.concat(b), []);
return result;
}
}
TableDescartesComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-table-descartes',
template: `<table class="ngx-table-descartes__table">
<ng-content></ng-content>
<tbody>
<tr *ngFor="let row of table; index as i;">
<td class="ngx-table-descartes__td" *ngFor="let cell of row" [attr.rowspan]="cell.rowspan">
<ng-container *ngIf="tpl">
<ng-container *ngTemplateOutlet="tpl; context: {cell: cell, row: aoaData[i], obj: orderData[i]};"></ng-container>
</ng-container>
<ng-container *ngIf="!tpl">{{cell.content}}</ng-container>
</td>
</tr>
</tbody>
</table>
`,
styles: [`.ngx-table-descartes__table{border-collapse:collapse;width:100%;text-align:center;vertical-align:middle}.ngx-table-descartes__td{border:1px solid #bfbfbf}`]
},] },
];
/** @nocollapse */
TableDescartesComponent.ctorParameters = () => [];
TableDescartesComponent.propDecorators = {
data: [{ type: Input }],
order: [{ type: Input }],
tpl: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
class TableDescartesModule {
}
TableDescartesModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [TableDescartesComponent],
exports: [TableDescartesComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
export { TableDescartesModule, TableDescartesComponent as ɵa };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGV0a2l0LW5neC10YWJsZS1kZXNjYXJ0ZXMuanMubWFwIiwic291cmNlcyI6WyJuZzovL0BwZXRraXQvbmd4LXRhYmxlLWRlc2NhcnRlcy90YWJsZS1kZXNjYXJ0ZXMvdGFibGUtZGVzY2FydGVzLmNvbXBvbmVudC50cyIsIm5nOi8vQHBldGtpdC9uZ3gtdGFibGUtZGVzY2FydGVzL3RhYmxlLWRlc2NhcnRlcy90YWJsZS1kZXNjYXJ0ZXMubW9kdWxlLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgT25Jbml0LFxuICBJbnB1dCxcbiAgVGVtcGxhdGVSZWYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgZ3JvdXBCeSxcbiAga2V5cyxcbiAgdmFsdWVzLFxuICBvcmRlckJ5LFxuICBpc0FycmF5LFxufSBmcm9tICdsb2Rhc2gtZXMnO1xuaW1wb3J0IHtcbiAgT2JzZXJ2YWJsZSxcbiAgb2YsXG4gIGNvbWJpbmVMYXRlc3QsXG59IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtcbiAgSVRhYmxlRGVzY2FydGVzVGFibGUsXG59IGZyb20gJy4vdGFibGUtZGVzY2FydGVzLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC10YWJsZS1kZXNjYXJ0ZXMnLFxuICB0ZW1wbGF0ZTogYDx0YWJsZSBjbGFzcz1cIm5neC10YWJsZS1kZXNjYXJ0ZXNfX3RhYmxlXCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPHRib2R5PlxuICAgIDx0ciAqbmdGb3I9XCJsZXQgcm93IG9mIHRhYmxlOyBpbmRleCBhcyBpO1wiPlxuICAgICAgPHRkIGNsYXNzPVwibmd4LXRhYmxlLWRlc2NhcnRlc19fdGRcIiAqbmdGb3I9XCJsZXQgY2VsbCBvZiByb3dcIiBbYXR0ci5yb3dzcGFuXT1cImNlbGwucm93c3BhblwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidHBsXCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRwbDsgY29udGV4dDoge2NlbGw6IGNlbGwsIHJvdzogYW9hRGF0YVtpXSwgb2JqOiBvcmRlckRhdGFbaV19O1wiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiF0cGxcIj57e2NlbGwuY29udGVudH19PC9uZy1jb250YWluZXI+XG4gICAgICA8L3RkPlxuICAgIDwvdHI+XG4gIDwvdGJvZHk+XG48L3RhYmxlPlxuXG5cbmAsXG4gIHN0eWxlczogW2Aubmd4LXRhYmxlLWRlc2NhcnRlc19fdGFibGV7Ym9yZGVyLWNvbGxhcHNlOmNvbGxhcHNlO3dpZHRoOjEwMCU7dGV4dC1hbGlnbjpjZW50ZXI7dmVydGljYWwtYWxpZ246bWlkZGxlfS5uZ3gtdGFibGUtZGVzY2FydGVzX190ZHtib3JkZXI6MXB4IHNvbGlkICNiZmJmYmZ9YF1cbn0pXG5leHBvcnQgY2xhc3MgVGFibGVEZXNjYXJ0ZXNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKVxuICBkYXRhOiBPYnNlcnZhYmxlPHtba2V5OiBzdHJpbmddOiBzdHJpbmd9W10+ID0gb2YoW10pO1xuICBASW5wdXQoKVxuICBvcmRlcjogT2JzZXJ2YWJsZTxzdHJpbmdbXSB8IG51bGw+ID0gb2YobnVsbCk7XG4gIHByaXZhdGUgX29yZGVyOiBzdHJpbmdbXSB8IG51bGw7XG4gIEBJbnB1dCgpXG4gIHRwbDogVGVtcGxhdGVSZWY8YW55PjtcblxuXG4gIG9yZGVyRGF0YToge1trZXk6IHN0cmluZ106IHN0cmluZ31bXVtdO1xuICBhb2FEYXRhOiBzdHJpbmdbXVtdO1xuICB0YWJsZTogSVRhYmxlRGVzY2FydGVzVGFibGVbXVtdID0gW107XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBjb21iaW5lTGF0ZXN0KFtcbiAgICAgIHRoaXMuZGF0YSxcbiAgICAgIHRoaXMub3JkZXIsXG4gICAgXSkuc3Vic2NyaWJlKChbZGF0YSwgb3JkZXJdKSA9PiB7XG4gICAgICBpZiAoIWlzQXJyYXkoZGF0YSkpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBjb25zdCBfb3JkZXIgPSBvcmRlciB8fCAoZGF0YVswXSAmJiBrZXlzKGRhdGFbMF0pIHx8IG51bGwpO1xuICAgICAgdGhpcy5fb3JkZXIgPSBfb3JkZXI7XG4gICAgICBpZiAoIWlzQXJyYXkoX29yZGVyKSkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIGNvbnN0IG9yZGVyRGF0YSA9IG9yZGVyQnkoZGF0YSwgX29yZGVyKTtcbiAgICAgIHRoaXMub3JkZXJEYXRhID0gb3JkZXJEYXRhO1xuXG4gICAgICBjb25zdCBhb2FEYXRhID0gdGhpcy5nZXRBb0Eob3JkZXJEYXRhLCBfb3JkZXIpO1xuICAgICAgdGhpcy5hb2FEYXRhID0gYW9hRGF0YTtcblxuICAgICAgdGhpcy50YWJsZSA9IHRoaXMuZm9ybWF0KGFvYURhdGEpO1xuICAgIH0pO1xuXG4gIH1cblxuICBnZXRBb0EoQW9POiBvYmplY3RbXSwgb3JkZXI6IGFueVtdKTogc3RyaW5nW11bXSB7XG4gICAgcmV0dXJuIEFvTy5tYXAocm93ID0+IG9yZGVyLm1hcChrZXkgPT4gcm93W2tleV0pLmZpbHRlcihrZXkgPT4ga2V5ICE9PSB1bmRlZmluZWQpKTtcbiAgfVxuXG4gIGZvcm1hdChkYXRhOiBhbnlbXVtdKTogYW55W11bXSB7XG4gICAgaWYgKCFpc0FycmF5KGRhdGEpIHx8IGRhdGEubGVuZ3RoID09PSAwKSB7XG4gICAgICByZXR1cm4gW107XG4gICAgfVxuXG4gICAgaWYgKCFpc0FycmF5KGRhdGFbMF0pIHx8IGRhdGFbMF0ubGVuZ3RoID09PSAwKSB7XG4gICAgICByZXR1cm4gW107XG4gICAgfVxuXG4gICAgY29uc3QgZ3JvdXBEYXRhcyA9IGdyb3VwQnkoZGF0YSwgcm93ID0+IHJvd1swXSk7XG5cbiAgICBjb25zdCByZXN1bHQgPSB2YWx1ZXMoZ3JvdXBEYXRhcykubWFwKGdyb3VwRGF0YSA9PiB7XG4gICAgICBjb25zdCBfZGF0YTogYW55W10gPSBbXTtcbiAgICAgIGNvbnN0IGZpcnN0Q29sczogYW55W10gPSBbXTtcbiAgICAgIGxldCBuZXh0UmVzdWx0O1xuXG4gICAgICBncm91cERhdGEuZm9yRWFjaCgoW2NvbCwgLi4ucm93XSkgPT4ge1xuICAgICAgICBmaXJzdENvbHMucHVzaChjb2wpO1xuICAgICAgICBfZGF0YS5wdXNoKHJvdyk7XG4gICAgICB9KTtcblxuICAgICAgY29uc3QgZmlyc3RDb2wgPSB7XG4gICAgICAgIGNvbnRlbnQ6IGZpcnN0Q29sc1swXSxcbiAgICAgICAgcm93c3BhbjogZmlyc3RDb2xzLmxlbmd0aCxcbiAgICAgICAga2V5OiB0aGlzLl9vcmRlciA/IHRoaXMuX29yZGVyW3RoaXMuX29yZGVyLmxlbmd0aCAtIF9kYXRhWzBdLmxlbmd0aCAtIDFdIDogbnVsbCxcbiAgICAgIH07XG5cbiAgICAgIGNvbnN0IG5leHQgPSB0aGlzLmZvcm1hdChfZGF0YSk7XG5cbiAgICAgIGlmIChuZXh0Lmxlbmd0aCkge1xuICAgICAgICBuZXh0WzBdLnVuc2hpZnQoZmlyc3RDb2wpO1xuICAgICAgICBuZXh0UmVzdWx0ID0gbmV4dDtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnN0IFssIC4uLmxlYXZlc10gPSBmaXJzdENvbHM7XG4gICAgICAgIG5leHRSZXN1bHQgPSBbW2ZpcnN0Q29sXSwgLi4ubGVhdmVzLm1hcCgoKSA9PiBbXSldO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gbmV4dFJlc3VsdDtcbiAgICB9KS5yZWR1Y2UoKGEsIGIpID0+IGEuY29uY2F0KGIpLCBbXSk7XG5cbiAgICByZXR1cm4gcmVzdWx0O1xuICB9XG59XG4iLCJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFRhYmxlRGVzY2FydGVzQ29tcG9uZW50IH0gZnJvbSAnLi90YWJsZS1kZXNjYXJ0ZXMuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZVxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtUYWJsZURlc2NhcnRlc0NvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtUYWJsZURlc2NhcnRlc0NvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgVGFibGVEZXNjYXJ0ZXNNb2R1bGUgeyB9XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUE7SUF3REU7b0JBWjhDLEVBQUUsQ0FBQyxFQUFFLENBQUM7cUJBRWYsRUFBRSxDQUFDLElBQUksQ0FBQztxQkFRWCxFQUFFO0tBR25DOzs7O0lBRUQsUUFBUTtRQUNOLGFBQWEsQ0FBQztZQUNaLElBQUksQ0FBQyxJQUFJO1lBQ1QsSUFBSSxDQUFDLEtBQUs7U0FDWCxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDO1lBQ3pCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7Z0JBQ2xCLE9BQU87YUFDUjs7WUFFRCxNQUFNLE1BQU0sR0FBRyxLQUFLLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsQ0FBQztZQUMzRCxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztZQUNyQixJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxFQUFFO2dCQUNwQixPQUFPO2FBQ1I7O1lBRUQsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUFDLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQztZQUN4QyxJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQzs7WUFFM0IsTUFBTSxPQUFPLEdBQUcsSUFBSSxD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