Flexmonster usage in React

To show the most popular cases of using Flexmonster, our team prepared a sample React project on GitHub.

To download and run this project, see our guide: Run a sample React project from GitHub. Then choose one of the following examples:

Creating the pivot table
Handling events
Using API calls
Updating data
Customizing the Toolbar
Customizing the grid
Integrating with Highcharts
Integrating with amCharts

Creating the pivot table

The first example demonstrates basic usage of Flexmonster. Notice how the toolbar, report, and licenseKey initialization parameters are specified:

Flexmonster has more initialization parameters. Have a look at all of them.

Handling events

This usage example focuses on Flexmonster events. It provides a toggle button for subscribing to all the events and unsubscribing from them. Here is the source code:

When Flexmonster is subscribed to the events, the log output displays:

Which event was triggered.
When the event was triggered.
Details about that event.

See the full list of Flexmonster events in our documentation.

Using API calls

The Using API calls section is about customizing the component with API calls. Switch the toggle buttons to:

Show the column chart.
Show the grid.
Make the component read-only.
Make the component interactive.

Here is how this functionality is implemented:

See the full list of Flexmonster API calls here.

Updating data

The Updating data section contains an example of updating data at runtime. This example uses the updateData() API call.

See the source code:

The Customizing the Toolbar section provides an example of Toolbar customization.

The beforetoolbarcreated event is used to invoke the customizeToolbar() function. As a result, a new tab with custom functionality is added. See how it is implemented:

Learn more about customizing the Toolbar.

Customizing the grid

This example demonstrates how to highlight a certain measure on the grid.

Switch the toggle buttons to apply or remove customization. Custom grid styles are defined in the customizeCellFunction(). Have a look at the source code:

See our documentation to learn more about cell customization.

Integrating with Highcharts

Here is how the Highcharts integration is implemented:

The main elements of this integration are:

The Highcharts module and Flexmonster Connector for Highcharts.
A container for Highcharts.
The reportcomplete event; when it is triggered, the chart-drawing function is invoked.
The drawChart() function.

Integration with other charting libraries can be done in a similar way. Check out the integrations we provide.

Integrating with amCharts

In the With amCharts section, you can see a dashboard with Flexmonster and amCharts. Here is how the integration is implemented:

The key elements of this integration are:

The amCharts module and Flexmonster Connector for amCharts.
A container for amCharts.
The reportcomplete event; when it is triggered, the chart-drawing function is invoked.
The drawChart() function.

Integration with other charting libraries can be done in a similar way. Check out the integrations we provide.

A React/JSX application with Flexmonster

On our GitHub, we also have examples of React/JSX applications with Flexmonster Pivot:

To run these applications, just launch the necessary HTML page from a browser.

What’s next?

You may be interested in the following articles: