Estructura y Layout

DTable

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

Tests

81%

SDTable es una tabla basada en datos — pasa tu arreglo de datos y las definiciones de columnas, y la tabla se genera automaticamente. Para una tabla composable donde controlas la estructura HTML completa, ve STable.

Uso

SDTable genera automaticamente una tabla a partir de un arreglo data y definiciones de SDColumn. Cada SDColumn se mapea a una columna en la tabla haciendo coincidir su prop field con una clave en los objetos de datos. Soporta ordenamiento de columnas, esqueletos de carga, enlaces en filas, filas expandibles, renderizado personalizado de celdas y paginacion.

Carga

Establece la prop loading en true para mostrar un esqueleto de carga mientras se obtienen los datos. El esqueleto coincide automaticamente con el numero de columnas definidas.

Ordenamiento

Agrega la prop sort a cualquier SDColumn para hacer esa columna ordenable. Al hacer clic en el encabezado de la columna se alternan los estados de ordenamiento. El evento sort se emite con el field de la columna y la direccion actual de sort.

Filas expandibles

Agrega un SDColumn con la prop expander para habilitar filas expandibles. Cada fila obtiene un boton de alternancia que revela el contenido del slot expansion. El evento toggleExpanders se emite cuando una fila se expande, con los datos de la fila como payload.

Enlaces en filas

Usa la prop rowLink para hacer cada fila un enlace clicable. Pasa una funcion que reciba los datos de la fila y retorne una URL. Usa rowLinkAs para renderizar con un componente personalizado (ej. RouterLink). Agrega noLink a columnas especificas para excluirlas del enlace.

Paginacion

Pasa un objeto paginator para mostrar controles de paginacion debajo de la tabla. El objeto sigue la interfaz TPaginatorProps y soporta page, size, total, pageSizes, y mas. El evento paginatorChange se emite cuando el usuario interactua con los controles.

Compacto

Usa la prop slim para reducir el padding vertical de las celdas y obtener un diseno mas compacto.

Sin borde

Usa la prop borderless para eliminar el borde exterior y la sombra de la tabla.

Props de SDTable

Prop	Tipo	Default	Descripcion
`data`	`Record<string, any>[]`	-	Arreglo de objetos de fila para mostrar en la tabla
`loading`	`boolean`	`false`	Muestra un estado de carga con esqueleto
`slim`	`boolean`	`false`	Reduce el padding de las celdas para un diseno mas compacto
`borderless`	`boolean`	`false`	Elimina el borde y la sombra alrededor de la tabla
`rowLink`	`(row: Record<string, any>) => string`	-	Funcion que retorna una URL para hacer cada fila un enlace navegable
`rowLinkAs`	`Component`	-	Componente personalizado para renderizar los enlaces de fila (ej. `RouterLink`)
`paginator`	`TPaginatorProps`	-	Objeto de configuracion del paginador para mostrar controles de paginacion
`class`	`string`	-	Clases CSS adicionales aplicadas al contenedor de la tabla

Props de SDColumn

Prop	Tipo	Default	Descripcion
`field`	`string`	-	Clave en el objeto de datos para mostrar en esta columna
`header`	`string`	-	Texto mostrado en el encabezado de la columna
`sort`	`boolean \| 'asc' \| 'des'`	-	Habilita el ordenamiento en esta columna. Usa `true` para el valor por defecto, o `'asc'`/`'des'` para una direccion inicial
`noLink`	`boolean`	`false`	Evita que esta columna sea envuelta en un enlace de fila
`expander`	`boolean`	`false`	Convierte esta columna en un control de expansion para filas expandibles
`unstyled`	`boolean`	`false`	Elimina el padding y los estilos de texto por defecto de la celda

Eventos

Evento	Payload	Descripcion
`sort`	`{ field: string \| symbol, sort: 'asc' \| 'des' \| boolean }`	Se emite cuando se hace clic en el encabezado de una columna ordenable
`paginatorChange`	`{ page?: number, size?: number, dir?: 'prev' \| 'next' }`	Se emite cuando el usuario interactua con los controles de paginacion
`toggleExpanders`	`Record<string \| symbol, any>`	Se emite cuando una fila se expande, con los datos de la fila como payload

Slots de SDColumn

Nombre	Props	Descripcion
`body`	`{ row: any, value: any }`	Contenido personalizado de la celda. `row` es el objeto de datos completo, `value` es el valor del campo
`header`	-	Contenido personalizado del encabezado de la columna

Slots de SDTable

Nombre	Props	Descripcion
`expansion`	`{ row: any }`	Contenido mostrado cuando una fila se expande. `row` es el objeto de datos completo

Editar esta páginaoReportar un problema

Table

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

TemplateHeaderTable

Un componente de plantilla que proporciona un encabezado con titulo y barra de busqueda para tablas.