Press "Enter" to skip to content

A Vue Component for Pivot Table In Javascript

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


See Demo And Download

Official Website(Click2Buy): Click Here

This superior jQuery/javascript plugin is developed by Click2Buy. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.