React Table #2: Het sorteren van een data tabel in React

In deze serie posts vertellen we u meer over het gebruik van React Table. Deze bibliotheek stelt ons in staat om krachtige data tabellen te maken binnen React JS. We laten u zien hoe u een simpele tabel kan maken, hoe u vervolgens filters, sorteeropties, en pagination kan toevoegen, en hoe u de tabel kan stylen zodat het aantrekkelijk is voor gebruikers in uw applicatie. In de voorgaande post hebben we met behulp van React Table een simpele data tabel gemaakt. In deze post laten we zien hoe er voor kan zorgen dat u de tabel kan sorteren. Aan het einde van deze post vindt u een Sandbox met het eindresultaat.

Sorteren binnen React Table

Om ervoor te zorgen dat het sorteren mogelijk is gebruiken we de hook useSortBy. Het is erg makkelijk om deze hook in te passen in ons voorbeeld uit de voorgaande blogpost. We hoeven maar twee aanpassingen te maken. We dienen onze constante useSortBy toe te voegen, vervolgens dienen we onze table header in onze tabel aan te passen zodat de veranderingen in sorteren zichtbaar worden. Onderstaand de volledige code van de tabel, de nieuw toegevoegde code is in het rood aangeduid. De uitleg volgt later in deze post.

Tabel.js

import React, { useMemo } from "react";
import "../styles.css";
import { clubData } from "../Data";
import { useTable, useSortBy } from "react-table";

function Tabel() {
  const data = clubData;
  const columns = useMemo(
    () => [
      {
        Header: "Clubnaam",
        accessor: "naam"
      },
      {
        Header: "Divisie",
        accessor: "divisie"
      },
      {
        Header: "Land",
        accessor: "land"
      },
      {
        Header: "Stadion",
        accessor: "stadion"
      }
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data }, useSortBy);

  return (
    <table {...getTableProps()} className="tabel">
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                {column.render("Header")}
                <span>
                  {column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼") : ""}
                </span>
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default Tabel;

Uitleg veranderingen

• Bovenin importeren we useSortBy zodat we deze hook kunnen gebruiken
• Vervolgens passen we onze constante genaamd useTable aan. Hier voegen we de useSortBy aan toe, zodat deze gebruikt kan worden in onze tabel.
• Daarna hebben we een aanpassing gemaakt aan onze Table Headers. In de table header worden alle properties geladen van de header, en ook de properties van de gesorteerde kolom. Vervolgens renderen we de naam van de kolom. In de span tag zorgen we ervoor dat er een icoon zichtbaar wordt naast de header wanneer er gesorteerd word. Alles wat we hier dus hebben gedaan is het toevoegen van de properties aan de table header, die ervoor gaan zorgen dat de tabel weet hoe er gefilterd moet gaan worden. Daarnaast voegen we een icoon toe zodat het voor de gebruiker duidelijk is wat er gebeurd.

Extra mogelijkheden

Er zijn nog twee mogelijkheden binnen sorteren die wellicht nuttig kunnen zijn voor gebruikers.

• Multisort: Het is mogelijk om meerdere kolommen tegelijk te sorteren. Deze instelling staat standaard aan binnen React Table. Als u shift ingedrukt houd bent u in staat om meerdere kolommen achter elkaar te sorteren.
• Sorteren bij enkele kolommen uitzetten: Het kan natuurlijk voorkomen dat u niet alle kolommen sorteerbaar wil maken. Ook dit kan u aangeven binnen uw code. Ga naar de constante columns, en zet onder de accessor een nieuwe eigenschap genaamd disableSortBy. De waarde van deze eigenschap moet op true staan. In het onderstaande voorbeeld ziet u de correcte weergave bij divisie. Deze kolom kan nu niet gesorteerd worden.

Tabel.js
const columns = useMemo(
    () => [
      {
        Header: "Clubnaam",
        accessor: "naam"
      },
      {
        Header: "Divisie",
        accessor: "divisie",
        disableSortBy: true
      },
      {
        Header: "Land",
        accessor: "land"
      },
      {
        Header: "Stadion",
        accessor: "stadion"
      }
    ],
    []
  );

Resultaat in Sandbox

In onze sandbox ziet u de tabel inclusief de sorteeropties. Net als in de voorgaande blogpost is de tabel nog erg lelijk. Dit gaan we later in deze serie nog oplossen. In de volgende blogposts over React Table gaan we aan de slag met het filteren, pagineren, en stylen van de tabel.