Data

DataTable

Tabella dati avanzata con supporto per ordinamento, filtri, paginazione, selezione righe, espansione e raggruppamento. Il sub-componente Column definisce le colonne in modo dichiarativo.

Import

import { DataTable, Column } from '@pzeta/vue-components'
import type {
  DataTableProps,
  DataTableEmits,
  DataTableFilterMeta,
  DataTableSortMeta,
  ColumnProps,
} from '@pzeta/vue-components'

Props — DataTable

Prop	Tipo	Default	Descrizione
`value`	`T[]`	`[]`	Array di dati da visualizzare
`dataKey`	`string`	`'id'`	Campo che identifica univocamente ogni riga
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingIcon`	`string`	`undefined`	Icona di caricamento custom
`lazy`	`boolean`	`false`	Abilita lazy loading (paginazione/sort/filter server-side)
`stripedRows`	`boolean`	`false`	Righe alternate con sfondo diverso
`showGridlines`	`boolean`	`false`	Mostra linee di separazione celle
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del componente
`showHeader`	`boolean`	`true`	Mostra l'intestazione della tabella
`rowHover`	`boolean`	`true`	Evidenzia riga al passaggio del mouse
`tableClass`	`string`	—	Classe CSS aggiuntiva per la tabella
`tableStyle`	`string \| Record<string, string \| number>`	—	Stile inline per la tabella
`scrollable`	`boolean`	`false`	Abilita scroll orizzontale/verticale
`scrollHeight`	`string`	`'400px'`	Altezza area di scroll
`sortField`	`string`	—	Campo di ordinamento iniziale
`sortOrder`	`1 \| -1 \| 0 \| null`	`null`	Direzione ordinamento (1=asc, -1=desc)
`multiSortMeta`	`SortMeta[]`	—	Metadati per ordinamento multi-colonna
`sortMode`	`'single' \| 'multiple'`	`'single'`	Modalità ordinamento
`removableSort`	`boolean`	`false`	Permette di rimuovere l'ordinamento con un terzo click
`paginator`	`boolean`	`false`	Abilita la paginazione
`rows`	`number`	`10`	Numero di righe per pagina
`first`	`number`	`0`	Indice della prima riga visualizzata
`totalRecords`	`number`	—	Numero totale di record (necessario in lazy mode)
`rowsPerPageOptions`	`number[]`	`[10, 25, 50]`	Opzioni per il dropdown righe per pagina
`pageLinkSize`	`number`	`5`	Numero di link pagina da mostrare
`paginatorPosition`	`'top' \| 'bottom' \| 'both'`	`'bottom'`	Posizione del paginatore
`alwaysShowPaginator`	`boolean`	`true`	Mostra paginatore anche con una sola pagina
`currentPageReportTemplate`	`string`	`'Showing {first} to {last} of {totalRecords} entries'`	Template report pagina corrente
`filters`	`FilterMeta`	—	Filtri attivi (v-model:filters)
`filterDisplay`	`'menu' \| 'row'`	`'menu'`	Modalità visualizzazione filtri
`globalFilterFields`	`string[]`	—	Campi inclusi nel filtro globale
`selection`	`T \| T[]`	—	Righe selezionate (v-model:selection)
`selectionMode`	`'single' \| 'multiple' \| 'checkbox'`	`undefined`	Modalità selezione righe
`metaKeySelection`	`boolean`	`true`	Richiede Ctrl/Meta per selezione multipla
`selectAll`	`boolean`	—	Stato checkbox header (v-model:selectAll)
`expandedRows`	`T[]`	—	Righe espanse (v-model:expandedRows)
`editMode`	`'cell' \| 'row'`	—	Modalità editing inline
`editingRows`	`T[]`	—	Righe in fase di modifica (v-model:editingRows)
`rowGroupMode`	`'subheader' \| 'rowspan'`	—	Modalità raggruppamento righe
`groupRowsBy`	`string \| string[]`	—	Campo per raggruppamento
`expandableRowGroups`	`boolean`	—	Gruppi espandibili
`resizableColumns`	`boolean`	`false`	Abilita ridimensionamento colonne
`columnResizeMode`	`'fit' \| 'expand'`	`'fit'`	Modalità ridimensionamento
`reorderableColumns`	`boolean`	`false`	Abilita riordinamento colonne tramite drag
`contextMenu`	`boolean`	—	Abilita menu contestuale al right-click
`frozenValue`	`T[]`	—	Righe fisse in cima alla tabella
`stateStorage`	`'session' \| 'local'`	—	Storage per persistenza stato
`stateKey`	`string`	—	Chiave univoca per lo stato salvato
`responsiveLayout`	`'scroll' \| 'stack'`	`'scroll'`	Comportamento responsive
`breakpoint`	`string`	`'768px'`	Breakpoint per layout stack
`csvSeparator`	`string`	`','`	Separatore CSV per export
`exportFilename`	`string`	`'download'`	Nome file per export CSV
`emptyMessage`	`string`	—	Testo mostrato quando non ci sono dati
`rowClass`	`string \| ((data: T) => string)`	—	Classe CSS dinamica per riga
`rowStyle`	`Record<string, string \| number> \| ((data: T) => Record<string, string \| number>)`	—	Stile inline dinamico per riga

Props — Column

Prop	Tipo	Default	Descrizione
`field`	`string`	—	Campo dati della colonna
`header`	`string`	—	Testo intestazione
`footer`	`string`	—	Testo footer
`columnKey`	`string`	—	Chiave univoca se `field` non è definito
`dataType`	`'string' \| 'number' \| 'date' \| 'boolean' \| 'custom'`	—	Tipo dato (determina allineamento automatico)
`sortable`	`boolean`	`false`	Abilita ordinamento su questa colonna
`sortField`	`string`	—	Campo usato per l'ordinamento (default: `field`)
`filterField`	`string`	—	Campo usato per il filtro (default: `field`)
`filterMatchMode`	`string`	—	Modalità di match per il filtro (attiva la colonna filtrabile)
`hidden`	`boolean`	`false`	Nasconde la colonna
`width`	`string`	—	Larghezza colonna (es. `'200px'`, `'20%'`)
`minWidth`	`string`	—	Larghezza minima
`maxWidth`	`string`	—	Larghezza massima
`frozen`	`boolean`	`false`	Colonna fissa (frozen)
`alignFrozen`	`'left' \| 'right'`	`'left'`	Lato della colonna frozen
`expander`	`boolean`	`false`	La colonna mostra il pulsante di espansione riga
`rowReorder`	`boolean`	`false`	La colonna abilita drag-and-drop riordinamento righe
`rowEditor`	`boolean`	`false`	La colonna mostra i controlli di editing riga
`selectionMode`	`'single' \| 'multiple' \| 'checkbox'`	—	Rende questa colonna la colonna di selezione
`exportable`	`boolean`	`true`	Include la colonna nell'export CSV
`exportHeader`	`string`	—	Header usato nell'export CSV
`alignHeader`	`'left' \| 'center' \| 'right'`	`'left'`	Allineamento intestazione
`alignBody`	`'left' \| 'center' \| 'right'`	—	Allineamento celle body (default: automatico da `dataType`)
`style`	`string \| Record<string, string \| number>`	—	Stile cella
`class`	`string \| Record<string, unknown>`	—	Classe CSS cella
`headerStyle`	`string \| Record<string, string \| number>`	—	Stile intestazione
`headerClass`	`string \| Record<string, unknown>`	—	Classe intestazione
`bodyStyle`	`string \| Record<string, string \| number>`	—	Stile body
`bodyClass`	`string \| Record<string, unknown>`	—	Classe body
`colspan`	`number`	—	Colspan per raggruppamento celle
`rowspan`	`number`	—	Rowspan per raggruppamento celle
`excludeGlobalFilter`	`boolean`	`false`	Esclude la colonna dal filtro globale
`showFilterMenu`	`boolean`	`true`	Mostra menu filtro
`showClearButton`	`boolean`	`false`	Mostra pulsante reset filtro
`maxConstraints`	`number`	`2`	Numero massimo di filtri per colonna

Emits

Evento	Payload	Descrizione
`update:first`	`number`	Cambio indice prima riga (paginazione)
`update:rows`	`number`	Cambio righe per pagina
`update:sortField`	`string`	Cambio campo di ordinamento
`update:sortOrder`	`SortOrder`	Cambio direzione ordinamento
`update:multiSortMeta`	`SortMeta[]`	Cambio metadati multi-sort
`update:selection`	`T \| T[]`	Cambio selezione righe
`update:filters`	`FilterMeta`	Cambio filtri attivi
`update:expandedRows`	`T[]`	Cambio righe espanse
`update:selectAll`	`boolean`	Cambio stato "seleziona tutto"
`update:editingRows`	`T[]`	Cambio righe in editing
`page`	`PageEvent`	Cambio pagina
`sort`	`SortEvent`	Cambio ordinamento
`filter`	`FilterEvent`	Applicazione filtro
`rowClick`	`RowClickEvent<T>`	Click su una riga
`rowDblclick`	`RowClickEvent<T>`	Doppio click su una riga
`rowSelect`	`RowSelectEvent<T>`	Riga selezionata
`rowUnselect`	`RowSelectEvent<T>`	Riga deselezionata
`rowSelectAll`	`{ originalEvent: Event; data: T[] }`	Selezionate tutte le righe
`rowUnselectAll`	`{ originalEvent: Event }`	Deselezionate tutte le righe
`rowExpand`	`{ data: T }`	Riga espansa
`rowCollapse`	`{ data: T }`	Riga collassata
`rowContextmenu`	`{ originalEvent: MouseEvent; data: T; index: number }`	Right-click su riga
`columnReorder`	`{ dragIndex: number; dropIndex: number; columns: unknown[] }`	Colonne riordinate
`rowReorder`	`{ dragIndex: number; dropIndex: number; value: T[] }`	Righe riordinate via drag
`columnResize`	`{ element: HTMLElement; delta: number }`	Colonna ridimensionata
`cellEditInit`	`{ data: T; field: string; index: number }`	Inizio editing cella
`cellEditComplete`	`{ data: T; field: string; newValue: unknown; index: number }`	Editing cella completato
`cellEditCancel`	`{ data: T; field: string; index: number }`	Editing cella annullato
`rowEditInit`	`{ data: T; index: number }`	Inizio editing riga
`rowEditSave`	`{ data: T; newData: T; index: number }`	Editing riga salvato
`rowEditCancel`	`{ data: T; index: number }`	Editing riga annullato
`rowgroupExpand`	`{ originalEvent: Event; data: unknown }`	Gruppo espanso
`rowgroupCollapse`	`{ originalEvent: Event; data: unknown }`	Gruppo collassato
`stateSave`	`{ state: TableState }`	Stato salvato
`stateRestore`	`{ state: TableState }`	Stato ripristinato
`valueChange`	`T[]`	Dati processati cambiati

Slot — DataTable

Slot	Scope	Descrizione
`default`	—	Posizione per i componenti `Column`
`header`	—	Contenuto sopra la tabella
`footer`	—	Contenuto sotto il body della tabella
`empty`	—	Template per stato vuoto (nessun dato)
`loading`	—	Template per stato di caricamento
`expansion`	`{ data: T; index: number }`	Contenuto riga espansa
`groupheader`	`{ data: T[]; value: unknown; expanded: boolean }`	Header gruppo righe
`groupfooter`	`{ data: T[]; value: unknown }`	Footer gruppo righe
`paginatorstart`	—	Contenuto a sinistra del paginatore
`paginatorend`	—	Contenuto a destra del paginatore
`body-{field}`	`{ data: T; field: string; index: number; column: ColumnProps }`	Template body per campo specifico (alternativa agli slot di Column)

Slot — Column

Slot	Scope	Descrizione
`body`	`{ data: T; field: string; index: number; column: ColumnProps }`	Template cella body
`header`	`{ column: ColumnProps }`	Template intestazione
`footer`	`{ column: ColumnProps }`	Template footer
`filter`	`{ field: string; filterModel: unknown; filterCallback: () => void }`	Template filtro custom
`editor`	`{ data: T; field: string; index: number; editorCallback: (value: unknown) => void }`	Template editor inline

Esempi

Lazy Loading (server-side)

<script setup lang="ts">
import { ref } from 'vue'
import type { DataTablePageEvent, DataTableSortEvent } from '@pzeta/vue-components'

const products = ref<Product[]>([])
const totalRecords = ref(0)
const loading = ref(false)

async function loadData(event: DataTablePageEvent) {
  loading.value = true
  const { data, total } = await fetchProducts({
    first: event.first,
    rows: event.rows,
  })
  products.value = data
  totalRecords.value = total
  loading.value = false
}
</script>

<template>
  <DataTable
    :value="products"
    :total-records="totalRecords"
    :loading="loading"
    :lazy="true"
    :paginator="true"
    :rows="10"
    @page="loadData"
    @sort="loadData"
  >
    <Column field="name" header="Nome" :sortable="true" />
    <Column field="price" header="Prezzo" :sortable="true" data-type="number" />
  </DataTable>
</template>

Allineamento automatico per dataType

L'allineamento delle celle body viene determinato automaticamente dal dataType se alignBody non è specificato esplicitamente:

dataType	Allineamento body
`string`	sinistra
`number`	destra
`date`	centro
`boolean`	centro

L'header è sempre allineato a sinistra per default. Usa alignHeader e alignBody per override esplicito.

Metodi esposti (defineExpose)

Metodo	Descrizione
`clearFilter(field)`	Rimuove il filtro di una colonna
`clearAllFilters()`	Rimuove tutti i filtri attivi
`hasActiveFilter(field)`	Verifica se una colonna ha un filtro attivo
`getFilterValue(field)`	Restituisce il valore del filtro corrente
`processedData`	Dati dopo filtro e ordinamento
`paginatedData`	Dati della pagina corrente
`saveState()`	Salva lo stato corrente nello storage configurato
`restoreState()`	Ripristina lo stato dallo storage
`clearState()`	Cancella lo stato salvato

La tabella usa markup semantico <table>, <thead>, <th>, <td>. Le colonne ordinabili ricevono l'attributo aria-sort. Il paginatore interno usa <nav> con aria-label localizzato tramite il sistema i18n.

TypeScript

import type {
  DataTableProps,
  DataTableEmits,
  DataTableFilterMeta,
  DataTableSortMeta,
  DataTablePageEvent,
  DataTableSortEvent,
  DataTableFilterEvent,
  DataTableRowClickEvent,
  DataTableRowSelectEvent,
  DataTableState,
  ColumnProps,
  ColumnSlots,
} from '@pzeta/vue-components'

Chart

Wrapper Vue 3 per Chart.js che supporta grafici bar, line, pie, doughnut, radar, polarArea, bubble e scatter con aggiornamento reattivo.

DataView

Componente per visualizzare collezioni di dati in layout lista o griglia, con paginazione e ordinamento integrati. I template list e grid sono completamente personalizzabili tramite slot.

DataTable

Import

Esempio Base

Props — DataTable

Props — Column

Emits

Slot — DataTable

Slot — Column

Esempi

Ordinamento

Filtri per riga

Selezione righe

Espansione riga

Lazy Loading (server-side)

Editing inline (cell mode)

Allineamento automatico per dataType

Metodi esposti (defineExpose)

Accessibilità

TypeScript