DataTableRecetas
Avanzado
Tiempo real por SSE, persistencia de columnas y virtualización.
Tiempo real (SSE)
import { useDataTableLiveRefresh } from "@fesa/components/datatable";
import { subscribeRealtime } from "@/lib/realtime-client";
// Con useSmartTable:
const table = useSmartTable({
fetchPage,
liveRefresh: (refresh) => subscribeRealtime("order:updated", refresh),
});
// O suelto, con el ref:
useDataTableLiveRefresh(tableRef, (refresh) => {
const un1 = subscribeRealtime("order:updated", refresh);
const un2 = subscribeRealtime("order:created", refresh);
return () => { un1(); un2(); };
});Ráfagas de eventos se agrupan (300ms) en un solo silentRefetch. Sirve cualquier fuente que acepte un callback y devuelva su cleanup.
Recordar las columnas del usuario
<SmartDataTable
columnVisibility={{ enabled: true }}
columnOrder={{ enabled: true }}
persistence={{
enabled: true,
key: "orders-table", // única por tabla
include: ["columnVisibility", "columnOrder", "density", "pageSize"],
}}
/>Al volver al listado, el usuario encuentra sus columnas, su orden y su densidad.
Tabla muy grande (virtualización)
<SmartDataTable
virtualization={{ enabled: true, rowHeight: 48 }}
style={{ maxHeight: 560, stickyHeader: true }}
pagination={{ pageSizeOptions: [100] }}
/>Solo las filas visibles (+ overscan) están en el DOM. Requisitos: maxHeight en el estilo y alto de fila constante. Con la paginación server de ≤100 filas normalmente no la necesitas.