fn_registry/frontend/functions/ui/data_table.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
data_table	component	ts	ui	1.1.0	impure	DataTable(props: DataTableProps): JSX.Element	Tabla de datos con sticky header, overflow scroll, heatmap por columna, formato condicional (number/datetime/currency), hover rows y densidad configurable (compact/cozy/roomy). Auto-detecta columnas desde la primera fila si no se proveen.	table data heatmap dashboard component ui format visualization				false		react @mantine/core	Componente DataTable que renderiza tabla con sticky header, heatmap condicional y formato automático de datos	false			frontend/functions/ui/data_table.tsx	name type required description data Record<string, unknown>[] true Filas de datos. Cada objeto es una fila. name type required description columns ColumnDef[] false Definición de columnas con key, label, format y align. Si se omite, se auto-detectan desde la primera fila. name type required description heatmapColumns string[] false Keys de columnas numéricas que deben colorearse por intensidad (azul oscuro=bajo, azul claro=alto). name type required description maxHeight number | string false Altura máxima antes de scroll. Default 500px. name type required description loading boolean false Estado de carga. Muestra spinner si data está vacía. name type required description error Error | null false Error a mostrar si la carga falló. name type required description density 'compact' | 'cozy' | 'roomy' false Padding vertical y horizontal de filas. compact=4/xs, cozy=6/sm (default), roomy=10/md.		false	react	default heatmap

Ejemplo

// Tabla simple con auto-detección de columnas
<DataTable data={rows} />

// Con columnas definidas y heatmap
<DataTable
  data={metrics}
  columns={[
    { key: 'domain', label: 'Domain' },
    { key: 'count', label: 'Functions', format: ',' },
    { key: 'pure_pct', label: 'Pure %', format: '.1f' },
  ]}
  heatmapColumns={['count', 'pure_pct']}
/>

// Con formato moneda y fecha
<DataTable
  data={transactions}
  columns={[
    { key: 'date', label: 'Date', format: 'datetime' },
    { key: 'amount', label: 'Amount', format: '$,.2f', align: 'right' },
    { key: 'description', label: 'Description' },
  ]}
/>

Formatos soportados (campo format en ColumnDef)

format	Ejemplo input	Output
','	1234567	1,234,567
',.2f'	1234.5	1,234.50
'$,.2f'	1234.5	$1,234.50
'.0f'	42.7	43
'datetime'	'2026-04-01T12:00:00Z'	4/1/2026, 12:00:00 PM

Notas

Extraido y generalizado desde apps/rapid_dashboards/frontend/src/components/widgets/TableWidget.tsx. El heatmap usa useMemo para calcular min/max por columna solo cuando cambian data o heatmapColumns. La alineación de celdas numéricas es automática (derecha) cuando el valor es typeof 'number'; se puede sobreescribir con el campo align en ColumnDef.