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

    Install

    npm i ibiz-vue-pivottable

    DownloadsWeekly Downloads

    10

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    19.2 MB

    Total Files

    18

    Last publish

    Collaborators

    • junzai