https://github.com/flexmonster/pivot-react
React pivot table example with Flexmonster
https://github.com/flexmonster/pivot-react
framework frontend-app pivot-grid pivot-tables react react-framework
Last synced: 9 months ago
JSON representation
React pivot table example with Flexmonster
- Host: GitHub
- URL: https://github.com/flexmonster/pivot-react
- Owner: flexmonster
- Created: 2016-11-09T16:59:06.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-01-07T10:02:08.000Z (12 months ago)
- Last Synced: 2025-04-05T02:01:47.835Z (9 months ago)
- Topics: framework, frontend-app, pivot-grid, pivot-tables, react, react-framework
- Language: TypeScript
- Homepage: https://www.flexmonster.com
- Size: 1.77 MB
- Stars: 29
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React pivot grid | Flexmonster Pivot Table & Charts sample project with React
[](https://www.flexmonster.com?r=sample_react)
Website: [flexmonster.com](https://www.flexmonster.com?r=sample_react)
[](https://github.com/flexmonster) [](https://twitter.com/Flexmonster)
## Flexmonster Pivot Table & Charts
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 Angular, React, Vue, Blazor, and [more](https://www.flexmonster.com/doc/available-tutorials-integration?r=sample_react). Also, Flexmonster connects to any data source, including SQL and NoSQL databases, JSON and CSV files, OLAP cubes, and Elasticsearch.
This repository contains sample [Next.js](https://nextjs.org/) and [React](https://reactjs.org/) projects for Flexmonster Pivot Table & Charts.
Table of contents:
* [Prerequisites](#prerequisites)
* [Installation](#installation)
* [What is inside the project](#what-is-inside-the-project)
* [Related Flexmonster docs](#related-flexmonster-docs)
* [Support and feedback](#support-and-feedback)
* [Flexmonster licensing](#flexmonster-licensing)
* [Social media](#social-media)
## Prerequisites
For Next.js:
- [Node.js 18.18.0 or later](https://nodejs.org/en/)
For ES6/TypeScript:
- [Node.js 14.0 or later](https://nodejs.org/en/)
## Installation
1. Download a `.zip` archive with the sample project or clone it from GitHub with the following command:
```bash
git clone https://github.com/flexmonster/pivot-react.git && cd pivot-react
```
2. Choose one of the following projects:
- To work with the **Next.js + TypeScript** project, go to the `nextjs-ts/` folder:
```bash
cd nextjs-ts
```
- Try out the **React + ES6** project with the following command:
```bash
cd ES6
```
- To see how the **React + TypeScript** project works, run the following command:
```bash
cd typescript
```
3. Install the npm dependencies described in `package.json`:
```bash
npm install
```
4. Run the sample project:
```bash
npm start
```
To see the result, open `http://localhost:3000/` in your browser.
## What is inside the project
React sample project contains several examples of Flexmonster Pivot usage and customization:
- **Pivot table demo** shows how to define the `report`, `toolbar`, `width`, `height`, `beforetoolbarcreated`, and `shareReportConnection` 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 using the `updateData()` method.
- **Customizing the Toolbar** illustrates how to customize the Toolbar.
- **Customizing the grid** shows how to customize the pivot table using the `customizeCell()` 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.
## Related Flexmonster docs
For Next.js:
- [Integration with Next.js](https://www.flexmonster.com/doc/integration-with-next-js/?r=sample_react) — learn how to integrate Flexmonster into a Next.js project.
- [Usage examples in Next.js](https://www.flexmonster.com/doc/usage-examples-next-js/?r=sample_react) — see details on Flexmonster usage in Next.js.
For ES6/TypeScript:
- [Integration with React](https://www.flexmonster.com/doc/integration-with-react/?r=sample_react) — learn how to integrate Flexmonster into a React project.
- [Usage examples in React](https://www.flexmonster.com/doc/usage-examples-react/?r=sample_react) — see details on Flexmonster usage in React.
## Support and feedback
In case of any issues, visit our [troubleshooting section](https://www.flexmonster.com/doc/typical-errors?r=sample_react). You can also search among the [resolved cases](https://www.flexmonster.com/technical-support?r=sample_react) for a solution to your problem.
To share your feedback or ask questions, contact our Tech team by raising a ticket on [Flexmonster Help Center](https://www.flexmonster.com/help-center?r=sample_react). You can also find a list of samples, technical specifications, and a user interface guide there.
## Flexmonster licensing
This sample project uses [Flexmonster React wrapper](https://github.com/flexmonster/react-flexmonster), which is released as an MIT-licensed (free and open-source) add-on to Flexmonster Pivot.
To learn about Flexmonster Pivot licenses, visit the [Flexmonster licensing page](https://www.flexmonster.com/pivot-table-editions-and-pricing?r=sample_react).
If you want to test our product, we provide a 30-day free trial.
If you need any help with your license — fill out our [Contact form](https://www.flexmonster.com/contact-our-team?r=sample_react), and we will get in touch with you.
## Social media
Follow us on social media and stay updated on our development process!
[](https://linkedin.com/company/flexmonster) [](https://youtube.com/user/FlexMonsterPivot) [](https://twitter.com/flexmonster)