Data

PivotTable

Tabella pivot configurabile con dimensioni su righe e colonne, misura aggregata (sum/count/avg), intestazioni di colonna multi-livello e totali di riga, colonna e totale generale.

Import

import { PivotTable } from '@pzeta/vue-components'

Esempio Base

Reportistica ferie/assenze: ore per reparto x (mese / tipo), con aggregazione commutabile e totali.

Props

Prop	Tipo	Default	Descrizione
`data`	`Record<string, unknown>[]`	(required)	Array dei record sorgente da aggregare
`rows`	`string[]`	(required)	Campi-dimensione disposti sulle righe
`cols`	`string[]`	(required)	Campi-dimensione disposti sulle colonne (generano intestazioni multi-livello)
`measure`	`string`	(required)	Campo numerico aggregato (ignorato per `count`)
`aggregate`	`PivotAggregate`	`'sum'`	Funzione di aggregazione: `'sum'`, `'count'` o `'avg'`
`rowHeaderLabels`	`string[]`	`undefined`	Etichette delle colonne dimensione-riga (default: nome campo)
`measureLabel`	`string`	`'Totale'`	Etichetta della colonna/riga dei totali misura
`showRowTotals`	`boolean`	`true`	Mostra la colonna dei totali di riga
`showColTotals`	`boolean`	`true`	Mostra la riga dei totali di colonna
`valueFormatter`	`(value: number) => string`	`undefined`	Formattatore custom del valore numerico delle celle
`emptyText`	`string`	`'Nessun dato da aggregare'`	Testo mostrato quando non ci sono dati
`locale`	`string`	`'it-IT'`	Locale per ordinamento delle dimensioni e formattazione numerica

Slots

Slot	Props	Descrizione
`empty`	-	Override del contenuto mostrato quando non ci sono dati da aggregare

Emits

Evento	Payload	Descrizione
`cell-click`	`PivotCellClickPayload`	Emesso al click su una cella valore. Espone `rowValues`, `colValues`, `value` aggregato e `records` sottostanti

PivotCellClickPayload

Proprieta'	Tipo	Descrizione
`rowValues`	`string[]`	Valori della tupla dimensione-riga della cella cliccata
`colValues`	`string[]`	Valori della tupla dimensione-colonna della cella cliccata
`value`	`number`	Valore aggregato della cella
`records`	`Record<string, unknown>[]`	Record sorgente che concorrono alla cella (utili per drill-down)

Esempi

Drill-down al click sulla cella

L'evento cell-click restituisce i record sottostanti la cella aggregata, ideale per aprire un dettaglio o un drill-down.

Formattazione valori e dimensioni multiple su riga

valueFormatter permette di formattare i valori (es. come valuta) e rows/cols accettano piu' campi per creare gerarchie.

Note Comportamento

Le tuple di riga e colonna vengono ordinate con localeCompare (opzione numeric: true) secondo locale: i valori numerici espressi come stringa risultano ordinati in modo naturale
L'indicizzazione dei record per (riga, colonna) avviene in un'unica passata su data ed e' reattiva: mutare la reference di data ricalcola il modello in modo efficiente
Le intestazioni di colonna sono multi-livello: con piu' campi in cols ogni livello genera segmenti con colspan accorpati per prefisso comune
I totali di riga, colonna e il totale generale sono calcolati sui record sottostanti (non come somma dei valori di cella), quindi restano coerenti anche con aggregate: 'avg'
Con aggregate: 'count' il campo measure viene ignorato e si conta il numero di record per cella
La prima colonna (dimensione-riga) e' sticky (position: sticky; left: 0); il contenitore va in overflow-x-auto su viewport stretti
Lo stato "vuoto" viene mostrato quando data e' vuoto oppure non esistono tuple di colonna

TypeScript

import type {
  PivotTableProps,
  PivotAggregate,
  PivotCellClickPayload,
} from '@pzeta/vue-components'

interface RigaAssenza {
  reparto: string
  mese: string
  tipo: string
  ore: number
}

const aggregate: PivotAggregate = 'sum'

const onCellClick = (payload: PivotCellClickPayload) => {
  const righe = payload.records as RigaAssenza[]
  console.log('drill-down', payload.value, righe.length)
}

Quando usarlo

Reportistica tabellare con aggregazione per due assi (es. reparto x mese, area x anno)
Riepiloghi con totali di riga/colonna e totale generale
Analisi rapida di dataset piatti senza ricorrere a una libreria BI esterna
Drill-down dalle celle aggregate ai record sorgente

Per casi diversi:

Mappa di densita' a calendario (valore per giorno) -> HeatmapCalendar
Griglia risorsa x giorno con eventi -> WeekScheduler
Tabella dati interattiva (ordinamento, paginazione, selezione) -> DataTable (categoria data)

PickList

Componente a doppia lista per il trasferimento di elementi da source a target (e viceversa), con pulsanti di spostamento, riordinamento interno e selezione multipla.

QRCode

Genera lato client un QR code da una stringa o URL e lo mostra come immagine, con dimensione, livello di correzione d'errore e colori configurabili.