Flexmonster Pivot Table & Charts is a feature-packed reporting component. However, we do not limit the opportunity to customize and implement specific features. Flexmonster has enough flexibility to support your application’s logic and adapt to how it works. So you can extend the functionality and user interface the way you need.
In today’s blog post I want to tell you how to get more from Flexmonster pivot with the help of running totals.
To begin with, I’ll tell you what is it - running totals. This is one of the aggregations available for CSV, JSON, FDS databases, MongoDB, MS Analysis Services, and even custom data source APIs. Imagine a list of numbers. A running total keeps track of the sum of these numbers as you go down the list, adding each new number and subtracting any that are removed.
The popularity of React has expanded beyond front-end development, and now it is used for different development purposes. This expansion has led to the appearance of new frameworks driven by the goal of enhancing the developer experience, optimizing processes, and addressing specific challenges. One of the main React challenges was struggles with SEO (Search Engine Optimization) because of client-side rendering.
When creating a product, creators always determine its main functions and needs, which it should face. Such clearly defined values and vectors of improvement allow other developers to choose the suitable component for their software or application easily.
Thus, integrations between products are one of the best methods of building better software, as you can skim the cream and prepare a product with only the best ingredients.
ECMAScript 2009, also known as ES5, is the first major revision to JavaScript that was used for many years. Since then several new standards were released and now, in the development of our components, we use only the ES6 standard as it has improved performance and is supported by all modern browsers. The only browser that did not switch to ES6 is InternetExplorer 11, but in 2022 Microsoft stopped supporting it in favor of their new browser Edge.
For the last few years, has notably risen in popularity among modern JavaScript frameworks. Thousands of developers prefer to use Vue in their projects, choosing the best features of React and Angular that are combined in this web development tool. Inspired by the success of the framework, in October 2020, creators released Vue 3.
Among the strengths of the framework developers note that Vue 3 is:
faster,
smaller,
more maintainable,
and just a lot easier to develop with.
For those who prefer to switch versions of Vue, our team took care of making the process of migrating a project with our pivot table embedded to Vue 3 easy and fast. So we created a new wrapper, especially for the third version, to provide the smoothest integration possible. Let us tell you about all the enhancements we have.
Flexmonster Pivot Vue 3 module
Before, we had a particular module for integrating Flexmonster Pivot Table & Charts with Vue 2 on npm. Now we extended the same module so it would work with both versions of the framework. The only change you need to do to reach the Vue 3 module is to add vue3 to the module import path, so it looks like this: vue-flexmonster/vue3.
You can simply install the updated module using Flexmonster CLI. If you don’t have it yet, you need to install the CLI first with the following command:
npm install -g flexmonster-cli
And then run this command from the folder containing package.json to install the Flexmonster Vue module:
flexmonster add vue-flexmonster
Or if you already have the previous version of the module installed, you can run this command to update it:
flexmonster update vue-flexmonster
Now declare and register the vue-flexmonster module or just register it if you have an ES6 app. For a detailed guide, check our .
Vue 3 sample projects
To make embedding Flexmonster in your Vue 3 app as smooth as possible, we prepared several on GitHub. We also updated our Vue 2 samples. So now, with the flexmonster create vue command, you can choose from 4 different options:
One of the essential features of Vue 3 is the new . With this in mind, we provided usage examples for both and so you can compare the differences and choose the best approach for you.
In the VueFlexmonsterExamples folder, you can find cases that show how to access Flexmonster API calls and handle Flexmonster events, customize the Toolbar, and integrate with charting libraries. The explanation for all the examples can be found in our .
We do our best to make it easy to add Flexmonster to any project you want and try to provide as much integration with popular frameworks as possible. We hope our Vue 3 integration has made your developer’s life a little bit easier and we would be delighted to hear some feedback from you on our work.
Check our and for any other questions.
It can also be interesting for you to read more about:
The best way to understand large data quantities is to visualize them. Luckily, we have a lot of instruments to do that.
Flexmonster Pivot helps to represent your data grouped in a stylish grid with all the aggregations, sorting, and filtering that has been done before. It also has pivot charts to display this data even more clearly or visually highlight the core.
We always try to expand our documentation and add some useful articles for our customers. We also provide an option for you how to make the process of maintaining Flexmonster in your applications easier.
Keeping up with the latest technologies in mobile app development, we couldn't miss - the most powerful framework for building cross-platform applications. Supported by Facebook, its GitHub repository is the 2nd most popular by the number of contributions.
Today we're excited to share with you awesome news about integration with React Native.