Erstellen Sie eine sortierbare Tabelle in React

Das Erstellen einer Tabelle ist eine der besten Möglichkeiten, um große Mengen an Informationen auf Ihrer Website anzuzeigen. Moderne Webanwendungen speichern in der Regel viele Daten, die auf dem Bildschirm angezeigt werden müssen.

Benutzer erwarten eine Möglichkeit, die Tabelle zu sortieren oder zu filtern, um zu finden, wonach sie suchen. Sie zu zwingen, Tausende von Zeilen zu durchsuchen, ist eine schlechte UX-Praxis.

Die einfachste Lösung besteht darin, eine Tabelle zu erstellen, in der die Spalten alphabetisch sortiert werden können, damit die Benutzer die benötigten Informationen finden können.

In diesem Artikel erfahren Sie, wie Sie eine sortierbare Tabelle in React erstellen.

Erstellen Sie eine sortierbare Tabelle in React

Zuerst besprechen wir, wie man eine Tabelle in einer Webanwendung erstellt, und zeigen dann, wie man sie sortierbar macht.

Glücklicherweise hat HTML eingebaute Elemente zum Erstellen einer sehr einfachen Tabelle. Diese Elemente sind: <table>, <thead>, <tr>, <th>, <tbody> und so weiter. Weitere Informationen zum Erstellen von Tabellen in HTML finden Sie in diesem Handbuch.

In diesem Fall haben wir bereits eine einfache Tabelle gebaut. Schauen wir uns den folgenden Code an:

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

Der Einfachheit halber wird unsere Komponente (und Webanwendung) diese eine Tabelle sein.

Wie Sie sehen können, haben wir zwei <th>-Elemente, die für Tabellenüberschriften stehen. Mit anderen Worten, unsere Tabelle hat zwei Spaltenbeschriftungen: Die erste ist der Vorname und die andere das Gehalt.

Jedes dieser Elemente hat einen onClick-Handler, der den onSort()-Event-Handler mit zwei Argumenten aufruft – einem event-Objekt und dem Eigenschaftsnamen, der den Werten aus jeder Spalte zugeordnet ist.

Das ist alles für unser <thead>-Element.

Beim Tabellenkörper haben wir die Methode map() verwendet, um jeden Datensatz im Array data zu durchlaufen und Tabellenzeilenelemente (<tr>) mit Tabellendatenelementen (<td>) zu erstellen. Wir setzen das Attribut key auf index, eine Standardmethode zur Vermeidung von Fehlern in React.

Die Methode map() nimmt jedes Element im Array, liest seine Eigenschaften firstName und lastName und füllt die Tabellenzeilen mit diesen Informationen. Beachten Sie, dass diese Eigenschaftsnamen auch an die Methode onSort() übergeben werden, wenn Sie auf die Kopfzeilen klicken.

Tabellenzeilen in React sortieren

Schauen wir uns nun die Geschäftslogik der Komponente an, die es ermöglicht, Datensätze der Tabelle zu sortieren. Die Funktion onSort() übernimmt das Sortieren von Werten in der Tabelle.

Schauen wir uns die Funktion und die Beispieldaten an, die in der Zustandsvariable data gespeichert sind.

  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])));
  };

Unsere verfügbaren Daten sind relativ Standard. Wir haben eine Reihe von Objekten, die eine Person beschreiben.

Die Funktion onSort() nimmt zwei Argumente entgegen. Dies sind die synthetischen Ereignis-Objekte und der Schlüssel zum Sortieren dieser Werte.

Mit anderen Worten, die Eigenschaft des Objekts, in der bestimmte Werte gespeichert werden. Für Vornamenswerte in der Tabelle ist der Schlüssel firstName, da dies die Objekteigenschaft ist, die die Vornamen enthält, und für Nachnamen lastName.

In React sollen Zustandsdaten nicht direkt mutiert werden, also kopieren wir die Items in das data-Array und speichern sie in der tempData-Variablen.

Als nächstes verwenden wir die Funktion sort(), die ein Callback-Funktionsargument akzeptiert, das beschreibt, wie Werte in den Daten verglichen werden. In diesem Fall verwenden wir das Schlüsselargument (mit anderen Worten den Namen der Eigenschaft), um auf die Werte firstName oder lastName jedes Objekts zuzugreifen.

Dann bestimmen wir mit der Methode localeCompare(), welcher Wert zuerst kommen soll. Dann ordnen wir die Daten entsprechend.

Sie können sich die sortierbare Tabelle in React on CodeSandbox ansehen. Versuchen Sie, auf eine der Kopfzeilen (Spaltenbeschriftungen) zu klicken, und Sie werden sehen, dass die Daten alphabetisch sortiert werden.