Home Javascript A Vue Component for Pivot Table In Javascript

A Vue Component for Pivot Table In Javascript

Javascript webcodeflow · July 9, 2022 · Comments off

Pivot Table provides a component to create an aggregate table from selected data and rows/columns. It also provides a drag-and-drop user interface to configure rows/columns in a Pivot Table.

marketconnectvue pivot table, handsontable pivot table, vuetify pivot table, pivot table html code, javascript pivot table, cube js pivot table, pivot table in typescript

How to make use of it:

Install

npm install --save @click2buy/vue-pivot-table

Usage

import { Pivot } from '@click2buy/vue-pivot-table'

export default {
  components: { Pivot },

  // Basic data for component props
  data: () => {
    return {
      data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]),
      fields: [{
        key: 'x',
        getter: item => item.x,
        label: 'X'
      }, {
        key: 'y',
        getter: item => item.y,
        label: 'Y'
      }, {
        key: 'z',
        getter: item => item.z,
        label: 'Z'
      }],
      rowFieldKeys: ['y', 'z'],
      colFieldKeys: ['x'],
      reducer: (sum, item) => sum + 1
    }
  }
  ...
}

<pivot :data="data" :fields="fields" :row-field-keys="rowFieldKeys" :col-field-keys="colFieldKeys" :reducer="reducer">
  <!-- Optional slots can be used for formatting table headers and values, see documentation below -->
</pivot>

pivot table component for vue js, vue-pivot-table Plugin/Github