Data

TreeTable

Tabella con struttura dati gerarchica espandibile, supporto per ordinamento, paginazione e selezione nodi tramite il sub-componente Column.

Import

import { TreeTable, Column } from '@pzeta/vue-components'
import type {
  TreeTableProps,
  TreeTableEmits,
  TreeTableNode,
  TreeTableSortEvent,
  TreeTableExpandEvent,
  TreeTableSelectEvent,
} from '@pzeta/vue-components'

Esempio Base

TreeTableNode

interface TreeTableNode {
  key?: string | number           // Chiave univoca del nodo
  data?: Record<string, unknown>  // Dati del nodo (campi corrispondono ai field delle Column)
  children?: TreeTableNode[]      // Nodi figli
  style?: Record<string, string | number>
  class?: string
  selectable?: boolean            // Se false il nodo non è selezionabile
  leaf?: boolean                  // Nodo foglia (nasconde il toggle anche se non ha figli caricati)
}

Props

Prop	Tipo	Default	Descrizione
`value`	`TreeTableNode[]`	`[]`	Array radice dei nodi
`dataKey`	`string`	`'key'`	Campo usato come chiave univoca del nodo
`expandedKeys`	`Record<string \| number, boolean>`	`{}`	Chiavi dei nodi espansi (v-model:expandedKeys)
`selectionMode`	`'single' \| 'multiple' \| 'checkbox'`	`undefined`	Modalità selezione nodi
`selectionKeys`	`Record<string \| number, boolean> \| null`	`null`	Chiavi dei nodi selezionati (v-model:selectionKeys)
`sortField`	`string`	—	Campo di ordinamento iniziale
`sortOrder`	`1 \| -1 \| 0 \| null`	`null`	Direzione ordinamento (1=asc, -1=desc)
`sortMode`	`'single' \| 'multiple'`	`'single'`	Modalità ordinamento
`multiSortMeta`	`SortMeta[]`	`[]`	Metadati per ordinamento multi-colonna
`removableSort`	`boolean`	`false`	Permette di rimuovere l'ordinamento
`paginator`	`boolean`	`false`	Abilita la paginazione
`rows`	`number`	`10`	Numero di righe per pagina
`first`	`number`	`0`	Indice del primo record
`totalRecords`	`number`	—	Totale record (per lazy mode)
`rowsPerPageOptions`	`number[]`	`[10, 25, 50]`	Opzioni righe per pagina
`paginatorTemplate`	`string`	`'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'`	Template paginatore
`indentation`	`number`	`16`	Indentazione in pixel per livello gerarchico
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingIcon`	`string`	`undefined`	Icona di caricamento custom
`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
`scrollable`	`boolean`	`false`	Abilita scroll
`scrollHeight`	`string`	`'400px'`	Altezza area di scroll
`emptyMessage`	`string`	—	Testo stato vuoto
`globalFilter`	`string`	—	Testo filtro globale
`contextMenu`	`boolean`	—	Abilita menu contestuale
`rowClass`	`string \| ((node: TreeTableNode) => string)`	—	Classe CSS dinamica per riga
`rowStyle`	`Record<string, string \| number> \| ((node: TreeTableNode) => Record<string, string \| number>)`	—	Stile inline dinamico per riga

Per le props delle colonne si usa lo stesso Column di DataTable. Vedere la sezione Props — Column.

Emits

Evento	Payload	Descrizione
`update:expandedKeys`	`Record<string \| number, boolean>`	Chiavi espanse cambiate
`update:selectionKeys`	`Record<string \| number, boolean> \| null`	Selezione cambiata
`update:first`	`number`	Prima riga cambiata
`update:rows`	`number`	Righe per pagina cambiate
`update:sortField`	`string`	Campo di sort cambiato
`update:sortOrder`	`TreeTableSortOrder`	Ordine sort cambiato
`update:multiSortMeta`	`SortMeta[]`	Multi-sort meta cambiati
`nodeExpand`	`TreeTableExpandEvent`	Nodo espanso (`{ node: TreeTableNode }`)
`nodeCollapse`	`TreeTableCollapseEvent`	Nodo collassato (`{ node: TreeTableNode }`)
`nodeSelect`	`TreeTableSelectEvent`	Nodo selezionato (`{ originalEvent: Event; node: TreeTableNode }`)
`nodeUnselect`	`TreeTableUnselectEvent`	Nodo deselezionato (`{ originalEvent: Event; node: TreeTableNode }`)
`sort`	`TreeTableSortEvent`	Ordinamento cambiato
`page`	`TreeTablePageEvent`	Pagina cambiata
`nodeContextmenu`	`{ originalEvent: MouseEvent; node: TreeTableNode }`	Right-click su nodo

Slot

Slot	Scope	Descrizione
`header`	—	Contenuto sopra la tabella
`footer`	—	Contenuto sotto il body della tabella
`empty`	—	Template per stato vuoto
`loading`	—	Template per stato di caricamento
`body-{field}`	`{ node: TreeTableNode; data: unknown; field: string; column: ColumnProps }`	Template body per campo specifico

Il sub-componente Column supporta gli stessi slot di DataTable: body, header, footer. Lo scope del slot body riceve { data: node.data, node: TreeTableNode, field, column }.

Esempi

Selezione con checkbox

Ordinamento

Paginazione

Template body personalizzato

Metodi esposti (defineExpose)

Metodo	Descrizione
`expandAll()`	Espande tutti i nodi che hanno figli
`collapseAll()`	Collassa tutti i nodi

Accessibilità

La tabella usa markup semantico. La gerarchia viene comunicata tramite data-level per l'indentazione visiva. I controlli di espansione sono <button> accessibili da tastiera.

TypeScript

import type {
  TreeTableProps,
  TreeTableEmits,
  TreeTableNode,
  TreeTableColumnProps,
  TreeTableSortEvent,
  TreeTableExpandEvent,
  TreeTableCollapseEvent,
  TreeTableSelectEvent,
  TreeTableUnselectEvent,
  TreeTablePageEvent,
  TreeTableSelectionMode,
} from '@pzeta/vue-components'

Tree

Visualizzazione gerarchica interattiva con supporto per selezione (single, multiple, checkbox), filtro testuale e espansione/collasso dei nodi.

Data

Componenti per visualizzazione e manipolazione dati — DataTable, TreeTable, Tree, DataView, Carousel, Image, Galleria, Timeline, Paginator, Chart, EventCalendar, Inplace, Knob, OrderList, PickList.