Estructura y Layout

DTable

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

Tests

86%

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.

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`	-	Evita que esta columna sea envuelta en un enlace de fila
`expander`	`boolean`	-	Convierte esta columna en un control de expansion para filas expandibles
`unstyled`	`boolean`	-	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

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

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.

Template Header Table