https://github.com/flexmonster/pivot-vue
Vue pivot grid example with Flexmonster
https://github.com/flexmonster/pivot-vue
npm npm-package pivot-tables vue vue-components vuejs
Last synced: 8 months ago
JSON representation
Vue pivot grid example with Flexmonster
- Host: GitHub
- URL: https://github.com/flexmonster/pivot-vue
- Owner: flexmonster
- Created: 2019-12-06T22:29:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-08-28T15:53:14.000Z (10 months ago)
- Last Synced: 2025-08-28T22:38:15.979Z (10 months ago)
- Topics: npm, npm-package, pivot-tables, vue, vue-components, vuejs
- Language: Vue
- Homepage: https://www.flexmonster.com
- Size: 939 KB
- Stars: 18
- Watchers: 3
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue pivot table | Flexmonster Pivot Table & Charts sample project with Vue 3, Nuxt, and Vue 2
[](https://www.flexmonster.com?r=sample_vue)
Website: [flexmonster.com](https://www.flexmonster.com?r=sample_vue)
[](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 Vue data visualization project. The tool supports popular frameworks like React, Vue, Angular, Blazor, and [more](https://www.flexmonster.com/doc/available-tutorials-integration?r=sample_vue). Also, Flexmonster connects to [any data source](https://www.flexmonster.com/doc/supported-data-sources?r=sample_vue), including SQL and NoSQL databases, JSON and CSV files, OLAP cubes, and Elasticsearch.
This repository contains sample [Vue 3](https://vuejs.org/), [Nuxt](https://nuxt.com/), and [Vue 2](https://v2.vuejs.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
- [Node.js](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-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:
```bash
cd vue3/ES6
```
or to the `vue3/typescript` folder:
```bash
cd vue3/typescript
```
- For the **Nuxt** application, go to the `nuxt` folder:
```bash
cd nuxt
```
- To see how the **Vue 2** application works, run the following command:
```bash
cd vue2/ES6
```
or
```bash
cd vue2/typescript
```
2. Install the npm dependencies described in `package.json`:
```bash
npm install
```
4. Run the sample project:
```bash
npm start
```
To see the result, open the project in your browser.
## What is inside the projects
Vue sample projects contain several examples of Flexmonster Pivot usage and customization:
- **Pivot table demo** shows how to define the `report`, `toolbar`, and other initialization parameters in the pivot grid for Vue.
- **Pivot table demo (Options API)** is an example of how to embed Flexmonster in a Vue 3 project using Options 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 refreshing data at runtime using the `updateData()` method.
- **Customizing the Toolbar** shows how to customize the Toolbar.
- **Customizing the grid** illustrates 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](https://www.flexmonster.com/doc/integration-with-vue-3/?r=sample_vue) — learn how to integrate Flexmonster into a Vue 3 project.
- [Usage examples in Vue 3](https://www.flexmonster.com/doc/usage-examples-vue-3/?r=sample_vue) — see details on Flexmonster usage in Vue 3.
For Nuxt:
- [Integration with Nuxt](https://www.flexmonster.com/doc/integration-with-nuxt/?r=sample_vue) — learn how to integrate Flexmonster into a Nuxt project.
For Vue 2:
- [Integration with Vue 2](https://www.flexmonster.com/doc/integration-with-vue-2/?r=sample_vue) — learn how to integrate Flexmonster into a Vue 2 project.
- [Usage examples in Vue 2](https://www.flexmonster.com/doc/usage-examples-vue-2/?r=sample_vue) — see details on Flexmonster usage in Vue 2.
## Support and feedback
In case of any issues, visit our [Troubleshooting](https://www.flexmonster.com/doc/typical-errors?r=sample_vue) section. You can also search among the [resolved cases](https://www.flexmonster.com/technical-support?r=sample_vue) for a solution to your issue.
To share your feedback or ask questions, contact our Tech team by raising a ticket on our [Help Center](https://www.flexmonster.com/help-center?r=sample_vue). You can also find a list of samples, technical specifications, and a user interface guide there.
## Flexmonster licensing
These sample projects are released under the MIT license (free and open-source). Also, they use the [Flexmonster Vue wrapper](https://github.com/flexmonster/vue-flexmonster), which is governed by the Flexmonster Software License Agreement: [https://www.flexmonster.com/software-license-agreement/](https://www.flexmonster.com/software-license-agreement/?r=sample_vue).
Flexmonster offers a 30-day free trial so you can evaluate our product. Pricing for commercial license models can be found on the [Flexmonster pricing page](https://www.flexmonster.com/pivot-table-editions-and-pricing/?r=sample_vue).
If you need any help with your license, fill out our [Contact form](https://www.flexmonster.com/contact-our-team/?r=sample_vue), 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)