Vuejs-Vue pivottable v0.3.97: Vue Pivottable - Vue port of the jQuery-based PivotTable.js

icon
Latest Release: v0.3.97

Bug Fixes

  • fix: case where openStatus not sync so that filterbox not working. (issue #49) (d287d3b)
Source code(tar.gz)
Source code(zip)

Vue Pivottable

It is a Vue port of the jQuery-based PivotTable.js

npm npm npm

Live Demo

link

Run Demo

$ git clone https://github.com/Seungwoo321/vue-pivottable.git
$ cd vue-pivottable/demo/example-vue-cli3/
$ npm install
$ npm run serve

vue-pivottable-demo.gif

Installation

npm i vue-pivottable

Usage

Global Compoents

main.js

import Vue from 'vue'
import VuePivottable from 'vue-pivottable'
import 'vue-pivottable/dist/vue-pivottable.css'
Vue.use(VuePivottable)

vue template

  • vue-pivottable
<template>
  <div id="app">
    <h3>Pivottable Demo</h3>
    <vue-pivottable
        :data="pivotData"
        aggregatorName='Sum'
        rendererName='Table Heatmap'
        :rows="['Payer Gender']"
        :cols="['Party Size']"
        :vals="['Total Bill']"
    >
    </vue-pivottable>
  </div>
</template>

or

  • vue-pivottable-ui
<template>
  <div id="app">
    <h3>Pivottable Demo</h3>
    <vue-pivottable-ui
        :data="pivotData"
        aggregatorName='Sum'
        rendererName='Table Heatmap'
        :rows="['Payer Gender']"
        :cols="['Party Size']"
        :vals="['Total Bill']"
    >
    </vue-pivottable-ui>
  </div>
</template>

Component style

app.vue

<template>
  <div id="app">
    <h3>Pivottable Demo</h3>
    <vue-pivottable
        :data="pivotData"
        aggregatorName='Sum'
        rendererName='Table Heatmap'
        :rows="['Payer Gender']"
        :cols="['Party Size']"
        :vals="['Total Bill']"
    >
    </vue-pivottable>
    <h3>Pivottable Ui Demo</h3>
    <vue-pivottable-ui
        :data="pivotData"
        aggregatorName='Sum'
        rendererName='Table Heatmap'
        :rows="['Payer Gender']"
        :cols="['Party Size']"
        :vals="['Total Bill']"
    >
    </vue-pivottable-ui>
  </div>
</template>

<script>
import { VuePivottable, VuePivottableUi } from 'vue-pivottable'
import 'vue-pivottable/dist/vue-pivottable.css'
export default {
    components: {
        VuePivottable,
        VuePivottableUi
    }
}
</script>

Props

Key Type & Default Value Description
data (none, required) data to be summarized
vals Array
[]
attribute names used as arguments to aggregator (gets passed to aggregator generating function)
cols Array
[]
attribute names to prepopulate in cols area
rows Array
[]
attribute names to prepopulate in row area
rowTotal Boolean
true
show total of rows (has not react-pivottable)
colTotal Boolean
true
show total of cols (has not react-pivottable)
aggregatorName String
first key in aggregators
key to aggregators object specifying the aggregator to use for computations
rendererName String
Table
key to renderers object specifying the renderer to use
valueFilter Object
{}
object whose keys are attribute names and values are objects of attribute value-boolean pairs which denote records to include or exclude from computation and rendering; used to prepopulate the filter menus that appear on double-click
sorters Function or Object
{}
accessed or called with an attribute name and can return a function which can be used as an argument to array.sort for output purposes.
See react-pivottable for details.
derivedAttributes Object
{}
derivedAttributes
rowOrder String
key_a_to_z
the order in which row data is provided to the renderer, must be one of "key_a_to_z", "value_a_to_z", "value_z_to_a", ordering by value orders by row total
colOrder String
key_a_to_z
the order in which column data is provided to the renderer, must be one of "key_a_to_z", "value_a_to_z", "value_z_to_a", ordering by value orders by column total
tableMaxWidth Number
0
value of max-width in table style
hiddenAttributes Array
[]
contains attribute names to omit from the UI
hiddenFromAggregators Array
[]
contains attribute names to omit from the aggregator arguments dropdowns
hiddenFromDragDrop Array
[]
contains attribute names to omit from the aggregator arguments dropdowns
sortonlyFromDragDrop Array
[]
contains attribute names to sort from the drag'n'drop of the UI (has not react-pivottable)
disabledFromDragDrop Array
[]
contains attribute names to disable from the drag'n'drop portion of the UI (has not react-pivottable)
menuLimit Number
500
maximum number of values to list in the double-click menu

Inspired

License

MIT

Comments

  • VUE - ScopedSlots
    VUE - ScopedSlots

    Jan 25, 2021

    Hi,

    Having issues with ScopedSlots not being assigned in Vue (quasar), data is being passed to the Pivottable and Arrays are being built from the headers of the json data table.

    1. Error in render: "TypeError: scopedSlots is not a function" - Found in DraggableAttribute

    2. scopedSlots is not a function - at pvtAttr:

    scopedSlots: { pvtAttr: props => h('slot', scopedSlots(props)) },

    The code i'm using:

    bug 
    Reply
  • how can i save result?
    how can i save result?

    Feb 6, 2021

    hi all dear how can i save pivottable result? im want to get created report and save it to json

    duplicate 
    Reply
  • how i can insert hyperlink?
    how i can insert hyperlink?

    Mar 16, 2021

    hi, i wanna create hyper links with the numbers of results. is that possible?

    enhancement 
    Reply
  • Vue3 support
    Vue3 support

    Apr 9, 2021

    Hi,

    Have you planned to made a Vue3 version ?

    Thanks

    enhancement 
    Reply
  • How integrate with Subtotal plugin?
    How integrate with Subtotal plugin?

    Jun 9, 2021

    How integrate with Subtotal plugin?

    documentation 
    Reply
  • Responsive charts
    Responsive charts

    Oct 9, 2021

    Plotly supports responsive layout https://plotly.com/javascript/responsive-fluid-layout/

    How about exposing plotly settings?

    <vue-pivottable-ui
      plotly="{ layout: { width: undefined, height: undefined }, config: { responsive: true } }"
    />
    

    There is plotlyOptions prop that is not used as far as I can see: https://github.com/Seungwoo321/vue-pivottable/blob/c0579583cb243102c00aa1b403fad43ea160165a/src/PlotlyRenderer.js#L153

    documentation 
    Reply
  • Missing vue-pivottable.css in dist
    Missing vue-pivottable.css in dist

    Dec 16, 2019

    In version "0.3.2" I'm getting "no such file or directory .../node_modules.com/vue-pivottable/dist/vue-pivottable.css" Any thoughts how better to fix it?

    bug 
    Reply
  • not responsive table
    not responsive table

    Mar 13, 2020

                                                                                                                                                                                                            bug 
    Reply
  • Too much data
    Too much data

    Aug 27, 2019

    Such errors are displayed: [Vue warn]: Error in render: "RangeError: Maximum call stack size exceeded" and RangeError: Maximum call stack size exceeded

    invalid 
    Reply
  • what should i add an appropriate loader to handle this when use webpack
    what should i add an appropriate loader to handle this when use webpack

    Sep 17, 2019

                                                                                                                                                                                                            documentation 
    Reply
  • I can't use async data
    I can't use async data

    Aug 27, 2019

    How to display the table only after downloading a data?

    enhancement 
    Reply
  • Is is possible to get PivotTable State
    Is is possible to get PivotTable State

    Dec 17, 2019

    This feature would be very useful: save the PivotTable State generated with vue-pivottable-ui and reproduce it using vue-pivottable. As in this example, from FAQ. Thanks for great port!

    documentation 
    Reply