Egutierrez
5a824c2eee
75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
3.0 KiB
Markdown
94 lines
3.0 KiB
Markdown
---
|
|
name: data_table
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "DataTable(props: DataTableProps): JSX.Element"
|
|
description: "Tabla de datos con sticky header, overflow scroll, heatmap por columna, formato condicional (number/datetime/currency) y hover rows. Auto-detecta columnas desde la primera fila si no se proveen."
|
|
tags: [table, data, heatmap, dashboard, component, ui, format, visualization]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: [react, "@mantine/core"]
|
|
output: "Componente DataTable que renderiza tabla con sticky header, heatmap condicional y formato automático de datos"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/data_table.tsx"
|
|
props:
|
|
- name: data
|
|
type: "Record<string, unknown>[]"
|
|
required: true
|
|
description: "Filas de datos. Cada objeto es una fila."
|
|
- name: columns
|
|
type: "ColumnDef[]"
|
|
required: false
|
|
description: "Definición de columnas con key, label, format y align. Si se omite, se auto-detectan desde la primera fila."
|
|
- name: heatmapColumns
|
|
type: "string[]"
|
|
required: false
|
|
description: "Keys de columnas numéricas que deben colorearse por intensidad (azul oscuro=bajo, azul claro=alto)."
|
|
- name: maxHeight
|
|
type: "number | string"
|
|
required: false
|
|
description: "Altura máxima antes de scroll. Default 500px."
|
|
- name: loading
|
|
type: "boolean"
|
|
required: false
|
|
description: "Estado de carga. Muestra spinner si data está vacía."
|
|
- name: error
|
|
type: "Error | null"
|
|
required: false
|
|
description: "Error a mostrar si la carga falló."
|
|
emits: []
|
|
has_state: false
|
|
framework: react
|
|
variant: [default, heatmap]
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
// 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.
|