### Clone and Run Vue Pivottable Locally

Source: https://github.com/vue-pivottable/vue3-pivottable/blob/main/README.md

Steps to clone the repository, install dependencies, and start the development server for local development.

```bash
# 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

```

--------------------------------

### Vue 3 Quick Start Example

Source: https://github.com/vue-pivottable/vue3-pivottable/blob/main/README.md

Basic usage of the VuePivottableUi component in a Vue 3 application. Ensure you import the necessary CSS.

```vue
<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>
```

--------------------------------

### Install vue-pivottable with NPM

Source: https://github.com/vue-pivottable/vue3-pivottable/blob/main/README.md

Use this command to install the vue-pivottable package using NPM.

```bash
npm install vue-pivottable
```

--------------------------------

### Install vue-pivottable with PNPM

Source: https://github.com/vue-pivottable/vue3-pivottable/blob/main/README.md

Use this command to install the vue-pivottable package using PNPM.

```bash
pnpm add vue-pivottable
```

--------------------------------

### Integrate Plotly Chart Renderers with Vue Pivottable

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Utilize Plotly-based chart visualizations by importing PlotlyRenderers and merging them with the base Renderer object. This example uses a 'Grouped Bar Chart'.

```vue
<template>
  <VuePivottableUi
    :data="salesData"
    :rows="['product']"
    :cols="['quarter']"
    :vals="['revenue']"
    :renderers="allRenderers"
    :renderer-name="'Grouped Bar Chart'"
    :aggregator-name="'Sum'"
  />
</template>

<script setup>
import { VuePivottableUi, Renderer } from 'vue-pivottable'
import PlotlyRenderers from '@vue-pivottable/plotly-renderer'
import 'vue-pivottable/dist/vue-pivottable.css'

// Available Plotly renderers:
// - 'Area Chart': Stacked area chart
// - 'Dot Chart': Scatter plot with markers
// - 'Grouped Bar Chart': Horizontal grouped bars
// - 'Grouped Column Chart': Vertical grouped bars
// - 'Line Chart': Line chart
// - 'MultiplePieChart': Multiple pie charts
// - 'Scatter Chart': Scatter plot
// - 'Stacked Bar Chart': Horizontal stacked bars
// - 'Stacked Column Chart': Vertical stacked bars

const allRenderers = {
  ...Renderer,
  ...PlotlyRenderers
}

const salesData = [
  { product: 'Widget', quarter: 'Q1', revenue: 12000 },
  { product: 'Widget', quarter: 'Q2', revenue: 15000 },
  { product: 'Gadget', quarter: 'Q1', revenue: 8000 },
  { product: 'Gadget', quarter: 'Q2', revenue: 11000 }
]
</script>
```

--------------------------------

### Customize Heatmap Colors with tableColorScaleGenerator

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Use the tableColorScaleGenerator prop to pass a function that maps data values to specific RGB colors. This example demonstrates both a blue-scale gradient and a green-to-red variance scale.

```vue
<template>
  <VuePivottableUi
    :data="data"
    :rows="['product']"
    :cols="['month']"
    :vals="['sales']"
    :renderer-name="'Table Heatmap'"
    :aggregator-name="'Sum'"
    :table-color-scale-generator="blueColorScale"
  />
</template>

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

// Custom color scale generator
// Receives array of all values, returns function that maps value to color
const blueColorScale = (values) => {
  const min = Math.min(...values)
  const max = Math.max(...values)

  return (value) => {
    if (value === null || isNaN(value)) return ''

    // Normalize value between 0 and 1
    const normalized = max === min ? 0.5 : (value - min) / (max - min)

    // Blue color scale: light blue to dark blue
    const r = Math.round(255 - (normalized * 200))
    const g = Math.round(255 - (normalized * 200))
    const b = 255

    return `rgb(${r}, ${g}, ${b})`
  }
}

// Alternative: Green to Red scale for variance analysis
const greenRedColorScale = (values) => {
  const min = Math.min(...values)
  const max = Math.max(...values)
  const mid = (min + max) / 2

  return (value) => {
    if (value === null || isNaN(value)) return ''

    if (value <= mid) {
      const normalized = (value - min) / (mid - min)
      return `rgb(${Math.round(255 * normalized)}, 255, 0)`
    } else {
      const normalized = (value - mid) / (max - mid)
      return `rgb(255, ${Math.round(255 * (1 - normalized))}, 0)`
    }
  }
}

const data = [
  { product: 'A', month: 'Jan', sales: 100 },
  { product: 'A', month: 'Feb', sales: 250 },
  { product: 'B', month: 'Jan', sales: 180 },
  { product: 'B', month: 'Feb', sales: 320 }
]
</script>
```

--------------------------------

### Configure localization and language packs

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Demonstrates how to apply a locale and custom language pack to the VuePivottableUi component.

```vue
<template>
  <VuePivottableUi
    :data="data"
    :rows="['produit']"
    :cols="['trimestre']"
    :vals="['ventes']"
    :locale="'fr'"
    :language-pack="languagePack"
    :aggregators="frenchAggregators"
    :aggregator-name="'Somme'"
  />
</template>

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

const { locales, aggregatorTemplates, numberFormat } = PivotUtilities

// French aggregators are built-in
const frenchAggregators = locales.fr.frAggregators

// Custom language pack
const languagePack = {
  en: locales.en,
  fr: locales.fr,
  // Add custom locale
  es: {
    localeStrings: {
      renderError: 'Se produjo un error al renderizar los resultados.',
      computeError: 'Se produjo un error al calcular los resultados.',
      uiRenderError: 'Se produjo un error al renderizar la interfaz.',
      selectAll: 'Seleccionar todo',
      selectNone: 'No seleccionar nada',
      tooMany: '(demasiados para listar)',
      filterResults: 'Filtrar valores',
      totals: 'Totales',
      vs: 'vs',
      by: 'por',
      cancel: 'Cancelar',
      only: 'solo'
    }
  }
}

const data = [
  { produit: 'Widget', trimestre: 'T1', ventes: 1500 },
  { produit: 'Widget', trimestre: 'T2', ventes: 1800 },
  { produit: 'Gadget', trimestre: 'T1', ventes: 2200 },
  { produit: 'Gadget', trimestre: 'T2', ventes: 2500 }
]
</script>
```

--------------------------------

### VuePivottableUi Component Usage

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Use VuePivottableUi for an interactive pivot table with drag-and-drop configuration. Import the component and its CSS, then provide data and configuration props. It emits pivot model changes.

```vue
<template>
  <VuePivottableUi
    :data="salesData"
    :rows="['region', 'product']"
    :cols="['quarter']"
    :vals="['revenue']"
    :aggregator-name="'Sum'"
    :renderer-name="'Table Heatmap'"
    :value-filter="{ region: { 'North': true } }"
    :row-order="'value_z_to_a'"
    :col-order="'key_a_to_z'"
    :hidden-attributes="['id']"
    :hidden-from-aggregators="['name']"
    :menu-limit="500"
    v-model:pivot-model="pivotModel"
    @change="handlePivotChange"
  />
</template>

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

const salesData = [
  { region: 'North', product: 'Widget', quarter: 'Q1', revenue: 1500 },
  { region: 'North', product: 'Gadget', quarter: 'Q1', revenue: 2300 },
  { region: 'South', product: 'Widget', quarter: 'Q1', revenue: 1800 },
  { region: 'South', product: 'Gadget', quarter: 'Q2', revenue: 2100 },
  { region: 'North', product: 'Widget', quarter: 'Q2', revenue: 1700 },
  { region: 'South', product: 'Widget', quarter: 'Q2', revenue: 1900 }
]

const pivotModel = ref({
  rows: ['region', 'product'],
  cols: ['quarter'],
  vals: ['revenue'],
  aggregatorName: 'Sum',
  rendererName: 'Table Heatmap',
  valueFilter: {},
  rowOrder: 'key_a_to_z',
  colOrder: 'key_a_to_z'
})

const handlePivotChange = (model) => {
  console.log('Pivot configuration changed:', model)
  // model contains: rows, cols, vals, aggregatorName, rendererName, valueFilter, rowOrder, colOrder
}
</script>
```

--------------------------------

### VuePivottable Component Usage

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Use VuePivottable for a non-interactive pivot table rendering. Import the component and its CSS, then provide data and configuration props. It supports row and column totals.

```vue
<template>
  <VuePivottable
    :data="employeeData"
    :rows="['department']"
    :cols="['year']"
    :vals="['salary']"
    :aggregator-name="'Average'"
    :renderer-name="'Table'"
    :show-row-total="true"
    :show-col-total="true"
  />
</template>

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

const employeeData = [
  { department: 'Engineering', year: 2023, salary: 95000 },
  { department: 'Engineering', year: 2024, salary: 98000 },
  { department: 'Marketing', year: 2023, salary: 72000 },
  { department: 'Marketing', year: 2024, salary: 75000 },
  { department: 'Sales', year: 2023, salary: 68000 },
  { department: 'Sales', year: 2024, salary: 71000 }
]
</script>
```

--------------------------------

### Configure Vue Pivottable with Custom Renderers

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Integrate Vue Pivottable with custom renderers, including built-in options like 'Table Heatmap'. Ensure the CSS is imported for proper styling.

```vue
<template>
  <VuePivottableUi
    :data="data"
    :rows="['category']"
    :cols="['month']"
    :vals="['amount']"
    :renderers="customRenderers"
    :renderer-name="'Table Heatmap'"
  />
</template>

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

// Built-in renderers from Renderer object:
// - 'Table': Standard pivot table
// - 'Table Heatmap': Full heatmap coloring
// - 'Table Col Heatmap': Column-based heatmap
// - 'Table Row Heatmap': Row-based heatmap
// - 'Export Table TSV': TSV export format

const customRenderers = {
  ...Renderer,
  // Additional renderers can be added here
}

const data = [
  { category: 'Electronics', month: 'Jan', amount: 5000 },
  { category: 'Electronics', month: 'Feb', amount: 6200 },
  { category: 'Clothing', month: 'Jan', amount: 3200 },
  { category: 'Clothing', month: 'Feb', amount: 4100 }
]
</script>
```

--------------------------------

### Create reactive pivot data with usePivotData

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Uses the usePivotData composable to generate reactive pivot table data with automatic cleanup on component unmount.

```vue
<template>
  <div v-if="error">{{ error }}</div>
  <div v-else-if="pivotData">
    <table>
      <thead>
        <tr>
          <th></th>
          <th v-for="colKey in pivotData.getColKeys()" :key="colKey.join('-')">
            {{ colKey.join(' / ') }}
          </th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="rowKey in pivotData.getRowKeys()" :key="rowKey.join('-')">
          <td>{{ rowKey.join(' / ') }}</td>
          <td v-for="colKey in pivotData.getColKeys()" :key="colKey.join('-')">
            {{ pivotData.getAggregator(rowKey, colKey).value() }}
          </td>
          <td>{{ pivotData.getAggregator(rowKey, []).value() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { usePivotData, PivotUtilities } from 'vue-pivottable'

const props = reactive({
  data: [
    { dept: 'Sales', region: 'North', revenue: 50000 },
    { dept: 'Sales', region: 'South', revenue: 45000 },
    { dept: 'Marketing', region: 'North', revenue: 30000 },
    { dept: 'Marketing', region: 'South', revenue: 35000 }
  ],
  rows: ['dept'],
  cols: ['region'],
  vals: ['revenue'],
  aggregators: PivotUtilities.aggregators,
  aggregatorName: 'Sum',
  valueFilter: {},
  rowOrder: 'key_a_to_z',
  colOrder: 'key_a_to_z',
  derivedAttributes: {}
})

// Returns reactive pivotData and error refs
// Automatically cleans up on component unmount
const { pivotData, error } = usePivotData(props)
</script>
```

--------------------------------

### PivotData Class for Programmatic Analysis

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Utilize the PivotData class for direct data processing, aggregation, and analysis outside of the UI components. Import PivotUtilities to access PivotData and aggregators.

```javascript
import { PivotUtilities } from 'vue-pivottable'
const { PivotData, aggregators } = PivotUtilities

const data = [
  { product: 'Widget', region: 'North', sales: 100, units: 10 },
  { product: 'Widget', region: 'South', sales: 150, units: 15 },
  { product: 'Gadget', region: 'North', sales: 200, units: 8 },
  { product: 'Gadget', region: 'South', sales: 180, units: 12 }
]

const pivotData = new PivotData({
  data: data,
  rows: ['product'],
  cols: ['region'],
  vals: ['sales'],
  aggregators: aggregators,
  aggregatorName: 'Sum',
  valueFilter: {},
  rowOrder: 'key_a_to_z',
  colOrder: 'key_a_to_z'
})

// Get row and column keys
const rowKeys = pivotData.getRowKeys()      // [['Widget'], ['Gadget']]
const colKeys = pivotData.getColKeys()      // [['North'], ['South']]

// Get aggregated value for a specific cell
const aggregator = pivotData.getAggregator(['Widget'], ['North'])
console.log(aggregator.value())             // 100
console.log(aggregator.format(aggregator.value()))  // "100.00"

// Get row total
const rowTotal = pivotData.getAggregator(['Widget'], [])
console.log(rowTotal.value())               // 250 (100 + 150)

// Get grand total
const grandTotal = pivotData.getAggregator([], [])
console.log(grandTotal.value())             // 630

// Access filtered data
const filteredRecords = pivotData.getFilteredData()
```

--------------------------------

### Define Built-in and Custom Aggregators in Vue Pivottable

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Access and utilize built-in aggregators from PivotUtilities. Demonstrates creating custom aggregators with specific number formatting.

```javascript
import { PivotUtilities, VuePivottableUi } from 'vue-pivottable'
const { aggregators, aggregatorTemplates, numberFormat } = PivotUtilities

// Available built-in aggregators:
const builtInAggregators = {
  'Count': aggregators['Count'],
  'Count Unique Values': aggregators['Count Unique Values'],
  'List Unique Values': aggregators['List Unique Values'],
  'Sum': aggregators['Sum'],
  'Integer Sum': aggregators['Integer Sum'],
  'Average': aggregators['Average'],
  'Median': aggregators['Median'],
  'Sample Variance': aggregators['Sample Variance'],
  'Sample Standard Deviation': aggregators['Sample Standard Deviation'],
  'Minimum': aggregators['Minimum'],
  'Maximum': aggregators['Maximum'],
  'First': aggregators['First'],
  'Last': aggregators['Last'],
  'Sum over Sum': aggregators['Sum over Sum'],
  'Sum as Fraction of Total': aggregators['Sum as Fraction of Total'],
  'Sum as Fraction of Rows': aggregators['Sum as Fraction of Rows'],
  'Sum as Fraction of Columns': aggregators['Sum as Fraction of Columns'],
  'Count as Fraction of Total': aggregators['Count as Fraction of Total'],
  'Count as Fraction of Rows': aggregators['Count as Fraction of Rows'],
  'Count as Fraction of Columns': aggregators['Count as Fraction of Columns']
}

// Create custom aggregator with custom formatter
const customFormatter = numberFormat({
  digitsAfterDecimal: 0,
  thousandsSep: ',',
  decimalSep: '.',
  prefix: '$',
  suffix: ''
})

const customAggregators = {
  ...aggregators,
  'Dollar Sum': aggregatorTemplates.sum(customFormatter),
  'Percentage': aggregatorTemplates.runningStat('mean', 1, numberFormat({
    digitsAfterDecimal: 1,
    scaler: 100,
    suffix: '%'
  }))
}
```

--------------------------------

### Implement Lazy Table Rendering

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Use the lazy table renderer to handle large datasets through chunked rendering. Import the renderer and merge it into the component's renderers object.

```vue
<template>
  <VuePivottableUi
    :data="largeDataset"
    :rows="['category', 'subcategory']"
    :cols="['year', 'month']"
    :vals="['value']"
    :renderers="renderers"
    :renderer-name="'Lazy Table'"
    :aggregator-name="'Sum'"
  />
</template>

<script setup>
import { VuePivottableUi, Renderer } from 'vue-pivottable'
import LazyTableRenderer from '@vue-pivottable/lazy-table-renderer'
import 'vue-pivottable/dist/vue-pivottable.css'

// Lazy Table uses chunked rendering (chunkSize: 50, bufferSize: 1)
// for better performance with large pivot tables
const renderers = {
  ...Renderer,
  ...LazyTableRenderer
}

// Generate large dataset for demonstration
const largeDataset = Array.from({ length: 10000 }, (_, i) => ({
  category: `Category ${i % 10}`,
  subcategory: `Sub ${i % 50}`,
  year: 2020 + (i % 5),
  month: ['Jan', 'Feb', 'Mar', 'Apr'][i % 4],
  value: Math.floor(Math.random() * 1000)
}))
</script>
```

--------------------------------

### Configure Custom Sorting

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Control row and column ordering using the sorters prop and PivotUtilities.sortAs. Row and column order can be further refined using predefined sort keys.

```vue
<template>
  <VuePivottableUi
    :data="data"
    :rows="['priority', 'status']"
    :cols="['quarter']"
    :vals="['count']"
    :sorters="sorters"
    :row-order="'key_a_to_z'"
    :col-order="'value_z_to_a'"
    :aggregator-name="'Sum'"
  />
</template>

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

const { sortAs } = PivotUtilities

const data = [
  { priority: 'High', status: 'Open', quarter: 'Q1', count: 5 },
  { priority: 'Medium', status: 'Closed', quarter: 'Q1', count: 12 },
  { priority: 'Low', status: 'Open', quarter: 'Q2', count: 8 },
  { priority: 'High', status: 'Closed', quarter: 'Q2', count: 3 },
  { priority: 'Critical', status: 'Open', quarter: 'Q1', count: 2 }
]

// Custom sort orders
// sortAs creates a sorter that orders values according to the given array
const sorters = {
  priority: sortAs(['Critical', 'High', 'Medium', 'Low']),
  status: sortAs(['Open', 'In Progress', 'Closed']),
  quarter: sortAs(['Q1', 'Q2', 'Q3', 'Q4'])
}

// Row/column order options:
// 'key_a_to_z': Sort by key alphabetically (default)
// 'value_a_to_z': Sort by aggregated value ascending
// 'value_z_to_a': Sort by aggregated value descending
</script>
```

--------------------------------

### Create Derived Attributes

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Define calculated fields using PivotUtilities derivers for date formatting and value binning. Custom functions can also be provided to transform record data.

```vue
<template>
  <VuePivottableUi
    :data="transactionData"
    :derived-attributes="derivedAttributes"
    :rows="['Month', 'Day of Week']"
    :cols="['Amount Bin']"
    :aggregator-name="'Count'"
  />
</template>

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

const { derivers } = PivotUtilities

const transactionData = [
  { date: '2024-01-15', amount: 125.50, category: 'Food' },
  { date: '2024-01-22', amount: 89.00, category: 'Transport' },
  { date: '2024-02-03', amount: 250.00, category: 'Electronics' },
  { date: '2024-02-14', amount: 45.00, category: 'Food' }
]

const derivedAttributes = {
  // Date formatting: %y=year, %m=month, %n=month name, %d=day, %w=weekday
  'Month': derivers.dateFormat('date', '%n %y'),
  'Day of Week': derivers.dateFormat('date', '%w'),

  // Binning: group amounts into ranges of 50
  'Amount Bin': derivers.bin('amount', 50),

  // Custom derived attribute
  'Amount Category': (record) => {
    const amount = Number(record.amount)
    if (amount < 50) return 'Low'
    if (amount < 150) return 'Medium'
    return 'High'
  }
}
</script>
```

--------------------------------

### Filter Data Values

Source: https://context7.com/vue-pivottable/vue3-pivottable/llms.txt

Exclude specific items from analysis by providing a filter object where keys are attribute names and values are objects mapping items to exclude to true.

```vue
<template>
  <VuePivottableUi
    :data="data"
    :rows="['region']"
    :cols="['product']"
    :vals="['sales']"
    :value-filter="valueFilter"
    :aggregator-name="'Sum'"
    @change="handleChange"
  />
</template>

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

const data = [
  { region: 'North', product: 'Widget', sales: 100 },
  { region: 'South', product: 'Widget', sales: 150 },
  { region: 'East', product: 'Gadget', sales: 200 },
  { region: 'West', product: 'Gadget', sales: 180 },
  { region: 'North', product: 'Gadget', sales: 220 }
]

// Filter structure: { attributeName: { valueToExclude: true } }
const valueFilter = ref({
  region: {
    'West': true,    // Exclude 'West' region
    'East': true     // Exclude 'East' region
  },
  product: {
    // 'Widget': true  // Uncomment to exclude Widget
  }
})

const handleChange = (model) => {
  // model.valueFilter contains the current filter state
  console.log('Filters updated:', model.valueFilter)
}
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.