Pivot Tischkomponente für Winkel 2?

Question

Ich bin auf der Suche nach einer UI-Komponente mit einigen reichen Pivot-Tabellenfunktionen.

Ich schaute auf ag-Grid. Scheint die richtige Passform zu sein, aber es ist nicht kostenlos und das ist im Moment keine Option. Vielleicht kann es in der Zukunft möglich sein, aber jetzt muss es frei sein.

Wenn es keine Option für angular 2 gibt, wäre es eine gute Idee, mit einer JavaScript-Komponente von Vanille Abhilfe zu schaffen?

Answer 1

Siehe igPivotGrid von Ignite UI-

http://igniteui.github.io/igniteui-angular2/samples/igPivotGrid-XmlaDataSource/igPivotGrid-XmlaDataSource.html

messkomponenten-

import {Component, Inject, ElementRef, EventEmitter, HostListener} from '@angular/core'; 
import {IgPivotDataSelectorComponent, IgPivotGridComponent} from "./src/igniteui.angular2.ts"; 
import {bootstrap } from '@angular/platform-browser-dynamic' 

declare var jQuery: any; 
@Component({ 
    selector: 'my-app', 
    templateUrl: "./igPivotGrid-XmlaDataSourceTemplate.html", 
    directives: [IgPivotDataSelectorComponent, IgPivotGridComponent] 
}) 
export class AppComponent { 
    private optsGrid: IgPivotGrid; 
    private optsSelector: IgPivotDataSelector; 
    private selectorId: string; 
    private gridId: string; 
    private data: any; 

    constructor() { 
     this.data = new jQuery.ig.OlapXmlaDataSource({ 
      serverUrl: 'http://sampledata.infragistics.com/olap/msmdpump.dll', 
      catalog: 'Adventure Works DW Standard Edition', 
      cube: 'Adventure Works', 
      rows: "[Ship Date].[Calendar]", 
      columns: "[Delivery Date].[Calendar]", 
      measures: "[Measures].[Product Gross Profit Margin Status],[Measures].[Product Gross Profit Margin Goal]", 
     }); 

     this.selectorId = "dataSelector"; 
     this.gridId = "pivotGrid"; 

     this.optsGrid = { 
      dataSource: this.data, 
      height: "650px" 
     }; 

     this.optsSelector = { 
      dataSource: this.data, 
      height: "650px", 
      width: "30%" 
     }; 
    } 
} 

bootstrap(AppComponent); 

HTML-Vorlage:

<h1 class="push-down-md">igPivotGrid using XmlDataSource</h1> 

<div class="row"> 
    <div class="col-md-12"> 
     <ig-pivot-grid [(widgetId)]="gridId" [(options)]="optsGrid"> 
     </ig-pivot-grid> 
     <ig-pivot-data-selector [(widgetId)]="selectorId" [(options)]="optsSelector"> 
     </ig-pivot-data-selector> 
    </div> 
</div> 

Dies könnte Suiten Ihre Anforderung. Sehen Sie, ob das hilft.

Answer 2

Haben Sie diese Drehkomponente von Flexmonster http://www.flexmonster.com/doc/integration-with-angular-2/ getestet?

Sieht gut aus, aber ein wenig teuer