Table

useTableGrouping

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

Composable interno — utilizzato dal componente DataTable della libreria.

Firma TypeScript

export function useTableGrouping<T = unknown>(
  options?: UseTableGroupingOptions
): UseTableGroupingResult<T>

interface UseTableGroupingOptions {
  groupRowsBy?: string;
  rowGroupMode?: 'subheader' | 'rowspan';
  expandableRowGroups?: boolean;   // default: false
}

export interface UseTableGroupingResult<T> {
  expandedRowGroupKeys: Ref<Set<unknown>>;
  groupedData: (data: T[], getValueFn: (item: T, field: string) => unknown) => GroupedRow<T>[];
  isGroupHeader: (row: GroupedRow<T>) => boolean;
  isGroupFooter: (row: GroupedRow<T>) => boolean;
  isGroupExpanded: (groupKey: unknown) => boolean;
  toggleGroupExpansion: (groupKey: unknown) => void;
  getGroupRowspan: (data: T[], rowIndex: number, getValueFn: (item: T, field: string) => unknown) => number;
}

export type GroupedRow<T> =
  | { type: 'header'; groupKey: unknown; data: T }
  | { type: 'data'; data: T }
  | { type: 'footer'; groupKey: unknown; data: T }

Parametri

Parametro	Tipo	Descrizione
`groupRowsBy`	`string`	Campo su cui raggruppare le righe
`rowGroupMode`	`'subheader' \| 'rowspan'`	Modalita visiva: subheader inserisce righe header, rowspan usa cell-merge
`expandableRowGroups`	`boolean`	Se true i gruppi possono essere espansi/collassati (solo modalita `subheader`)

Valore di Ritorno

Proprietà	Tipo	Descrizione
`expandedRowGroupKeys`	`Ref<Set<unknown>>`	Set dei valori-chiave dei gruppi espansi
`groupedData`	funzione	Trasforma l'array dati inserendo righe `header`/`footer` tra i gruppi
`isGroupHeader`	`(row) => boolean`	True se la riga e un header di gruppo
`isGroupFooter`	`(row) => boolean`	True se la riga e un footer di gruppo
`isGroupExpanded`	`(groupKey) => boolean`	True se il gruppo e espanso
`toggleGroupExpansion`	`(groupKey) => void`	Apre/chiude un gruppo e emette `rowGroupExpand`/`rowGroupCollapse`
`getGroupRowspan`	funzione	Calcola il rowspan per modalita `rowspan`; ritorna il numero di righe consecutive con lo stesso valore

Esempio

const { groupedData, isGroupHeader, isGroupExpanded, toggleGroupExpansion } =
  useTableGrouping<Product>({
    groupRowsBy: 'category',
    rowGroupMode: 'subheader',
    expandableRowGroups: true,
  })

// Dati da visualizzare nel template
const displayRows = computed(() =>
  groupedData(filteredRows.value, (item, field) => item[field])
)

// Filtra fuori le righe dei gruppi collassati
const visibleRows = computed(() =>
  displayRows.value.filter(row =>
    isGroupHeader(row) || isGroupExpanded(row.data['category'])
  )
)

Note

In modalita subheader, groupedData inserisce una riga con type: 'header' ogni volta che il valore del campo cambia rispetto alla riga precedente (dataset deve essere pre-ordinato per groupRowsBy).
Se expandableRowGroups=false tutti i gruppi sono sempre visibili; expandedRowGroupKeys rimane vuoto.
toggleGroupExpansion modifica expandedRowGroupKeys (Set reattivo) e chiama emit('rowGroupExpand', { data, groupKey }) o rowGroupCollapse.
In modalita rowspan, getGroupRowspan deve essere chiamato per ogni cella della prima colonna; ritorna 1 per celle successive dello stesso gruppo (da nascondere con CSS display:none).
I footer di gruppo devono essere abilitati esplicitamente tramite slot groupfooter nel componente; groupedData li inserisce automaticamente dopo l'ultima riga del gruppo.

useTableFilter

Composable interno per filtri per-colonna e filtro globale con multi-constraint e match mode configurabili.

useTablePagination

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