Vue pivot table | Flexmonster Pivot Table & Charts sample project with Vue 3, Nuxt, and Vue 2

Website: flexmonster.com

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 Vue data visualization project. The tool supports popular frameworks like Angular, React, Vue, Blazor, and more. Also, Flexmonster connects to any data source, including SQL and NoSQL databases, JSON and CSV files, OLAP cubes, and Elasticsearch.

This repository contains sample Vue 3, Nuxt, and Vue 2 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

Prerequisites

• Node.js

Installation

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-vue.git && cd pivot-vue

2. Choose one of the following projects:

   • To work with the Vue 3 application, go to the vue3/ES6 folder:

   cd vue3/ES6

   or to the vue3/typescript folder:

   cd vue3/typescript

   • For the Nuxt application, go to the nuxt folder:

   cd nuxt

   • To see how the Vue 2 application works, run the following command:

   cd vue2/ES6

   or

   cd vue2/typescript

3. Install the npm dependencies described in package.json:

npm install

4. Run the sample project:

npm start 

To see the result, open the project in your browser.

What is inside the project

Vue sample project contains several examples of Flexmonster Pivot usage and customization:

• Pivot table demo shows how to define the report, toolbar, height, beforetoolbarcreated, and shareReportConnection initialization parameters.
• Pivot table demo (Composition API) is an example of how to embed Flexmonster in a Vue 3 project using Composition API.
• 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 Vue 3:

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

For Nuxt:

• Integration with Nuxt — learn how to integrate Flexmonster into a Nuxt project.

For Vue 2:

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

Support and feedback

In case of any issues, visit our troubleshooting section. You can also search among the resolved cases 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. You can also find a list of samples, technical specifications, and a user interface guide there.

Flexmonster licensing

This sample project uses Flexmonster Vue wrapper, 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. 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, and we will get in touch with you.

Social media

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