DataTable Referencia de API Configs campo a campo Selección, expansión, paginación, estilo, toolbar, export y el resto de configs.
En SmartDataTable las configs marcadas con 🔄 pierden sus campos de estado
(selectedRows, pageIndex…): el store interno los gestiona y tú solo pasas las opciones.
Campo Tipo Default Descripción enabled *boolean— Activa la selección. mode"single"|"multiple""multiple"Radio o checkboxes. showCheckboxbooleanfalseColumna de checkboxes (con "seleccionar todo" en la cabecera). selectOnRowClickbooleanfalseClic en la fila alterna la selección. onRowSelect(row) => void— Callback al seleccionar por clic. canSelect(row) => boolean— Filas no seleccionables.
Solo modo controlado: selectedRows, onSelectionChange, allMatchingSelected, onAllMatchingChange.
Campo Tipo Default Descripción enabled *boolean— Activa la columna del expansor. renderContent(row) => ReactNode— El contenido expandido (fila a todo lo ancho). expandOnClickbooleanfalseClic en la fila expande (además del chevron). canExpand(row) => boolean— Filas sin expansor.
Solo controlado: expandedRows, onExpansionChange. Incompatible con virtualización.
Campo Tipo Default Descripción pageSizeOptionsnumber[][10, 20, 30, 50, 100]Opciones del selector. showPageNumbersbooleantrueBotones numerados (con elipsis inteligente). showFirstLastbooleantrueBotones primera/última. showRowsInfobooleantrue"Mostrando X a Y de Z". showSelectedInfobooleantrue"(N seleccionados)".
Solo controlado: pageIndex, pageSize, totalRows, totalPages, onPaginationChange.
Campo Tipo Default Descripción enableMultiSortbooleanfalseOrden por varias columnas. manualSortingbooleansmart: true true = ordena el servidor. En smart siempre.
Solo controlado: sorting, onSortingChange. Ciclo del clic: sin orden → asc → desc → sin orden.
Campo Tipo Default Descripción placeholderstring"Buscar..."Placeholder del input. showClearButtonbooleantrueLa X de limpiar. debounceMsnumber700Espera tras el último tecleo. Enter dispara al instante.
Solo controlado: globalFilter, onGlobalFilterChange, filterFn (filtrado client-side).
Campo Tipo Default Descripción enabled *boolean— Activa el dropdown "Columnas" del toolbar. alwaysVisibleColumnsstring[][]Ids que no se pueden ocultar (aparecen deshabilitados).
Solo controlado: columnVisibility, onColumnVisibilityChange.
Campo Tipo Default Descripción stripedbooleanfalseFilas zebra. hoverbooleantrueResaltado al pasar. stickyHeaderbooleanfalseCabecera fija al scrollear. stickyFooterbooleanfalseFila de totales fija abajo. density"compact"|"default"|"comfortable""default"Alto de fila (h-8 / h-12 / h-16). El usuario puede cambiarla desde el toolbar. borderStyle"default"|"none"|"horizontal"|"vertical"|"all""default"Bordes. maxHeight / minHeightnumber— Alto del contenedor con scroll. maxHeight es requisito de la virtualización. roundedbooleanfalseEsquinas redondeadas. showColumnBordersbooleanfalseSeparadores verticales.
Campo Tipo Default Descripción showbooleanauto false oculta el toolbar entero.showSearchbooleantrueInput de búsqueda. showExportbooleansegún export.enabled Dropdown de export. showColumnVisibilitybooleansegún config Dropdown de columnas. showDensityTogglebooleanfalseSelector de densidad. showRefreshbooleanfalseBotón actualizar (usa onRefresh). showCopy / showPrint / showFullscreenbooleansegún configs Botones de copiar / imprimir / pantalla completa. onRefresh() => void— Handler del botón actualizar. customStart / customEndReactNode— Contenido propio a los lados (los filtros facetados van en customStart).
Campo Tipo Default Descripción enabled *boolean— Activa el export. formats("csv"|"json"|"xlsx")[]los tres Formatos del dropdown. filenamestring"export"Nombre del archivo (sin extensión). includeHeadersbooleantrueFila de cabeceras. scope"page"|"selected"|"all""page"Qué filas: la página cargada, la selección, o todo el filtro. fetchAllFn() => Promise<T[]>— Requerido para scope: "all". Trae todo el resultado filtrado. onExport(format, rows) => void— Si lo defines, la app exporta y la librería no hace nada más.
XLSX usa exceljs por import dinámico: no pesa en el bundle hasta que alguien exporta.
CSV sale con BOM (Excel lo abre con acentos correctos).
Campo Config Default Descripción enabled *ambas — Activa el botón. includeHeaderscopy trueCabeceras en lo copiado. formatcopy "text""text"|"csv"|"json".titleprint — Título del documento. pageSizeprint "A4""A4"|"Letter"|"Legal".orientationprint "portrait""portrait"|"landscape".fetchAllFnambas — Copiar/imprimir todo el filtro en vez de la página.
Config Campos Notas columnOrderenabled, order?: string[], onOrderChange?Reordenar arrastrando cabeceras. Sin order el estado es interno. Persiste con persistence ("columnOrder"). Las columnas fijas no se arrastran. columnPinningenabled, leftPinnedColumns?, rightPinnedColumns?Fija por config (el pinned de la columna gana). Varios pins por lado acumulan offsets usando width (fallback 150px). Las no listadas pierden el pin implícito. columnResizingenabled, columnSizing: Record<string, number>, onColumnSizingChange, minColumnWidth? (50), maxColumnWidth? (500)Controlada: la app guarda los anchos (o los persiste con persistence).
Config Campos Notas virtualizationenabled, rowHeight? (48), overscan? (5)Ventana de filas con spacers. Requiere style.maxHeight y alto de fila fijo. Incompatible con expansión. keyboardNavigationenabled, onEnter?, onEscape?, onDelete?↑/↓ mueven el foco, PageUp/Down saltan 10, Espacio selecciona, E expande, Enter/Escape/Supr llaman tus callbacks. persistenceenabled, key *, include?, storage?include: subconjunto de ["columnVisibility","sorting","density","pageSize","columnSizing","columnPinning","columnOrder"] (default: todos). storage: "localStorage" (default) o "sessionStorage". Guarda con debounce de 300ms y restaura al montar.
Config Campos Notas loadingConfigskeletonCount?, loadingText?, loadingOverlay?, showSkeletons?skeletonCount manda sobre pageSize para las filas skeleton; loadingText reemplaza "Actualizando".emptyStatemessage?, description?, icon?, action?, customContent?Estado vacío completo. customContent reemplaza todo. La tabla lo usa también para el error de fetch con reintento. fullscreenenabled, onFullscreenChange?Botón de pantalla completa (API nativa; Escape sale).
bulkActions ?: ( rows : T [], context : BulkActionsContext ) => ReactNode interface BulkActionsContext { allMatchingSelected : boolean ; // "seleccionar los N que coinciden" activo totalRows : number ; // el N } Se renderiza dentro de la barra integrada (contador + limpiar incluidos). Con allMatchingSelected, opera server-side sobre el filtro completo.