Table

useTableStatePersistence

Composable interno per la persistenza dello stato della tabella in sessionStorage o localStorage con restore automatico al mount.

Composable interno — utilizzato dal componente DataTable della libreria.

Firma TypeScript

export function useTableStatePersistence(
  options: UseTableStatePersistenceOptions
): UseTableStatePersistenceResult

interface UseTableStatePersistenceOptions {
  stateKey?: string;
  stateStorage?: 'session' | 'local';   // default: 'session'
  enabled?: boolean;                     // default: false
}

export interface UseTableStatePersistenceResult {
  saveState: (state: TableState) => void;
  restoreState: () => TableState | null;
  clearState: () => void;
}

export interface TableState {
  first?: number;
  rows?: number;
  sortField?: string;
  sortOrder?: number;
  multiSortMeta?: SortMeta[];
  filters?: FilterMeta;
  expandedRowKeys?: (string | number)[];
  selection?: unknown[];
  columnOrder?: string[];
  columnWidths?: Record<string, number>;
}

Parametri

Parametro	Tipo	Default	Descrizione
`stateKey`	`string`	—	Chiave univoca per identificare lo stato nello storage (obbligatorio se `enabled=true`)
`stateStorage`	`'session' \| 'local'`	`'session'`	Storage da usare: `sessionStorage` o `localStorage`
`enabled`	`boolean`	`false`	Abilita la persistenza; se false `saveState` e `restoreState` sono no-op

Valore di Ritorno

Proprietà	Tipo	Descrizione
`saveState`	`(state: TableState) => void`	Serializza e salva lo stato nello storage
`restoreState`	`() => TableState \| null`	Legge e deserializza lo stato; ritorna `null` se non trovato o non valido
`clearState`	`() => void`	Rimuove lo stato dallo storage

Esempio

const { saveState, restoreState } = useTableStatePersistence({
  stateKey: 'orders-table',
  stateStorage: 'local',
  enabled: true,
})

// Restore al mount
onMounted(() => {
  const saved = restoreState()
  if (saved) {
    if (saved.first !== undefined) currentFirst.value = saved.first
    if (saved.rows !== undefined) currentRows.value = saved.rows
    if (saved.sortField) currentSortField.value = saved.sortField
    if (saved.filters) currentFilters.value = saved.filters
  }
})

// Salva ad ogni variazione rilevante
watch(
  [currentFirst, currentRows, currentSortField, currentFilters],
  () => saveState(createState()),
  { deep: true }
)

Note

saveState usa JSON.stringify; oggetti non serializzabili (Date, Map, Set) devono essere convertiti prima della chiamata. I Set per expanded/selection vengono serializzati come array.
restoreState esegue JSON.parse con try/catch: in caso di JSON malformato ritorna null e non lancia eccezione.
Il DataTable usa due watcher: uno shallow per cambi di first/rows/sortField/sortOrder (performance) e uno deep per filters (oggetto annidato).
stateKey deve essere univoco a livello di applicazione per evitare collisioni tra tabelle diverse sullo stesso dominio.
clearState e utile per reset manuali (es. pulsante "Azzera filtri e torna alla prima pagina").
Se enabled=false, tutte le funzioni sono no-op sicuri: nessuna scrittura/lettura avviene sul storage del browser.

useTableSort

Composable interno per ordinamento singolo e multi-colonna con dataType e icone configurabili.

Primitive Types

Tipi primitivi di @pzeta/vue-components — Severity, Size, SizeExtended, FormVariant, OptionValue.