Estructura y Layout

Table

Componente de tabla composable con sub-componentes para encabezados, filas y celdas. Soporta generacion automatica y modo sin bordes.

Tests

94%

STable es una tabla composable — construyes la estructura manualmente con sub-componentes para tener control total sobre el markup. Para una tabla basada en datos con ordenamiento, paginacion y enlaces en filas integrados, ve SDTable.

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.

Resaltado

Usa la prop highlight en STableCell para aplicar fuente en negrita y color de texto mas oscuro a una celda, haciendo que los datos clave destaquen.

Colspan

Usa la prop colspan en STableCell para hacer que una celda abarque multiples columnas.

Generacion automatica

Pasa los arrays cols y rows directamente a STable para generar la tabla automaticamente sin usar sub-componentes. Usa la prop highlight en STable con un arreglo de indices de columnas para resaltar columnas especificas en cada fila.

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

Editar esta páginaoReportar un problema

Tab

Componente de navegacion por pestanas con variantes underline, pills y vetches para organizar secciones de contenido.

DTable

Componente de tabla basada en datos con ordenamiento, estados de carga, enlaces en filas y soporte de paginacion.