Crear una tabla ordenable en React

Crear una tabla es una de las mejores formas de mostrar grandes volúmenes de información en tu sitio web. Las aplicaciones web modernas suelen almacenar una gran cantidad de datos que deben mostrarse en la pantalla.

Los usuarios esperan alguna forma de ordenar o filtrar la tabla para encontrar lo que buscan. Obligarlos a mirar a través de miles de filas es una mala práctica de UX.

La solución más simple es crear una tabla donde las columnas se puedan ordenar alfabéticamente, para que los usuarios puedan encontrar la información que necesitan.

Este artículo explorará cómo crear una tabla ordenable en React.

Crear una tabla ordenable en React

Primero, discutiremos cómo crear una tabla en una aplicación web y luego mostraremos cómo hacer que se pueda ordenar.

Afortunadamente, HTML tiene elementos incorporados para crear una tabla muy básica. Estos elementos son: <table>, <thead>, <tr>, <th>, <tbody>, etc. Si desea obtener más información sobre la creación de tablas en HTML, consulte esta guía.

En este caso, ya construimos una tabla simple. Veamos el código a continuación:

<table className="m-table">
        <thead>
          <tr>
            <th onClick={(e) => onSort(e, "firstName")}>First Name</th>
            <th onClick={(e) => onSort(e, "lastName")}>Salary</th>
          </tr>
        </thead>
        <tbody>
          {data.map(function (person, index) {
            return (
              <tr key={index} data-item={person}>
                <td data-title="firstName">{person.firstName}</td>
                <td data-title="lastName">{person.lastName}</td>
              </tr>
            );
          })}
        </tbody>
  </table>

Para simplificar, nuestro componente (y aplicación web) será esta tabla.

Como puede ver, tenemos dos elementos <th>, que representan encabezados de tabla. En otras palabras, nuestra tabla tendrá dos etiquetas de columna: la primera será el Nombre, y la otra será el Salario.

Cada uno de estos elementos tiene un controlador onClick, que llama al controlador de eventos onSort() con dos argumentos: un objeto evento y el nombre de propiedad asociado con los valores de cada columna.

Eso es todo por nuestro elemento <thead>.

Pasando al cuerpo de la tabla, usamos el método map() para revisar cada registro en la matriz data para crear elementos de fila de tabla (<tr>) con elementos de datos de tabla (<td>). Establecemos su atributo clave en índice, una forma estándar de evitar errores en React.

El método map() toma cada elemento de la matriz, lee sus propiedades firstName y lastName, y llena las filas de la tabla con esta información. Tenga en cuenta que estos nombres de propiedad también se pasan al método onSort() cuando hace clic en los encabezados.

Ordenar filas de tablas en React

Ahora veamos la lógica de negocios del componente, que hace posible ordenar los registros de la tabla. La función onSort() maneja la clasificación de valores en la tabla.

Veamos la función y los datos de muestra almacenados en la variable de estado datos.

  const [data, updateData] = useState([
    { firstName: "Irakli", lastName: "Tcigladze" },
    { firstName: "George", lastName: "Smith" },
    { firstName: "Mark", lastName: "Wayans" },
    { firstName: "Michael", lastName: "Simmons" },
    { firstName: "Dirk", lastName: "Johnson" },
    { firstName: "Casey", lastName: "Dawson" }
  ]);
  const onSort = (event, sortKey) => {
    const tempData = [...data];
    updateData(tempData.sort((a, b) => a[sortKey].localeCompare(b[sortKey])));
  };

Nuestros datos disponibles son relativamente estándar. Tenemos una serie de objetos que describen a una persona.

La función onSort() toma dos argumentos. Estos son los objetos de evento sintéticos y la clave para ordenar estos valores.

En otras palabras, la propiedad del objeto donde se almacenan valores específicos. Para los valores de nombre en la tabla, la clave es firstName porque esa es la propiedad del objeto que contiene los nombres, y para los apellidos, es lastName.

En React, los datos de estado no deben mutarse directamente, por lo que copiamos los elementos en la matriz de datos y los almacenamos en la variable tempData.

A continuación, usamos la función sort(), que acepta un argumento de función de devolución de llamada que describe cómo comparar valores en los datos. En este caso, usamos el argumento clave (en otras palabras, el nombre de la propiedad) para acceder a los valores firstName o lastName de cada objeto.

Luego usamos el método localeCompare() para determinar qué valor debe aparecer primero. Luego, organizamos los datos en consecuencia.

Puede consultar la tabla ordenable en React en CodeSandbox. Intente hacer clic en uno de los encabezados (etiquetas de columna) y verá que ordena alfabéticamente los datos.