Feature-rich Pivot Table Component For Vue

Install & Download:

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

Description:

A featured-rich pivot table component for Vue applications.

How to use it:

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

<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 default component 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
}

Preview:

Changelog:

v1.1.6 (11/25/2021)

• value slot prop labels is now cached and should avoid updating component when a header is checked/unchecked.

v1.1.5 (09/13/2021)

• Replaced value slot row/col slot props with labels slot prop This new slot prop gathers row/col and adds field data, allowing cell value rendering based on field keys.