It is a Vue port of the jQuery-based PivotTable.js
$ git clone https://github.com/Seungwoo321/vue-pivottable.git
$ cd vue-pivottable/demo/example-vue-cli3/
$ npm install
$ npm run serve
npm i vue-pivottable
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>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>- 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- See
react-pivottablefor 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 | Booleantrue |
show total of rows (has not react-pivottable) |
| colTotal | Booleantrue |
show total of cols (has not react-pivottable) |
| aggregators | Object of functionsaggregators 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 |
- plotly/react-pivottable - React-based pivot table library
- David-Desmaisons/vue-plotly - vue wrapper for plotly.js
MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent