git clone https://github.com/flexmonster/pivot-ionic-react.git pivot-ionic
cd pivot-ionic

git clone https://github.com/flexmonster/pivot-ionic.git pivot-ionic
cd pivot-ionic

Go to the src/App.tsx file and add your license or trial key to the FlexmonsterReact.Pivot component:

<FlexmonsterReact.Pivot 
 ref = {this.flexmonsterRef}
 toolbar = {true}
 report = "https://cdn.flexmonster.com/reports/report.json"
 width = "100%"
 licenseKey = "XXXX-XXXX-XXXX-XXXX-XXXX"
 reportcomplete = {this.reportCompleteHandler}
/> 

Go to the src/app/app.html file and add your license or trial key to the fm-pivot directive:

<fm-pivot #pivot 
    [toolbar]="true" 
    [width]="'100%'" 
    [height]="500" 
    [report]="pivotReport"
    [customizeCell]="onCustomizeCell"
    (ready)="onPivotReady($event)"
    (reportcomplete)="onReportComplete($event)"
    [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'">
</fm-pivot>

Flexmonster can be integrated into an Ionic React application in the same way it is integrated into React+Typescript application. See integration with React+Typescript for details.

To create a new Ionic React application, refer to the Ionic documentation.

Flexmonster can be integrated into an Ionic Angular application in the same way it is integrated into Angular application. See integration with Angular for details.

To create a new Ionic Angular application, refer to the Ionic documentation.

In the application designed using Ionic React, the FlexmonsterReact.Pivot component’s usage is the same as in React.

All attributes are equivalent to those passed to the new Flexmonster() API call. Check out the full list of available attributes.

Here is an example demonstrating how different attributes are specified:

<FlexmonsterReact.Pivot 
 toolbar = {true}
 report = "https://cdn.flexmonster.com/reports/report.json"
 width = "100%"
 reportcomplete = {this.reportCompleteHandler}
/> 

In the above example, notice the following line:

reportcomplete = {this.reportCompleteHandler}

Here, we add reportCompleteHandler to the reportcomplete event. Event handlers can be specified for all available Flexmonster events. Here is the full list of Flexmonster events.

In the application designed using Ionic Angular, the fm-pivot directive’s usage is the same as in Angular: the name of each directive’s attribute is surrounded by square brackets, and each attribute’s value can be of any type, including an Angular variable.

To use a string value, enclose it by single quotes within the double quotes (e.g., [report]="'https://cdn.flexmonster.com/reports/report.json'").

All attributes are equivalent to those passed to the new Flexmonster() API call. Check out the full list of available attributes.

Here is an example demonstrating how different attributes are specified:

<fm-pivot
    [toolbar]="true"
    [width]="'100%'"
    [height]="500"
    [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
    [report]="'https://cdn.flexmonster.com/reports/report.json'"
    (reportcomplete)="onReportComplete()">
   Flexmonster will appear here
</fm-pivot>

In the above example, notice the following line:

(reportcomplete)="onReportComplete()"

Here, we add the onReportComplete handler to the reportcomplete event. In Angular, events are surrounded by round brackets instead of square brackets. Here is the full list of Flexmonster events.