Renderer

Usage

Just define a custom renderer function and pass it as props.

plotly renderer ^{New in 0.4.6+}

No longer include plotly-renderer in vue-pivottable, but you can use it like this:

Install

npm install @vue-pivottable/plotly-renderer

SFC

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

const renderer = (() => ({
  'Grouped Column Chart': PlotlyRenderer['Grouped Column Chart'],
  'Stacked Column Chart': PlotlyRenderer['Stacked Column Chart'],
  'Grouped Bar Chart': PlotlyRenderer['Grouped Bar Chart'],
  'Stacked Bar Chart': PlotlyRenderer['Stacked Bar Chart'],
  'Line Chart': PlotlyRenderer['Line Chart'],
  'Dot Chart': PlotlyRenderer['Dot Chart'],
  'Area Chart': PlotlyRenderer['Area Chart'],
  'Scatter Chart': PlotlyRenderer['Scatter Chart'],
  'Multiple Pie Chart': PlotlyRenderer['Multiple Pie Chart']
}))()

browser

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plotly Renderer</title>
  <link rel="stylesheet" href="https://unpkg.com/vue-pivottable@0.4.5/dist/vue-pivottable.css">
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-pivottable@0.4.5/dist/vue-pivottable.umd.js"></script>
  <script src="dist/plotly-renderer.umd.js"></script>
</head>
<body>
  <div id="app">
    <vue-pivottable-ui
      :data="[{color: 'blue', shape: 'circle'},{color: 'red', shape: 'triangle'}]"
      renderer-name="Area Chart"
      :renderers="renderers"
      :rows="['color']"
      :cols="['shape']"
    >
    </vue-pivottable-ui>
  </div>
  <script type="text/javascript">
    Vue.use(VuePivottable.default)
    new Vue({
      el: '#app',
      computed: {
        renderers () {
          return (() => ({
            'Grouped Column Chart': PlotlyRenderer['Grouped Column Chart'],
            'Stacked Column Chart': PlotlyRenderer['Stacked Column Chart'],
            'Grouped Bar Chart': PlotlyRenderer['Grouped Bar Chart'],
            'Stacked Bar Chart': PlotlyRenderer['Stacked Bar Chart'],
            'Line Chart': PlotlyRenderer['Line Chart'],
            'Dot Chart': PlotlyRenderer['Dot Chart'],
            'Area Chart': PlotlyRenderer['Area Chart'],
            'Scatter Chart': PlotlyRenderer['Scatter Chart'],
            'Multiple Pie Chart': PlotlyRenderer['Multiple Pie Chart']
          }))()
        }
      }
    })
  </script>
</body>
</html>

scroll table renderer ^{New in 0.4.64+}

Install

npm install @vue-pivottable/scroll-renderer

SFC

import ScrollRenderer from '@vue-pivottable/scroll-renderer'

const renderer = (() => ({
  Table : ScrollRenderer.Table,
  'Table Heatmap': ScrollRenderer['Table Heatmap'],
  'Table Col Heatmap': ScrollRenderer['Table Col Heatmap'],
  'Table Row Heatmap': ScrollRenderer['Table Row Heatmap']
}))()

Live Demo

link

subtotal renderer ^{New in 0.4.69+}

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

Install

npm install @vue-pivottable/subtotal-renderer

SFC (Vue 2)

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

<vue-pivottable
  :data="data"
  :rows="['category', 'subcategory', 'product']"
  :cols="['region', 'city']"
  :renderers="SubtotalRenderers"
  rendererName="Subtotal Table"
/>

Features

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

Options

<vue-pivottable
  :renderers="SubtotalRenderers"
  rendererName="Subtotal Table"
  :subtotalOptions="{
    rowSubtotalDisplay: { displayOnTop: false, enabled: true, hideOnExpand: false },
    colSubtotalDisplay: { displayOnTop: false, enabled: true, hideOnExpand: false },
    arrowCollapsed: '▶',
    arrowExpanded: '▼'
  }"
/>

multi-value renderer ^{New in 0.4.69+}

Renders multiple values with different aggregators per column.

Install

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

SFC (Vue 2)

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

// Define different aggregators for each value
const aggregatorMap = {
  sales: 'Sum',
  quantity: 'Average',
  profit: 'Sum'
}

<vue-pivottable
  :data="data"
  :rows="['region']"
  :cols="['product']"
  :vals="['sales', 'quantity', 'profit']"
  :renderers="MultiValueRenderers"
  rendererName="Multi Value Table"
  :aggregatorMap="aggregatorMap"
/>

Features

Display multiple values in a single pivot table
Apply different aggregators to each value column
Supports all standard table features (heatmap, totals, etc.)