Table

useTableEditing

Composable interno per editing inline di celle e righe con tracking delle modifiche e API di completamento/annullamento.

Composable interno — utilizzato dal componente DataTable della libreria.

Firma TypeScript

export function useTableEditing<T = unknown>(
  options?: UseTableEditingOptions
): UseTableEditingResult<T>

interface UseTableEditingOptions {
  editMode?: 'cell' | 'row';   // default: 'cell'
  dataKey?: string;             // default: 'id'
}

export interface UseTableEditingResult<T> {
  editingCells: Ref<Map<string, EditingCell<T>>>;
  editingRowKeys: Ref<Set<string | number>>;
  isCellEditing: (rowIndex: number, field: string) => boolean;
  isRowEditing: (row: T) => boolean;
  onCellEditInit: (rowIndex: number, field: string, data: T) => void;
  onCellEditComplete: (rowIndex: number, field: string, newValue: unknown) => CellEditCompleteEvent<T>;
  onCellEditCancel: (rowIndex: number, field: string) => void;
  onRowEditInit: (row: T) => T;
  onRowEditSave: (row: T, editedData: T) => RowEditSaveEvent<T>;
  onRowEditCancel: (row: T) => T;
}

export interface EditingCell<T> {
  originalData: T;
  field: string;
  rowIndex: number;
}

export interface CellEditCompleteEvent<T> {
  data: T;
  newData: T;
  field: string;
  index: number;
}

export interface RowEditSaveEvent<T> {
  data: T;
  newData: T;
  index: number;
}

Parametri

Parametro	Tipo	Default	Descrizione
`editMode`	`'cell' \| 'row'`	`'cell'`	Modalita di editing: cella singola o intera riga
`dataKey`	`string`	`'id'`	Campo chiave per identificare le righe

Valore di Ritorno

Proprietà	Tipo	Descrizione
`editingCells`	`Ref<Map<string, EditingCell<T>>>`	Map delle celle in editing, chiave `"rowIndex-field"`
`editingRowKeys`	`Ref<Set<string \| number>>`	Set delle chiavi delle righe in editing
`isCellEditing`	`(rowIndex, field) => boolean`	True se la cella specificata e in modalita editing
`isRowEditing`	`(row) => boolean`	True se la riga e in modalita editing
`onCellEditInit`	`(rowIndex, field, data) => void`	Avvia l'editing di una cella (salva snapshot originale)
`onCellEditComplete`	`(rowIndex, field, newValue) => CellEditCompleteEvent`	Conferma le modifiche e rimuove la cella dall'editing
`onCellEditCancel`	`(rowIndex, field) => void`	Annulla e ripristina il valore originale
`onRowEditInit`	`(row) => T`	Avvia l'editing di una riga; ritorna un clone deep della riga
`onRowEditSave`	`(row, editedData) => RowEditSaveEvent`	Salva la riga modificata e la rimuove dall'editing
`onRowEditCancel`	`(row) => T`	Annulla le modifiche; ritorna i dati originali pre-editing

Esempio

const { isCellEditing, onCellEditInit, onCellEditComplete, onCellEditCancel } =
  useTableEditing<Product>({ editMode: 'cell', dataKey: 'id' })

// Click su cella per avviare editing
const onCellClick = (rowIndex: number, field: string, data: Product) => {
  onCellEditInit(rowIndex, field, data)
}

// Conferma con Enter o blur
const onEditComplete = (rowIndex: number, field: string, newValue: unknown) => {
  const event = onCellEditComplete(rowIndex, field, newValue)
  emit('cell-edit-complete', event)
}

// Annulla con Escape
const onEditCancel = (rowIndex: number, field: string) => {
  onCellEditCancel(rowIndex, field)
}

Note

editingCells usa la chiave composita "rowIndex-field" per identificare univocamente ogni cella in editing.
onCellEditInit salva uno snapshot dell'intera riga (originalData), non solo del valore della cella, per consentire il ripristino.
onRowEditInit esegue un clone deep tramite JSON.parse(JSON.stringify(row)) — non adatto a oggetti con Date o valori non serializzabili.
Piu celle della stessa riga possono essere in editing simultaneamente in modalita cell.
In modalita row, editingRowKeys contiene la chiave derivata da dataKey; ogni riga puo avere un solo editing attivo.
onCellEditComplete e onRowEditSave non mutano il dataset originale: ritornano l'evento con newData per permettere al componente padre di aggiornare i dati.

useTableCore

Composable interno con funzionalita core condivise tra DataTable e TreeTable (accesso nested, row key, classi CSS).

useTableExpansion

Composable interno per l'espansione delle righe della tabella con slot di dettaglio e gestione eventi.