El componente Table organiza información estructurada en filas y columnas, permitiendo comparar datos de forma clara y eficiente con jerarquía visual, estados y paginación.
| Cliente | Operación | Monto | Estado |
|---|---|---|---|
| Juan Pérez | Venta Directa | $ 25.000 | Completado |
| María Garcia | Transferencia | $ 12.400 | Completado |
Header · Body · Footer · Pagination
Importa los estilos base y los componentes de Table.
1import 'nave-ui-library/styles.css'2import {3 Table, TableHeader, TableBody, TableRow,4 TableHead, TableCell, TableCellDescription,5 TableFooter,6} from 'nave-ui-library/react'Utiliza TableCellDescription para agregar subtítulos en tipografía XS dentro de las celdas.
| Cliente | Operación | Monto | Estado | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Juan Pérez ID: 452930 | Venta Directa Ref: 99201 | $ 25.000 | Completado | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| María Garcia ID: 882103 | Transferencia Ref: 10293 | $ 12.400 | Completado | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Luca Modric ID: 110293 | Cobro QR Ref: 88301 | $ 8.900 | Completado | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Mostrando 1–3 de 91 resultados | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Variables CSS que controlan la jerarquía visual de la tabla.
El componente inyecta variables CSS para controlar color de filas, hover y tipografía secundaria.
--cell-text: Color principal del dato.--cell-desc-text: Color para metadatos (TableCellDescription).El footer detecta automáticamente componentes de paginación para alinearlos a la derecha del contador.
Props del componente Table y sus sub-componentes.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenreq | ReactNode | — | Composición de TableHeader, TableBody y TableFooter. |
className | string | — | Clases CSS adicionales para el contenedor. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
| Prop | Type | Default | Description |
|---|---|---|---|
TableHeader | component | — | Contenedor del encabezado de columnas. |
TableBody | component | — | Contenedor de filas de datos. |
TableRow | component | — | Una fila de la tabla. |
TableHead | component | — | Celda de encabezado (th). |
TableCell | component | — | Celda de datos (td). |
TableCellDescription | component | — | Subtítulo en tipografía XS dentro de una celda. |
TableFooter | component | — | Pie de tabla con contador y paginación. |
1{2 "name": "Table",3 "description": "Tabla para mostrar datos tabulares.",4 "component": "Table",5 "files": [6 "components/base/data-display/lists/Table.tsx"7 ],8 "dependencies": [9 "react"10 ]11}