CursosEmpresasBlogLiveConfEventosPrecios

0:006:24

Recursos

Resumen

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.

Funcionalidades Comunes en el Diseño de Tablas Interactivas

Curso Desarrollo Web para Diseñadores

Clase 20 / 23

Ver clases