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

PivotUtilities

Example code link
Data derivers, Sort overriding and custom heatmap colors...
e.g. aggregatorTemplates, aggregators, derivers, locales, naturalSort, numberFormat, getSort, sortAs, PivotDat

import { PivotUtilities } from 'vue-pivottable'

const aggregatorTemplates = PivotUtilities.aggregatorTemplates
const aggregators = PivotUtilities.aggregators
const derivers = PivotUtilities.derivers
const locales = PivotUtilities.locales
const naturalSort = PivotUtilities.naturalSort
const numberFormat = PivotUtilities.numberFormat
const getSort = PivotUtilities.getSort
const sortAs = PivotUtilities.sortAs
const PivotData = PivotUtilities.PivotData

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`)
aggregators	`Object` of functions `aggregators` from `Utilites`	dictionary of generators for aggregation functions in dropdown (see original PivotTable.js documentation)
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
tableColorScaleGenerator	`Function` undefined	generate custom color render for `Table Heatmap`

Inspired

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

License

MIT

License

atliq/vue-pivottable

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages