UNPKG

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

2 lines 5.5 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("angular-pivot-table",["exports","@angular/core","@angular/common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["angular-pivot-table"]={},e.ng.core,e.ng.common)}(this,(function(e,t,o){"use strict";var r=function(){};r.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new r},token:r,providedIn:"root"}),r.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],r.ctorParameters=function(){return[]};Object.create;function n(e,t){var o="function"==typeof Symbol&&e[Symbol.iterator];if(!o)return e;var r,n,s=o.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=s.next()).done;)a.push(r.value)}catch(e){n={error:e}}finally{try{r&&!r.done&&(o=s.return)&&o.call(s)}finally{if(n)throw n.error}}return a}Object.create;var s=function(){function e(){this.processed_data=[],this.processed_headers=[]}return e.prototype.getRawData=function(){return this.raw_data},e.prototype.setRawData=function(e){this.raw_data=e},e.prototype.getProcessedData=function(){return this.processed_data},e.prototype.setProcessedData=function(e){this.processed_data=e},e.prototype.getProcessedHeaders=function(){return this.processed_headers},e.prototype.processData=function(e,t){this.setRawData(e);var o=this.findUnique(this.pluck(e,t.rows)),r=this.findUnique(this.pluck(e,t.columns));this.processed_headers=function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(n(arguments[t]));return e}(r);for(var s=0;s<o.length;s++){for(var a=o[s],i=[a],c=0,d=0;d<r.length;d++){for(var l=r[d],u=0,p=0;p<e.length;p++){var f=e[p];f[t.rows]==a&&f[t.columns]==l&&u++}i.push(u),c+=u}i.push(c),this.processed_data.push(i)}for(var h=["Total"],b=1;b<this.processed_data[0].length;b++)this.addSummaryColumn(h,b);this.processed_data.push(h)},e.prototype.addSummaryColumn=function(e,t){e.push(this.processed_data.map((function(e){return e[t]})).reduce((function(e,t){return e+t}),0))},e.prototype.findUnique=function(e){return e.filter((function(t,o){return e.indexOf(t)==o}))},e.prototype.pluck=function(e,t){return e.map((function(e){return e[t]}))},e}(),a=function(){function e(){this.source=[],this.default_configs={rows:"",columns:"",css:{row_selection_class:"selected",header_class:"",table_class:""},data_loading_text:"Loading...",row_class_function:function(){return!0},row_select_function:function(){return!0}},this.store=new s,this.processed_data=[],this.processed_headers=[]}return e.prototype.ngOnInit=function(){this.validateConfigs(),this.setDefaultConfigs()},e.prototype.ngOnChanges=function(){this.validateConfigs(),this.setDefaultConfigs(),this.store.processData(this.source,this.configs),this.processed_data=this.store.getProcessedData(),this.processed_headers=this.store.getProcessedHeaders()},e.prototype.validateConfigs=function(){this.source?this.configs||window.console.warn("configs can't be empty!"):window.console.warn("source can't be empty!")},e.prototype.setDefaultConfigs=function(){this.configs=Object.assign({},this.default_configs,this.configs),this.configs.css=Object.assign({},this.default_configs.css,this.configs.css)},e}();a.decorators=[{type:t.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}"]}]}],a.ctorParameters=function(){return[]},a.propDecorators={source:[{type:t.Input}],configs:[{type:t.Input}]};var i=function(){};i.decorators=[{type:t.NgModule,args:[{declarations:[a],imports:[o.CommonModule],exports:[a]}]}],e.AngularPivotTableComponent=a,e.AngularPivotTableModule=i,e.AngularPivotTableService=r,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=angular-pivot-table.umd.min.js.map