Table

useTablePagination

Composable interno per la paginazione client-side delle tabelle con navigazione e cambio rows-per-page.

Composable interno — utilizzato dal componente DataTable della libreria.

Firma TypeScript

export function useTablePagination(options?: UseTablePaginationOptions): UseTablePaginationResult

interface UseTablePaginationOptions {
  initialFirst?: number;  // default: 0
  initialRows?: number;   // default: 10
}

export interface UseTablePaginationResult {
  currentFirst: Ref<number>;
  currentRows: Ref<number>;
  paginateData: <T>(data: T[]) => T[];
  handlePageChange: (first: number, rows: number) => PageEvent;
  pageInfo: (totalRecords: number) => PageInfo;
  goToFirstPage: () => void;
  goToLastPage: (totalRecords: number) => void;
  goToPage: (page: number, totalRecords: number) => void;
  setRows: (rows: number) => void;
}

export interface PageInfo {
  first: number;
  rows: number;
  page: number;      // 0-indexed
  pageCount: number;
}

Parametri

Parametro	Tipo	Default	Descrizione
`initialFirst`	`number`	`0`	Indice del primo record
`initialRows`	`number`	`10`	Righe per pagina iniziale

Valore di Ritorno

Proprietà	Tipo	Descrizione
`currentFirst`	`Ref<number>`	Indice del primo record della pagina corrente
`currentRows`	`Ref<number>`	Righe per pagina
`paginateData`	`<T>(data: T[]) => T[]`	Esegue lo slice dei dati per la pagina corrente
`handlePageChange`	`(first, rows) => PageEvent`	Aggiorna first/rows e ritorna l'evento pagina
`pageInfo`	`(totalRecords) => PageInfo`	Calcola page e pageCount dato il totale
`goToFirstPage`	`() => void`	Torna alla prima pagina
`goToLastPage`	`(totalRecords) => void`	Va all'ultima pagina
`goToPage`	`(page, totalRecords) => void`	Va a una pagina specifica (0-indexed, clampato ai limiti)
`setRows`	`(rows) => void`	Cambia rows-per-page e resetta a prima pagina

Esempio

const { currentFirst, currentRows, paginateData, handlePageChange } = useTablePagination({
  initialFirst: 0,
  initialRows: 25
})

// Applica paginazione lato client
const paginatedRows = computed(() => paginateData(sortedRows.value))

// Handler del Paginator component
const onPageChange = (event: { first: number; rows: number }) => {
  const pageEvent = handlePageChange(event.first, event.rows)
  emit('page', pageEvent)
}

Note

paginateData usa semplicemente Array.slice(first, first + rows).
setRows resetta currentFirst a 0 per evitare di trovarsi su una pagina inesistente.
goToPage usa Math.max(0, Math.min(page, pageCount - 1)) per il clamping.
Factory useTablePaginationWithSync(firstProp, rowsProp, options) esportata per sync automatico con props v-model.
pageInfo.page e 0-indexed (la prima pagina e la pagina 0).

useTableGrouping

Composable interno per raggruppamento righe con subheader e rowspan, con espansione/collasso dei gruppi.

useTableSelection

Composable interno per selezione righe singola, multipla e checkbox con eventi di selezione tipizzati.