Feature-rich Pivot Table Component For Vue.js

PivotTable is a feature-rich pivot table component for Vue applications. Improve your business intelligence by visualizing your complex data with the high-speed JavaScript/HTML5 Pivot component.

It helps you summarize large data sets in a convenient way.

pivot in javascript, pivottable js alternative, javascript pivot json data, pivottable js examples, d3 pivot table, pivot table js jsfiddle

How to make use of it:

Install and download:

# NPM
$ npm i @click2buy/vue-pivot-table --save

1. Import and register the component.

import { Pivot } from '@click2buy/vue-pivot-table';
Vue.use(vuePivotTable);
// or
export default {
  components: { Pivot },
}

2. Add the pivot table component to the model.

<pivot
  :data="data"
  :fields="fields"
  :available-field-keys="availableFieldKeys"
  :row-field-keys="rowFieldKeys"
  :col-field-keys="colFieldKeys"
  :reducer="reducer"
  :default-show-settings="defaultShowSettings"
  :is-data-loading="isDataLoading">
  <template slot="value" slot-scope="{ value }">
    {{ value.toLocaleString() }}
  </template>
</pivot>

3. Prepare your data for the pivot table.

const data = [
  {"country": "United States", "year": 2010, "gender": "male", "count": 153295220},
  {"country": "United States", "year": 2010, "gender": "female", "count": 156588400},
  // ...
]
export default {
  components: { Pivot },
  // Basic data for component props
  data: () => {
    return {
      data: data,
      asyncData: [],
      // Pivot params
      fields: [{
        key: 'country',
        getter: item => item.country,
        label: 'Country',
        valueFilter: true
      }, {
        key: 'gender',
        getter: item => item.gender,
        label: 'Gender',
        valueFilter: true
      }, {
        key: 'year',
        getter: item => item.year,
        label: 'Year',
        valueFilter: true
      }],
      availableFieldKeys: [],
      rowFieldKeys: ['country', 'gender'],
      colFieldKeys: ['year'],
      reducer: (sum, item) => sum + item.count,
      defaultShowSettings: true,
      isDataLoading: false,
      // Pivot table standalone field params
      rowFields: [{
        getter: item => item.country,
        label: 'Country'
      }, {
        getter: item => item.gender,
        label: 'Gender'
      }],
      colFields: [{
        getter: item => item.year,
        label: 'Year'
      }]
    }
  }
  ...
}

4. All component default props.

data: {
  type: Array,
  default: () => []
},
fields: {
  type: Array,
  default: () => []
},
availableFieldKeys: {
  type: Array,
  default: () => []
},
rowFieldKeys: {
  type: Array,
  default: () => []
},
colFieldKeys: {
  type: Array,
  default: () => []
},
reducer: {
  type: Function,
  default: sum => sum + 1
},
reducerInitialValue: {
  default: 0
},
defaultShowSettings: {
  type: Boolean,
  default: true
},
availableFieldsLabelText: {
  type: String,
  default: 'Available fields'
},
colsLabelText: {
  type: String,
  default: 'Columns'
},
rowsLabelText: {
  type: String,
  default: 'Rows'
},
hideSettingsText: {
  type: String,
  default: 'Hide settings'
},
showSettingsText: {
  type: String,
  default: 'Show settings'
},
noDataWarningText: {
  type: String,
  default: 'No data to display.'
},
selectAllText: {
  type: String,
  default: 'Select all'
},
unselectAllText: {
  type: String,
  default: 'Unselect all'
},
isDataLoading: {
  type: Boolean,
  default: false
}

Feature-rich Pivot Table Component For Vue, vue-pivot-table Plugin/Github, javascript pivot table free