Vue Pivottable

Pivot Table Component for Vue 3

vue-pivottable is a Vue 3-compatible pivot table component, which is a Vue wrapper of the popular react-pivottable. This library allows you to easily summarize, transform, and visualize large datasets in a pivot table UI.

Looking for the Vue 2 compatible version? 👉 v0.4.68 on github

Features

• Built with Vue 3 Composition API
• Supports multiple aggregators and renderers
• Interactive UI with drag-and-drop field configuration
• Easy to customize and extend (renderers, aggregators, styles)

Installation

NPM

npm install vue-pivottable

PNPM

pnpm add vue-pivottable

Quick Start

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

<script setup>
import { VuePivottableUi } from 'vue-pivottable'
import 'vue-pivottable/dist/vue-pivottable.css'
</script>

Documentation

For detailed API and props usage, please visit the docs.

Live Demo

Try out the live demo of vue-pivottable-ui in Stackblitz

Development

To run the project locally:

# Clone the repo
git clone https://github.com/vue-pivottable/vue3-pivottable.git
cd vue-pivottable

# Install dependencies
pnpm install

# Start the dev server
pnpm dev

Then open http://localhost:8080 in your browser.

Inspired

Inspired by plotly/react-pivottable - React-based pivot table library

Contributors ✨

Thanks goes to these wonderful people (emoji key):

hyemyn2 💻

Sumin 💻

Seungwoo321 💻

This project follows the all-contributors specification. Contributions of any kind are welcome!