TreeTable

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

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

Emits

Slot

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 }. Il contenuto dello slot non viene ricreato quando la tabella si ridisegna (dalla 1.24.0): prima il focus di una riga lo rimontava e il primo clic su un pulsante della cella andava perso.

Esempi

Selezione con checkbox

Ordinamento

Paginazione

Template body personalizzato

Righe rilasciate su un nodo

Con droppable (dalla 1.24.0) ogni nodo accetta le righe trascinate da una DataTable con draggable-rows: il nodo sotto il puntatore è evidenziato e il rilascio emette nodeDrop con il nodo e le righe (data). Una riga che fa parte della selezione trascina tutta la selezione. Il componente non sposta nulla da sé: è il chiamante a aggiornare i dati.

Il trascinamento richiede un puntatore: da tastiera serve un'alternativa equivalente, per esempio un'azione «Sposta in…».

Metodi esposti (defineExpose)

Accessibilità

La tabella usa markup semantico con ruolo treegrid: livello, stato di espansione e selezione sono negli attributi aria-level, aria-expanded e aria-selected di ogni riga, e data-level guida l'indentazione visiva. I controlli di espansione sono <button> accessibili da tastiera.

• caption è il nome della treegrid, reso come <caption> visibile solo agli screen reader (dalla 1.24.0 la classe che la nasconde ha la sua regola: prima la didascalia compariva sopra la tabella).
• Gli attributi aria-* passati alla TreeTable (aria-label, aria-describedby…) finiscono sulla <table> che ha il ruolo treegrid; classi e data-* restano sul contenitore (dalla 1.24.0).
• Nel tema scuro il testo dei livelli 2 e 3 usa neutral-400: neutral-500 su slate-800 si fermava a circa 3:1 (dalla 1.24.0).

TypeScript

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