Get Free Trial
Get Free Trial
All documentation
JavaScript
React
    Next.js
    ES6/TypeScript
    1. Sample React project
    2. Integration with React
    3. Usage examples
    4. Using methods and events
    5. Migrating from WebDataRocks to Flexmonster
    6. Improving Flexmonster's performance in React
  1. The FlexmonsterReact.Pivot component
Angular
Vue
Other integrations
Troubleshooting
Connecting to data source
Configuring the component
Saving and exporting
Customizing
Charts
License keys
Accessibility
Security
Updating to the latest version
Flexmonster CLI reference

Sample React project

This guide will help you run a sample React project from GitHub. It is a ready-to-use application with several live Flexmonster demos. Get the sample project to try out Flexmonster.

To integrate Flexmonster into an existing React project, see integration with React.

Prerequisites

Step 1. Get the sample React project

Download the sample project with the flexmonster create command. You can choose an ES6-based or TypeScript-based project:

ES6

flexmonster create react es6 -r

This command downloads the React + ES6 project from GitHub and launches it in the browser. To shut down the project from the console, press Ctrl + C (Control + C on macOS).

The sample project is located inside the flexmonster-react-es6-project/ folder in your current working directory.

TypeScript

flexmonster create react typescript -r

This command downloads the React + TypeScript project from GitHub and launches it in the browser. To shut down the project from the console, press Ctrl + C (Control + C on macOS).

The sample project is located inside the flexmonster-react-typescript-project/ folder in your current working directory.

Step 2. Check out the project’s structure

Our sample project was created using Vite, so most of the project’s files are typical of Vite-based projects.

Now take a look at the files specific to our sample project:

ES6

  • src/components/UIElements/ — routes, menus, and toggle elements used in the sample project.
  • src/components/ReactFlexmonsterExamples/ — demos that cover different aspects of Flexmonster usage in React:
    • Creating the pivot table (PivotTableDemo.jsx)
    • Handling events (HandlingEvents.jsx)
    • Using API calls (UsingAPICalls.jsx)
    • Updating data at runtime (UpdatingData.jsx)
    • Customizing the Toolbar (CustomizingToolbar.jsx)
    • Customizing the grid (CustomizingGrid.jsx)
    • Integrating with Highcharts (WithHighcharts.jsx)
    • Integrating with amCharts (WithAmcharts.jsx — amCharts 5; WithAmcharts4.jsx — amCharts 4)

TypeScript

  • src/components/UIElements/ — routes, menus, and toggle elements used in the sample project.
  • src/components/ReactFlexmonsterExamples/ — demos that cover different aspects of Flexmonster usage in React:
    • Creating the pivot table (PivotTableDemo.tsx)
    • Handling events (HandlingEvents.tsx)
    • Using API calls (UsingAPICalls.tsx)
    • Updating data at runtime (UpdatingData.tsx)
    • Customizing the Toolbar (CustomizingToolbar.tsx)
    • Customizing the grid (CustomizingGrid.tsx)
    • Integrating with Highcharts (WithHighcharts.tsx)
    • Integrating with amCharts (WithAmcharts.tsx — amCharts 5; WithAmcharts4.tsx — amCharts 4)

Learn more about how these demos work: Usage examples.

Next steps

Integrate into an existing React project or adjust the sample project to your needs: