@vue-pivottable/multi-value-renderer

Multi-value aggregator renderer for vue-pivottable. Display multiple aggregated values per cell, each with its own aggregation function.

Demo

• Vue 3 Demo
• Vue 2 Demo

Screenshots

Vue 3 - PivotTable

Vue 3 - PivotTable UI

Vue 2 - PivotTable

Vue 2 - PivotTable UI

Features

• Multiple Values per Cell: Display sales (Sum), quantity (Average), and more in a single pivot table cell
• Vue 2 & Vue 3 Support: Works with both vue-pivottable (Vue 2) and vue3-pivottable (Vue 3)
• Flexible Layout: Choose between vertical, horizontal, or compact cell layouts
• Custom Value Labels: Display user-friendly labels for each value column
• Full Integration: Works with existing vue-pivottable features like click callbacks, labels, and totals

Installation

npm install @vue-pivottable/multi-value-renderer

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

Usage

Vue 3

<template>
  <VuePivottable
    :data="data"
    :rows="['region']"
    :cols="['product']"
    :vals="['sales', 'quantity']"
    :renderers="renderers"
    renderer-name="Multi-Value Table"
    :aggregator-map="aggregatorMap"
  />
</template>

<script setup>
import { VuePivottable, PivotUtilities } from 'vue-pivottable'
import { MultiValueRenderers } from '@vue-pivottable/multi-value-renderer'

const data = [
  { region: 'East', product: 'Apple', sales: 100, quantity: 10 },
  { region: 'East', product: 'Banana', sales: 80, quantity: 20 },
  // ...
]

const renderers = {
  ...MultiValueRenderers
}

// Different aggregation for each value
const aggregatorMap = {
  sales: 'Sum',
  quantity: 'Average'
}
</script>

Vue 2

<template>
  <VuePivottable
    :data="data"
    :rows="['region']"
    :cols="['product']"
    :vals="['sales', 'quantity']"
    :renderers="renderers"
    renderer-name="Multi-Value Table"
    :aggregator-map="aggregatorMap"
  />
</template>

<script>
import { VuePivottable } from 'vue-pivottable'
import { MultiValueRenderers } from '@vue-pivottable/multi-value-renderer/vue2'

export default {
  components: { VuePivottable },
  data() {
    return {
      data: [
        { region: 'East', product: 'Apple', sales: 100, quantity: 10 },
        // ...
      ],
      renderers: { ...MultiValueRenderers },
      aggregatorMap: {
        sales: 'Sum',
        quantity: 'Average'
      }
    }
  }
}
</script>

Props

aggregatorMap

Map of value column names to aggregator names.

{
  sales: 'Sum',
  quantity: 'Average',
  profit: 'Maximum'
}

cellLayout

How to display multiple values in each cell:

• 'vertical' (default): Stack values vertically
• 'horizontal': Display values side by side
• 'compact': Show values separated by " / "

showValueLabels

Whether to show labels before each value (default: true).

valueLabels

Custom display labels for value columns:

{
  sales: 'Total Sales',
  quantity: 'Avg Qty'
}

Styling

Import the included CSS for default styling:

import '@vue-pivottable/multi-value-renderer/styles.css'

Or customize with your own CSS targeting these classes:

• .multi-value-cell - Cell container
• .multi-value-item - Individual value row
• .multi-value-label - Value label (e.g., "Sales:")
• .multi-value-value - The actual value
• .layout-vertical, .layout-horizontal - Layout modifiers

Available Aggregators

The renderer supports all aggregators from vue-pivottable:

Single-Input Aggregators

• Count
• Count Unique Values
• List Unique Values
• Sum
• Integer Sum
• Average
• Median
• Minimum
• Maximum
• First
• Last
• Sample Variance
• Sample Standard Deviation

Multi-Input Aggregators

Multi-input aggregators (like Sum over Sum) compute relationships between two fields. When selected, an additional field selector appears in the UI.

• Sum over Sum - Calculates sum(field1) / sum(field2)
• Sum as Fraction of Total
• Sum as Fraction of Rows
• Sum as Fraction of Columns
• Count as Fraction of Total
• Count as Fraction of Rows
• Count as Fraction of Columns

Configuration Format

For multi-input aggregators, use an object format in aggregatorMap:

const aggregatorMap = {
  // Single-input: string format
  sales: 'Sum',
  quantity: 'Average',

  // Multi-input: object format with fields array
  unit_price: {
    aggregator: 'Sum over Sum',
    fields: ['sales', 'quantity']  // sum(sales) / sum(quantity)
  }
}

Helper Function

Use getAggregatorNumInputs to check if an aggregator requires multiple inputs:

import { getAggregatorNumInputs } from '@vue-pivottable/multi-value-renderer/vue3'

const numInputs = getAggregatorNumInputs(aggregators['Sum over Sum'])
// Returns 2 for multi-input aggregators

License

MIT