Vue Pivottable

⚠️ This package supports Vue 2 only.
👉 Looking for Vue 3? Use: vue3-pivottable GitHub repo

It is a Vue port of the jQuery-based PivotTable.js

Documentation

You can view the documentation at https://seungwoo321.github.io/vue-pivottable. It's also lighter by removing vue-plotly from the dependencies.

Live Demo

link

Example Code

# Clone the project
git clone https://github.com/Seungwoo321/vue-pivottable.git

# Go into the cloned directory
cd vue-pivottable/example/

# Install dependencies
pnpm install

# Run dev server
pnpm serve

Open browser to http://localhost:8080

Installation

pnpm add vue-pivottable@vue2

Usage

• Vue Pivottable

<template>
  <vue-pivottable
    :data="[{color: 'blue', shape: 'circle'},{color: 'red', shape: 'triangle'}]"
    :rows="['color']"
    :cols="['shape']"
  >
  </vue-pivottable>
</template>

<script>
import { VuePivottable } from 'vue-pivottable'
import 'vue-pivottable/dist/vue-pivottable.css'
export default {
  components: {
    VuePivottable
  }
}
</script>

• Vue Pivottable Ui

<template>
  <vue-pivottable-ui
    :data="[{color: 'blue', shape: 'circle'},{color: 'red', shape: 'triangle'}]"
    :rows="['color']"
    :cols="['shape']"
  >
  </vue-pivottable-ui>
</template>

<script>
import { VuePivottableUi } from 'vue-pivottable'
import 'vue-pivottable/dist/vue-pivottable.css'
export default {
  components: {
    VuePivottableUi
  }
}
</script>

Additional Packages

Plotly Renderer

Chart renderers using Plotly.js. See docs

pnpm add @vue-pivottable/plotly-renderer

import PlotlyRenderer from '@vue-pivottable/plotly-renderer'

Subtotal Renderer

Renders pivot tables with subtotal rows/columns and expand/collapse functionality.

pnpm add @vue-pivottable/subtotal-renderer

import { createSubtotalRenderers } from '@vue-pivottable/subtotal-renderer/vue2'
import { PivotData } from 'vue-pivottable'

const SubtotalRenderers = createSubtotalRenderers(PivotData)

Features:

• Automatic subtotal rows/columns for hierarchical data
• Expand/collapse groups by clicking the arrow icon
• Supports clickCallback and labels

Multi-Value Renderer

Renders multiple values with different aggregators per column.

pnpm add @vue-pivottable/multi-value-renderer

import { MultiValueRenderers } from '@vue-pivottable/multi-value-renderer/vue2'

const aggregatorMap = {
  sales: 'Sum',
  quantity: 'Average'
}

Nuxt Module

Nuxt.js module for easy SSR integration.

pnpm add @vue-pivottable/nuxt

// nuxt.config.js (Nuxt 2)
export default {
  modules: ['@vue-pivottable/nuxt/nuxt2']
}

Storybook

Explore components interactively with Storybook:

pnpm storybook

View the live Storybook at: https://seungwoo321.github.io/vue-pivottable/storybook

Contributors

Seungwoo321 💻

rkota 🚧

Jayraj Rathwa 🐛

cbbdev 🚧

hyemyn2 💻

Costin Grigore 💻

Albert Peschar 💻

Inspired

• plotly/react-pivottable - React-based pivot table library
• David-Desmaisons/vue-plotly - vue wrapper for plotly.js

License

MIT