Filtros y Ordenamiento en Tablas de Datos con JavaScript

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:25

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Curso Básico de Vue.js 2

Clase 36 de 38

Clase 36 / 38

Recursos

¿Cómo optimizar el filtro de criptomonedas y agregar funcionalidades?

Las aplicaciones web modernas requieren una experiencia de usuario fluida y eficiente. Parte de esto incluye ofrecer filtros en tiempo real y capacidades de ordenación que mejoren la interacción del usuario con los datos. En esta guía, te mostraremos cómo implementar un filtro de búsqueda y ordenar una lista de criptomonedas usando Vue.js. Vamos a explorar primero cómo construir estas funcionalidades y luego cómo integrarlas en nuestra plataforma.

¿Cómo implementar un filtro de búsqueda en tiempo real?

Para proporcionar una experiencia de filtrado en tiempo real, usaremos un input de HTML que se vincula dinámicamente a nuestra lista de criptomonedas. Este input permitirá a los usuarios escribir cualquier texto y filtrar la lista de acuerdo con el símbolo o nombre de la criptomoneda.

Creación de un input para filtrar:
- Añadir un elemento input en el header de la tabla en tu componente Vue.
- Utilizar v-model para vincular el valor del input a una propiedad llamada filter.
```
<template>
  <input v-model="filter" placeholder="Filtrar..." />
</template>
```

Definición de la función de filtrado:

En el objeto data del componente, inicializa la propiedad filter vacía.
Crea una propiedad computada (computed property) que use la función filter() de JavaScript para filtrar la lista de criptomonedas basada en el valor del input.

data() {
  return {
    filter: ''
  };
},
computed: {
  filteredCryptos() {
    if (!this.filter) return this.coins;
    return this.coins.filter(coin => {
      return coin.symbol.toLowerCase().includes(this.filter.toLowerCase()) ||
             coin.name.toLowerCase().includes(this.filter.toLowerCase());
    });
  }
}

¿Cómo ordenar la lista de criptomonedas por ranking?

Una habilidad esencial para mejorar la UX es permitir que los usuarios ordenen la lista de criptomonedas por varios criterios, como el ranking ascendente o descendente. Implementaremos esto utilizando la función sort() de JavaScript.

Agregar soporte para ordenamiento:
- Introducir una nueva propiedad sortOrder en el objeto data para definir el orden actual (ascendente o descendente).
```
data() {
  return {
    sortOrder: 1 // 1 para ascendente, -1 para descendente
  };
}
```

Modificación de la propiedad computada:

Ampliar la propiedad computada para ordenar la lista de criptomonedas después de aplicar el filtro.

computed: {
  sortedAndFilteredCryptos() {
    let filtered = this.filteredCryptos;
    return filtered.sort((a, b) => (a.rank - b.rank) * this.sortOrder);
  }
}

Configuración visual y funcional del cambio de orden:

Asegurarse de proporcionar una interfaz de usuario para cambiar el orden haciendo clic en el encabezado de columna.

<th @click="toggleSortOrder" class="sortable">
  Ranking
</th>

methods: {
  toggleSortOrder() {
    this.sortOrder = this.sortOrder === 1 ? -1 : 1;
  }
}

¿Cómo asegurar que la funcionalidad sea intuitiva y agradable?

Indicaciones visuales: Usa clases CSS para subrayar o cambiar el cursor al pasar sobre los encabezados clicables.
Clasificación en ambas condiciones: Asegúrate de que la lista pueda ordenarse independientemente de si hay un filtro aplicado o no. Elimina condiciones innecesarias que impidan el ordenamiento sin un filtro.
Testing en diferentes casos: Probar la funcionalidad con varias entradas y asegurarse de que se manejen correctamente todos los escenarios posibles.

Con estas sencillas pero efectivas adiciones, tu aplicación no solo se verá más profesional sino que también proporcionará una experiencia más intuitiva y eficiente para los usuarios. ¡Continúa perfeccionando tus habilidades y disfruta creando experiencias enriquecedoras!

Luis Alejandro Vera Hernandez

Hace 5 años

<template>
  <table>
    <thead>
      <tr class="bg-gray-100 border-b-2 border-gray-400">
        <th></th>
        <th :class="{up: this.sortOrder === 1, down: this.sortOrder === -1}">
          <span 
          class="underline cursor-pointer"
          @click="changeSortOrder">Ranking</span>
        </th>
        <th>Nombre</th>
        <th>Precio</th>
        <th>Cap. de Mercado</th>
        <th>Variación 24hs</th>
        <td class="hidden sm:block">
          <input
            class="bg-gray-100 focus:outline-none border-b border-gray-400 py-2 px-4 block w-full appearance-none leading-normal"
            id="filter"
            placeholder="Buscar..."
            type="text"
            v-model="filter"
          />
        </td>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="a in filteredAssets"
        :key="a.id"
        class="border-b border-gray-200 hover:bg-gray-100 hover:bg-orange-100"
      >
        <td>
          <img
            class="w-6 h-6"
            :src="`https://static.coincap.io/assets/icons/${a.symbol.toLowerCase()}@2x.png`"
            :alt="a.name"
          />
        </td>
        <td>
          <b># {{ a.rank }}</b>
        </td>
        <td>
          <router-link 
          class="hover:underline text-green-600"
          :to="{name: 'coin-detail', params: { id: a.id }}">
            {{ a.name }}
          </router-link>
          <small class="ml-1 text-gray-600">{{a.symbol}}</small>
        </td>
        <td>{{ dollarFilter(a.priceUsd) }}</td>
        <td>{{ dollarFilter(a.marketCapUsd) }}</td>
        <td
          :class="
            a.changePercent24Hr.includes('-')
              ? 'text-red-600'
              : 'text-green-600'
          "
        >
          {{ percentFilter(a.changePercent24Hr) }}
        </td>
        <td class="hidden sm:block">
          <px-button @click="goToCoin(a.id)"><span>Detalle</span></px-button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { dollarFilter, percentFilter } from '../filter'
import PxButton from './PxButton.vue';

export default {
  name: 'PxAssetsTable',
  components: { PxButton },

  data(){
    return {
      filter: '',
      sortOrder: 1
    }
  },

  props: {
    assets: {
      type: Array,
      default: () => [],
    },
  },

  computed: {
    filteredAssets(){
      return this.assets.filter(
        a => 
        a.symbol.toLowerCase().includes(this.filter.toLowerCase()) || 
        a.name.toLowerCase().includes(this.filter.toLowerCase())
      )
      .sort((a,b)=>{
        if(parseInt(a.rank) > parseInt(b.rank)){
          return this.sortOrder
        }
        return this.sortOrder * -1;
      })
    }
  },

  methods: {
    goToCoin(id){
      this.$router.push({name: 'coin-detail', params:{id}})
    },

    changeSortOrder(){
      this.sortOrder = this.sortOrder === 1 ? -1 : 1
    }
  },

  setup() {
    return {
      dollarFilter,
      percentFilter,
    }
  },
}
</script>

<style scoped>
.up::before {
  content: '👆';
}

.down::before {
  content: '👇';
}

td {
  padding: 20px 0px;
  font-size: 0.6rem;
  text-align: center;
}

th {
  padding: 5px;
  font-size: 0.6rem;
}

@media (min-width: 640px) {
  td,
  th {
    padding: 20px;
    font-size: 1rem;
  }

  th {
    padding: 12px;
  }
}
</style>

Comentarios (27)27 comentarios

Erick Daniel Pérez Mata

Hace 7 años

Daniel Isidro Duran

Hace 6 años

Franz Pool Nuñez Villazana

Matias Niz

Nacho Anaya

Profesor

David Campos

Carlos Eduardo Gomez García

Sebastian Heredia

Ramírez Fuentes Luis David

Oney Ortiz Roman

Omar Karim Mejenes Chacón

Joel Andres Bonilla Tellez

Leniel Luzardo

Manuel Ojeda

jonathan sanchez

Martin Campos

Alexis Saúl González Jimaréz

Carlos Ivan Rivera Parra

Nicolas Villabona

Ameth Ordoñez Erazo

Hace 4 años

Cristian David Sierra Barrera

Mateo Flores

César Ernesto Rivas Martínez

Yolfry Bautista Reynoso

Jose Noriega

Angel Archbold

mgl Brv

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Filtros y Ordenamiento en Tablas de Datos con JavaScript