Data

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.

Import

import { DataView } from '@pzeta/vue-components'
import type {
  DataViewProps,
  DataViewEmits,
  DataViewLayout,
  DataViewPageEvent,
  DataViewSortOrder,
} from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`value`	`unknown[]`	`[]`	Array di dati da visualizzare
`layout`	`'list' \| 'grid'`	`'list'`	Layout di visualizzazione
`dataKey`	`string`	`'id'`	Campo per identificare univocamente ogni record
`rows`	`number`	`10`	Numero di righe per pagina
`first`	`number`	`0`	Indice del primo record (v-model:first)
`totalRecords`	`number`	—	Totale record per lazy mode
`paginator`	`boolean`	`false`	Abilita la paginazione
`rowsPerPageOptions`	`number[]`	`[10, 25, 50]`	Opzioni per il dropdown righe per pagina
`currentPageReportTemplate`	`string`	`'Showing {first} to {last} of {totalRecords}'`	Template report pagina corrente
`pageLinkSize`	`number`	`5`	Numero di link pagina da mostrare
`alwaysShowPaginator`	`boolean`	`true`	Mostra paginatore anche con una sola pagina
`sortField`	`string`	—	Campo per ordinamento
`sortOrder`	`1 \| -1 \| null`	`null`	Direzione ordinamento (1=asc, -1=desc)
`lazy`	`boolean`	`false`	Abilita lazy mode (paginazione server-side)
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`class`	`string`	—	Classe CSS aggiuntiva per il contenitore

Emits

Evento	Payload	Descrizione
`page`	`DataViewPageEvent`	Cambio pagina
`sort`	`{ sortField: string; sortOrder: DataViewSortOrder }`	Cambio ordinamento
`update:layout`	`DataViewLayout`	Cambio layout
`update:first`	`number`	Cambio indice prima riga
`update:rows`	`number`	Cambio righe per pagina
`update:sortField`	`string`	Cambio campo ordinamento
`update:sortOrder`	`DataViewSortOrder`	Cambio direzione ordinamento

DataViewPageEvent

interface DataViewPageEvent {
  first: number       // Indice del primo record
  rows: number        // Righe per pagina
  page: number        // Pagina corrente (0-based)
  pageCount: number   // Numero totale di pagine
}

Slot

Slot	Scope	Descrizione
`list`	`{ items: unknown[] }`	Template per layout lista (riceve gli items della pagina corrente)
`grid`	`{ items: unknown[] }`	Template per layout griglia (riceve gli items della pagina corrente)
`header`	—	Contenuto nella zona header sopra la lista/griglia
`footer`	—	Contenuto nella zona footer sotto il paginatore
`empty`	—	Template per stato vuoto
`loading`	—	Template per stato di caricamento
`paginatorstart`	—	Contenuto a sinistra del paginatore
`paginatorend`	—	Contenuto a destra del paginatore

Esempi

Layout griglia

Con paginazione

Layout switcher (lista/griglia)

Lazy loading (server-side)

Stato vuoto personalizzato

Metodi esposti (defineExpose)

Metodo/Prop	Descrizione
`processedData`	Dati dopo l'ordinamento (ref)
`paginatedData`	Dati della pagina corrente (ref)
`totalRecords`	Numero totale record (ref)
`setLayout(layout)`	Cambia programmaticamente il layout

Accessibilità

Il componente usa un contenitore div semantico. Per migliorare l'accessibilità degli elementi della lista/griglia, aggiungere attributi aria-label nei template personalizzati.

TypeScript

import type {
  DataViewProps,
  DataViewEmits,
  DataViewLayout,
  DataViewSortOrder,
  DataViewPageEvent,
  DataViewListSlotProps,
  DataViewGridSlotProps,
} from '@pzeta/vue-components'

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.

EventCalendar

Calendario mensile con griglia di navigazione, gestione eventi e sidebar laterale con elenco eventi del giorno selezionato.