Vue-dynamic-report NPM

vue-dynamic-report

With vue-dynamic-report you can do operations on a pivot table in a very simple way in Vue.js applications.

Installation

Use the package manager npm or yarn to install raap-vue-pivottalle.

npm

$ npm i vue-dynamic-report

yarn

$ yarn add vue-dynamic-report

Usage

In your input file import vue-dynamic-report.

For example: (main.js)

import 'vue-dynamic-report'
import 'vue-dynamic-report/dist/vue-dynamic-report.css'

Declare the vue-dynamic-report component in your template.

For Example: (App.js)

<template>
  <div id="app">
    <vue-dynamic-report
      :headers="['YEAR','MONTH','DAY']"
      :values="['CURRENCY', 'AGE']"
      :keys="['YEAR','MONTH','DAY','CURRENCY','AGE']"
      :data="[['2020','January','17',150.50,30],['2013','December','20',240,25]]"
      :onSave="({ name, values, columns, rows }) => console.log('Saved!')"
      :settings="[{ name: 'File Name', operations: [{ oper: 'SUM', value: 'AGE' }], columns: ['YEAR'], rows: ['MONTH'] }]"
    />
  </div>
</template>

Props |Key|Type & Default Value| Description |----|-------------------|--------------- |headers|Array[], required| Rows and cols to filter. |values|Array[], required| Values to calculate. |keys|Array[], required| Order of de input data values. |data|Array[], required| Input list of data values. |onSave|Function(Params), required| Function that saves the current configuration. |settings|Array[], required| List of saved configurations.

Params |Key|Type & Default Value| Description |----|-------------------|--------------- |name|String, required| Name with which the configuration will be saved. |operations|Array[], required| Operations selected. |columns|Array[], required| Columns selected to filter. |rows|Array[], required| Rows selected to filter.