☝️Small business or a startup? See if you qualify for our special offer.
+
Get Free Trial
Get Free Trial
All documentation
  • Introduction
    • 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
  • Browser compatibility
  • Documentation for older versions

    • Integration with React

    This tutorial will help you integrate Flexmonster with React. Watch the tutorial in the video format: React pivot table guide.

    Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component using our sample React project or the React pivot table demo.

    If you are using React with Next.js, see Integration with Next.js.

    Prerequisites

    Step 1. (optional) Create a React application

    Skip this step if you already have a React app.

    Step 1.1. Create a React app from the console using Vite. You can choose an ES6 or a TypeScript project template:

    ES6

    # For npm 7 and later
npm create vite@latest flexmonster-project -- --template react

# For npm 6
npm create vite@latest flexmonster-project --template react

    TypeScript

    # For npm 7 and later
npm create vite@latest flexmonster-project -- --template react-ts

# For npm 6
npm create vite@latest flexmonster-project --template react-ts

    Step 1.2. Install npm dependencies needed for the project:

    cd flexmonster-project
npm install

    Step 2. Get Flexmonster

    To get Flexmonster for React, run the following command inside your project:

    flexmonster add react-flexmonster

    This command downloads the react-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

    Step 3. Embed Flexmonster

    ES6

    Step 3.1. Import Flexmonster styles (e.g., into src/index.css):

    @import "flexmonster/flexmonster.css";

    Step 3.2. Import the FlexmonsterReact component (e.g., into src/App.jsx):

    import * as FlexmonsterReact from "react-flexmonster";

    Step 3.3. Insert the FlexmonsterReact.Pivot component (e.g., into src/App.jsx):

    function App() {
      return (
        <div className="App">
          <FlexmonsterReact.Pivot
           toolbar={true}
          />
        </div>
      );
    }

    export default App;

    The toolbar is one of the FlexmonsterReact.Pivot props. Learn more about the FlexmonsterReact.Pivot component.

    TypeScript

    Step 3.1. Import Flexmonster styles (e.g., into src/index.css):

    @import "flexmonster/flexmonster.css";

    Step 3.2. Import the FlexmonsterReact component (e.g., into src/App.tsx):

    import * as FlexmonsterReact from "react-flexmonster";

    Step 3.3. Insert the FlexmonsterReact.Pivot component (e.g., into src/App.tsx):

    function App() {
      return (
        <div className="App">
          <FlexmonsterReact.Pivot
           toolbar={true}
          />
        </div>
      );
    }

    export default App;

    The toolbar is one of the FlexmonsterReact.Pivot props. Learn more about the FlexmonsterReact.Pivot component.

    Step 4. Run the application

    Run your application from the console:

    npm run dev

    Open your project in the browser to see the result.

    You can also watch our video tutorial that covers the integration process:

    Usage examples

    We prepared the following examples of Flexmonster usage:

    See also