Table

useTableColumns

Composable interno per estrarre le definizioni delle colonne dagli slot Column di DataTable.

Composable interno — utilizzato dai componenti DataTable e TreeTable della libreria.

Firma TypeScript

export function useTableColumns<C extends BaseColumnProps = BaseColumnProps>(
  options: UseTableColumnsOptions<C>
): UseTableColumnsResult<C>

export interface UseTableColumnsOptions<C extends BaseColumnProps = BaseColumnProps> {
  slots: Slots;
  normalizeColumn?: (props: Record<string, unknown>) => C;
}

export interface UseTableColumnsResult<C extends BaseColumnProps = BaseColumnProps> {
  columnDefinitions: ComputedRef<ExtractedColumn<C>[]>;
  visibleColumns: ComputedRef<ExtractedColumn<C>[]>;
  sortableColumns: ComputedRef<ExtractedColumn<C>[]>;
  hasColumnSlot: (col: ExtractedColumn<C>, slotName: keyof ColumnSlotFunctions) => boolean;
  getColumnSlotRenderer: <T extends keyof ColumnSlotFunctions>(col: ExtractedColumn<C>, slotName: T) => ColumnSlotFunctions[T] | null;
}

Parametri

ParametroTipoDescrizione
options.slotsSlotsSlots del componente padre (da useSlots())
options.normalizeColumn(props) => C (opzionale)Funzione per normalizzare le props della colonna

Valore di Ritorno

ProprietàTipoDescrizione
columnDefinitionsComputedRef<ExtractedColumn<C>[]>Tutte le colonne estratte dallo slot default
visibleColumnsComputedRef<ExtractedColumn<C>[]>Solo colonne con hidden=false
sortableColumnsComputedRef<ExtractedColumn<C>[]>Solo colonne con sortable=true
hasColumnSlot(col, slotName) => booleanVerifica se una colonna ha uno slot specifico (body, header, footer, filter, editor)
getColumnSlotRenderer(col, slotName) => fn | nullRestituisce la funzione render dello slot o null

Esempio

const slots = useSlots()
const { visibleColumns, hasColumnSlot, getColumnSlotRenderer } = useTableColumns({ slots })

// In template
visibleColumns.value.forEach(col => {
  if (hasColumnSlot(col, 'body')) {
    const renderer = getColumnSlotRenderer(col, 'body')
    // renderer({ data: row, field: col.field, index, column: col })
  }
})

Note

  • L'estrazione avviene ricorsivamente nello slot default cercando VNode con type.name === 'Column' o con prop field/header.
  • Gli attributi booleani in template Vue vengono passati come '' (stringa vuota) invece di true; il composable normalizza automaticamente sortable, hidden, expander.
  • Gli slot interni della colonna (body, header, ecc.) sono salvati in col._slots come funzioni render.
  • getColumnSlotRenderer e type-safe: il tipo di ritorno varia in base al slotName passato.