No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Funciones de tablas

20/23
Recursos

Reto Funciones de tablas

Crear un componente de tabla en Figma con 4 columnas, nombre, marca, disponibilidad, precio de cada producto.

[
	{
		"nombre": "Polera",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 110
	},
	{
		"nombre": "Vestido",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Parka",
		"marca": "Platzi",
		"disponibilidad": "No disponible",
		"precio": 70
	},
	{
		"nombre": "Jeans",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 60
	},
	{
		"nombre": "Polar",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 50
	},
	{
		"nombre": "Falda",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Chaqueta",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 110
	},
	{
		"nombre": "Buzo",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Blazer",
		"marca": "Platzi",
		"disponibilidad": "No disponible",
		"precio": 70
	},
	{
		"nombre": "Enterito",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 60
	},
	{
		"nombre": "Jardinera",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 50
	},
	{
		"nombre": "Peto",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Poleron",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 110
	},
	{
		"nombre": "Camisa",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Parka",
		"marca": "Platzi",
		"disponibilidad": "No disponible",
		"precio": 70
	},
	{
		"nombre": "Pulsera",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 60
	},
	{
		"nombre": "Collar",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 50
	},
	{
		"nombre": "Pantufla",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Lentes de sol",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 110
	},
	{
		"nombre": "Gorro",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Blusa",
		"marca": "Platzi",
		"disponibilidad": "No disponible",
		"precio": 70
	},
	{
		"nombre": "Calzas",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 60
	},
	{
		"nombre": "Short",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 50
	},
	{
		"nombre": "Aros",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Zapatillas",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 110
	},
	{
		"nombre": "Zapatos",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	},
	{
		"nombre": "Corbata",
		"marca": "Platzi",
		"disponibilidad": "No disponible",
		"precio": 70
	},
	{
		"nombre": "Sweater",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 60
	},
	{
		"nombre": "Abrigo",
		"marca": "Platzi",
		"disponibilidad": "Fuera de stock",
		"precio": 50
	},
	{
		"nombre": "Trabje de ba√Īo",
		"marca": "Platzi",
		"disponibilidad": "Disponible",
		"precio": 80
	}
]

Utilizando la data entregada, utiliza la paginación necesaria para mostrar 25 registros por página.

Para poder visualizar esta información de mejor manera puedes visitar JSON Formatter & Validator pegar este código y será más fácil poder visualizarlo.

Aportes 6

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

A continuaci√≥n comparto con ustedes el proyecto en Figma para que puedan reutilizar los elementos (por ejemplo, todos los datos de la tabla) y puedan aplicar sus dise√Īos para el reto ūüöÄ:

https://www.figma.com/file/I7QdWdWUWhieFkO0G0DBh4/Retos-curso-Platzi?node-id=11%3A245&t=QR8ZkxLPjDZ5YhHg-1

ūüí° Recuerden hacer una copia del elemento y usarlo en un nuevo archivo para poder modificarlo.
ūüí° Pueden navegar entre las p√°ginas del proyecto para ver cada uno de los retos.

Espero que sea de gran utilidad para todos ūüėČ.

Debemos contemplar c√≥mo mostraremos al usuario la informaci√≥n que tenemos en nuestro site por medio de una tabla de registros (art√≠culos, horarios, destinos, precios, paquetes, nombres, etc.), adem√°s de la manera en como se seleccionaran los elementos deseados, si por ejemplo habr√° un bot√≥n para seleccionar toda la tabla de items √ļnicamente de la p√°gina activa o de todo el universo de productos / items que a√ļn ni siquiera se muestran en pantalla. Todo esto es importante planearlo desde la fase de dise√Īo de interfaz y comunicarlo bien al equipo de desarrollo, con tal de que la UI est√© en armon√≠a con el Frontend y la experiencia del usuario sea grata, sencilla y accesible.

Hola! Comparto mi ejercicio de tabla. Procur√© usar todos los conceptos vistos durante el curso. Agradezco su feedback ūüę°:

https://www.figma.com/proto/I7QdWdWUWhieFkO0G0DBh4/Retos-curso-Platzi?page-id=11%3A245&node-id=11%3A246&viewport=882%2C478%2C0.58&scaling=scale-down-width&starting-point-node-id=11%3A246