Estructura y Layout
Table
Componente de tabla composable con sub-componentes para encabezados, filas y celdas. Soporta generacion automatica y modo sin bordes.
Tests
73%
Uso
STable es un componente de tabla compuesto por sub-componentes combinables: STableHead, STableBody, STableRow, STableCell y STableHeadCell. Cada sub-componente corresponde a un elemento HTML nativo de tabla (<table>, <thead>, <tbody>, <tr>, <td>, <th>) con estilos consistentes aplicados automaticamente.
Tambien puedes generar una tabla automaticamente pasando los arrays cols y rows directamente a STable, omitiendo los sub-componentes por completo.
Sin bordes
Por defecto, la tabla se renderiza con un borde redondeado, sombra y contorno. Establece borderless en true para eliminar el estilo del contenedor exterior, lo cual es util cuando la tabla esta dentro de otro contenedor con bordes.
Props
STable
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
class | ClassNameValue | - | Clases CSS adicionales aplicadas a la tabla |
borderless | boolean | false | Elimina el borde exterior, sombra y esquinas redondeadas |
cols | string[] | - | Encabezados de columna para la tabla auto-generada |
rows | string[] | - | Datos de filas para la tabla auto-generada |
highlight | number[] | - | Indices de columnas a resaltar en las filas auto-generadas |
STableHead
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
class | string | - | Clases CSS adicionales aplicadas al thead |
STableBody
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
class | string | - | Clases CSS adicionales aplicadas al tbody |
STableRow
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
class | ClassNameValue | - | Clases CSS adicionales aplicadas a la fila |
STableHeadCell
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
class | ClassNameValue | - | Clases CSS adicionales aplicadas a la celda de encabezado |
STableCell
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
class | ClassNameValue | - | Clases CSS adicionales aplicadas a la celda |
highlight | boolean | false | Aplica fuente en negrita y color de texto mas oscuro |
colspan | number | - | Numero de columnas que la celda debe abarcar |
Slots
STable
| Nombre | Descripcion |
|---|---|
default | Contenido de la tabla (STableHead, STableBody u otros elementos) |
STableHead
| Nombre | Descripcion |
|---|---|
default | Celdas de encabezado (elementos STableHeadCell) |
STableBody
| Nombre | Descripcion |
|---|---|
default | Filas de la tabla (elementos STableRow) |
STableRow
| Nombre | Descripcion |
|---|---|
default | Celdas de la fila (elementos STableCell o STableHeadCell) |
STableCell
| Nombre | Descripcion |
|---|---|
default | Contenido de la celda |
STableHeadCell
| Nombre | Descripcion |
|---|---|
default | Contenido de la celda de encabezado |