Repository files navigation

Website:flexmonster.com

Flexmonster Pivot Table & Charts is a powerful and fully customizable JavaScript component for web reporting. It is packed with all core features for data analysis and can easily become a part of your React data visualization project. The tool supports popular frameworks like React, Vue, Angular, Blazor, andmore. Also, Flexmonster connects toany data source, including SQL and NoSQL databases, JSON and CSV files, OLAP cubes, and Elasticsearch.

This repository contains sampleNext.js andReact projects for Flexmonster Pivot Table & Charts.

Table of contents:

• Prerequisites
• Installation
• What is inside the project
• Related Flexmonster docs
• Support and feedback
• Flexmonster licensing
• Social media

For Next.js:

• Node.js 18.18 or later

For ES6/TypeScript:

• Node.js 20 or later

1. Download a.zip archive with the sample project or clone it from GitHub with the following command:

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

2. Choose one of the following projects:

   • To work with theNext.js + TypeScript project, go to thenextjs-ts/ folder:

   cd nextjs-ts

   • Try out theReact + ES6 project with the following command:

   cd ES6

   • To see how theReact + TypeScript project works, run the following command:

   cd typescript

3. Install the npm dependencies described inpackage.json:

npm install

4. Run the sample project:

npm start

To see the result, openhttp://localhost:3000/ in your browser.

React sample projects contain several examples of Flexmonster Pivot usage and customization:

• Pivot table demo shows how to define thereport,toolbar, and other initialization parameters in the pivot grid for React.
• Handling events demonstrates how to subscribe to events and unsubscribe from them.
• Using API calls illustrates how to use Flexmonster's methods.
• Updating data is an example of refreshing data at runtime using theupdateData() method.
• Customizing the Toolbar shows how to customize the Toolbar.
• Customizing the grid illustrates how to customize the pivot table using thecustomizeCell() API call.
• Integration with Highcharts demonstrates how to integrate with the Highcharts charting library.
• Integration with amCharts is an example of integration with the amCharts charting library.

You can try all of these examples right from the project’s starting page.

For Next.js:

• Integration with Next.js — learn how to integrate Flexmonster into a Next.js project.
• Usage examples in Next.js — see details on Flexmonster usage in Next.js.

For ES6/TypeScript:

• Integration with React — learn how to integrate Flexmonster into a React project.
• Usage examples in React — see details on Flexmonster usage in React.

In case of any issues, visit ourTroubleshooting section. You can also search among theresolved cases for a solution to your issue.

To share your feedback or ask questions, contact our Tech team by raising a ticket on ourHelp Center. You can also find a list of samples, technical specifications, and a user interface guide there.

These sample projects are released under the MIT license (free and open-source). Also, they use theFlexmonster React wrapper, which is governed by the Flexmonster Software License Agreement: https://www.flexmonster.com/software-license-agreement/.

Flexmonster offers a 30-day free trial so you can evaluate our product. Pricing for commercial license models can be found on theFlexmonster pricing page.

If you need any help with your license, fill out ourContact form, and we will get in touch with you.

Follow us on social media and stay updated on our development process!