ibiz-vue-pivottable

1.0.6 • Public • Published

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 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

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

License

MIT

Dependents (0)

Package Sidebar

Install

npm i ibiz-vue-pivottable

Weekly Downloads

11

Version

1.0.6

License

MIT

Unpacked Size

19.2 MB

Total Files

18

Last publish

Collaborators

  • junzai