ibiz-vue-pivottable

Vue Pivottable

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

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

Installation

npm i ibiz-vue-pivottable
或
yarn add ibiz-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

• See react-pivottable for details.

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
locales	Object Language resources, locales.aggregators
columns	Array Specify column properties, default to all keys in the data
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

• plotly/react-pivottable - React-based pivot table library
• David-Desmaisons/vue-plotly - vue wrapper for plotly.js

License

MIT