DataTable

Import

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

Esempio Base

Props — DataTable

Props — Column

Emits

Slot — DataTable

Slot — Column

Esempi

Ordinamento

Filtri per riga

Selezione righe

Espansione riga

Footer per-Column e aggregazioni built-in

Ogni Column può definire uno slot #footer per-colonna, una prop footer: string testuale, oppure una prop aggregate che produce un'aggregazione built-in (sum, count, avg, min, max) o una funzione custom (rows) => unknown. Le aggregazioni vengono calcolate sui dati della pagina corrente (paginatedData, già filtrati e paginati). Lo slot #footer ha priorità su aggregate, che a sua volta vince sulla prop footer. Se nessuna colonna definisce contenuto footer, il <tfoot> non viene renderizzato (backward-compatible).

Regole di priorità per la cella footer (alta → bassa):

1. Slot #footer="{ column, value }" definito sulla Column
2. Prop aggregate (con eventuale aggregateFormat)
3. Prop footer: string (testo statico)
4. Cella vuota

Funzioni di aggregazione built-in:

Lo slot footer del DataTable (riga full-width colspan) può coesistere con i footer per-Column: viene renderizzata come riga separata dopo quella per-colonna.

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>

Editing inline (cell mode)

Allineamento automatico per dataType

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

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

Metodi esposti (defineExpose)

Accessibili via templateRef.value.* quando si ottiene un ref al DataTable.

Accessibilità

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'