Funciones de tablas

Curso Desarrollo Web para Diseñadores

Introducción

¿Qué vas a aprender?

Conceptos Generales

Introducción al desarrollo de software

Servidor y cliente

Front-End y Back-End: definición y características

¿Qué es una API?

¿Qué es Git?

Aproximación a los lenguajes de la web

Aproximación a HTML desde el diseño

Aproximación a CSS desde el diseño

Aproximación a JavaScript desde el diseño Parte I

Aproximación a JavaScript desde el diseño Parte II

Aproximación a las herramientas de desarrollo

Bases del diseño en el desarrollo

Características de las imágenes en el contexto de desarrollo web

Implementación de las imágenes en el contexto de desarrollo web

Características e Implementación de textos

Características e implementación de colores

El diseño desde una mirada de desarrollo

Diseño de botones

Implementación de botones

Diseño e implementación de inputs

Diseño de tablas

Funciones de tablas

Diseño e implementación de checkbox

Despedida

Live Class

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

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 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan David Verano Valencia

hace 2 años

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 😉.

Pedro Isaac Aguilar

hace 2 años

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.