custom-component-uno
v0.0.2
Published
Stencil Component Starter
Downloads
106
Readme
Componente Web Stencil: componente-render-tabla
Descripción
El componente componente-render-tabla
desarrollado con Stencil renderiza datos de una API REST en formato JSON en una tabla. Detecta automáticamente los encabezados y tipos de datos de los datos JSON recibidos, tambien detecta las imágenes y las carga desde su URL.
Incluye el componente en tu HTML:
Por ejemplo en el archivo index.html
, agrega el siguiente código para utilizar el componente:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Componente API</title>
<script type="module" src="/build/custom-component-uno.esm.js"></script>
<script nomodule src="/build/custom-component-uno.js"></script>
</head>
<body>
<h1>Ejemplo 1</h1>
<componente-render-tabla api-url="https://fakestoreapi.com/products"></componente-render-tabla>
<h1>Ejemplo 2</h1>
<componente-render-tabla api-url="https://fakestoreapiserver.reactbd.com/smart"></componente-render-tabla>
</body>
</html>
api-url
: Atributo que especifica la URL de la API REST desde la cual se obtendrán los datos en formato JSON.
Propiedades del Componente
apiUrl
: URL de la API REST (string).
Ejemplo de Uso
<componente-render-tabla api-url="https://fakestoreapi.com/products"></componente-render-tabla>
Este código renderiza una tabla que obtiene datos de https://fakestoreapi.com/products
y muestra las filas y columnas basadas en los datos JSON devueltos por la API.
Manejo de Errores
- Si la URL de la API es incorrecta o el formato JSON no es válido, el componente mostrará un mensaje de error.
Estilo y Diseño
- El componente utiliza Flex para un diseño responsivo.
- Las imágenes en los datos JSON se muestran automáticamente con la etiqueta
<img>
si se detectan URLs de imágenes.