vue-pivot-table

A vue component for pivot table

Live demo (jsfiddle)

Install

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

Components

This project provides 2 components:

• Pivot: aggregation table with drag & drop user interface to configure rows/columns
• PivotTable: aggregation table only

While the Pivot component provides the full experience, the PivotTable can be used standalone if you need only a table.

Browser

Vue.use(VuePivot)

Webpack

Pivot

Javascript

import Pivot from '@marketconnect/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
    }
  }
  ...
}

HTML

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

PivotTable

Javascript

import PivotTable from '@marketconnect/vue-pivot-table'

export default {
  components: { PivotTable },

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

HTML

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

API

Pivot component

Properties

fields element format

headers element format

Slots

value slot scope

PivotTable component

Properties

row-fields/col-fields element format

Slots

value slot scope

Large datasets

If this component is used with large datasets, consider applying Object.freeze on your data object to avoid useless change tracking on each data element.

See https://vuejs.org/v2/guide/instance.html#Data-and-Methods.

Build

# Install dependencies
npm install

# Serve with hot reload at localhost:8080
npm run dev

# Build js libraries in dist folder
npm run build

Thanks

• FontAwesome (license)
• Vue.Draggable
• https://github.com/plotly/react-pivottable
• https://github.com/nicolaskruchten/pivottable
• https://dhtmlx.com/docs/products/dhtmlxPivot/