FesaComponents
DataTableReferencia de API

SmartDataTable

Tipos del fetch, props del componente y el ref imperativo.

Tipos de datos

Lo que pide y devuelve un fetch:

interface DataTableFetchParams {
  pageIndex: number;                        // 0-based
  pageSize: number;                         // ya acotado a MAX_PAGE_SIZE (100)
  sorting: { id: string; desc: boolean }[]; // [0] es el orden activo
  globalFilter: string;                     // texto de búsqueda ("" si no hay)
}

interface DataTableFetchResult<T> {
  data: T[];
  totalRows: number;
  aggregates?: Record<string, string | number>;  // totales de pie (opcional)
}

type DataTableFetchFn<T> = (params: DataTableFetchParams) => Promise<DataTableFetchResult<T>>;

Props

PropTipoDefaultDescripción
columns *CustomColumnDef<T>[]Definición de columnas. Crear con useMemo.
getRowId *(row: T) => stringId estable por fila (normalmente row.id).
fetchFn *DataTableFetchFn<T>Cómo pedir una página.
initialDataT[]Primera página (SSR). Si está presente, no hay fetch al montar.
initialTotalRowsnumber0Total que acompaña a initialData.
initialPageIndexnumber0Estado inicial. Normalmente sale de useTableSearchParams o de smartProps.
initialPageSizenumber10Estado inicial.
initialSortingSortingState[][]Estado inicial.
initialFilterstring""Estado inicial.
initialColumnVisibilityRecord<string, boolean>{}Visibilidad inicial por columna.
initialDensity"compact"|"default"|"comfortable""default"Densidad inicial.
syncSearchParamsbooleanfalseLa tabla lee la URL al montar y la reescribe sola. No combinar con useTableSearchParams en la misma tabla.
selection / expansion / pagination / sorting / filter / columnVisibilityconfigs "smart"Las configs sin sus campos de estado (el store los pone).
presentaciónAcepta además todas las props de presentación de CustomDataTable: style, toolbarConfig, export, copy, print, fullscreen, bulkActions, emptyMessage/emptyIcon/emptyState, mobileCardRender, columnOrder, columnPinning, columnResizing, virtualization, keyboardNavigation, persistence, loadingConfig, caption, footer, onRowClick/onRowDoubleClick/onRowContextMenu, clases…

La fila de totales no tiene prop en el modo smart: si el fetch devuelve aggregates, se pinta sola.

Ref imperativo — SmartDataTableRef<T>

MétodoQué haceCuándo usarlo
refetch()Repite la página actual mostrando el indicador.Botón "reintentar" manual.
silentRefetch()Repite sin indicador; gana a cualquier fetch en vuelo.El estándar tras cualquier mutación.
resetAndRefetch()Página 0 + refetch. Limpia selección.Tras cambiar un filtro externo.
updateRow(id, partial)Parchea la fila en memoria e invalida fetches en vuelo.Actualización optimista de un toggle.
removeRow(id)Quita la fila y resta 1 al total.Eliminación optimista.
getSelectedRowIds()Ids marcados.Acciones masivas.
clearSelection()Desmarca todo (incluida la selección cross-page).Tras completar una acción masiva.

En esta pagina