A vue component for pivot table

A vue component for pivot table

A vue component for pivot table.

vue-pivot-table

A vue component for pivot table

vue-pivot-table screenshot

Live demo (jsfiddle)

Install

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

Usage

This project includes 2 components:

  • PivotTable: a component creating an aggregation table from data & specific rows/columns
  • Pivot : a drag & drop user interface to configure rows/columns of a PivotTable

While the Pivot component provides the full experience, the PivotTable can be used standalone.

Javascript

Webpack

// Import the needed component(s)
import Pivot from '@marketconnect/vue-pivot-table'
import PivotTable from '@marketconnect/vue-pivot-table'

export default {
  // Register the needed component
  components: { Pivot, PivotTable },
  
  // Basic data for component props
  data: () => {
    return {
      data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]),
      fields: [],
      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
    }
  }
  ...
}

Browser

Vue.use(VuePivot)

HTML

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

Or

<pivot-table :data="data" :fields="fields" :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

Props

Pivot & PivotTable

Prop Type Default Description
data Array [] Dataset to use in the pivot ; each element should be an object
fields Array [] Fields to display in the "Available fields" zone
row-fields Array [] Fields to use as rows by default
col-fields Array [] Fields to use as columns by default
reducer function (sum, item) => sum + 1 Function applied to reduce data in the pivot table
no-data-warning-text String 'No data to display.'  Text to display when data is empty
is-data-loading Boolean false Display a loading content instead of the table when the value is true (see slots for customization)

Pivot only

Prop Type Default Description
default-show-settings Boolean true Show settings at component creation
available-fields-label-text String 'Available fields'  Text for available fields drag area
rows-label-text String 'Rows'  Text for the rows drag area
cols-label-text String 'Columns'  Text for the columns drag area
hide-settings-text String 'Hide settings'  Text for the "hide settings" button
show-settings-text String 'Show settings'  Text for the "show settings" button

Field format

Each element in the arrays fields, colFields or rowFields should be an Object with this format:

Prop Type Description
label String Text to display in the draggable button (Pivot only)
getter Function Function to apply on an element of data to get the field value
sort Function Optional - Function to order fields in the pivot table header ; if no value is provided, javascript-natural-sort will be applied
showHeader Boolean Optional (default: true) - Whether the header should be displayed in the pivot table
showFooter Boolean Optional (default: false) - Whether the footer should be displayed in the pivot table
headerSlotName String Optional - Name of the slot to use to format the header in the pivot table ; if no slot name is provided, the value will be displayed as found in data
footerSlotName String Optional - Same as above for the footer

Slots

Table headers scoped slots

Pivot table headers can be customized with scoped slots:

<template slot="my-field-header-slot-name" slot-scope="{ value }">{{ value }}</template>

The slot attribute must match the slotName previously set on your field prop.

value scoped slot

Pivot table values can be customized with the value scoped slot:

<template slot="value" slot-scope="{ value }">{{ value.toLocaleString }}</template>

loading slot

If the data prop is loaded asynchronously, a loading feedback can be displayed by setting the data-is-loading prop to true. The default feedback is the text "Loading...".

It can be customized with the loading slot:

<template slot="loading">Loading data, please wait...</template>

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/

Github Repository

Tags: #VueJs #Table