Table
useTableColumns
Composable interno per estrarre le definizioni delle colonne dagli slot Column di DataTable.
Composable interno — utilizzato dai componenti
DataTableeTreeTabledella 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
| Parametro | Tipo | Descrizione |
|---|---|---|
options.slots | Slots | Slots del componente padre (da useSlots()) |
options.normalizeColumn | (props) => C (opzionale) | Funzione per normalizzare le props della colonna |
Valore di Ritorno
| Proprietà | Tipo | Descrizione |
|---|---|---|
columnDefinitions | ComputedRef<ExtractedColumn<C>[]> | Tutte le colonne estratte dallo slot default |
visibleColumns | ComputedRef<ExtractedColumn<C>[]> | Solo colonne con hidden=false |
sortableColumns | ComputedRef<ExtractedColumn<C>[]> | Solo colonne con sortable=true |
hasColumnSlot | (col, slotName) => boolean | Verifica se una colonna ha uno slot specifico (body, header, footer, filter, editor) |
getColumnSlotRenderer | (col, slotName) => fn | null | Restituisce 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
defaultcercando VNode contype.name === 'Column'o con propfield/header. - Gli attributi booleani in template Vue vengono passati come
''(stringa vuota) invece ditrue; il composable normalizza automaticamentesortable,hidden,expander. - Gli slot interni della colonna (
body,header, ecc.) sono salvati incol._slotscome funzioni render. getColumnSlotRenderere type-safe: il tipo di ritorno varia in base alslotNamepassato.