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.
Download Details:
Author: Click2Buy
Live Demo: https://jsfiddle.net/Owumaro/ezhp9fuc/
Download Link: https://github.com/Click2Buy/vue-pivot-table/archive/refs/heads/master.zip
Official Website: https://github.com/Click2Buy/vue-pivot-table
Install & Download:
# NPM
$ npm i @click2buy/vue-pivot-table --save