Implementierung einer Statusspalte in React
Um eine Statusspalte in einem React-Komponenten-Layout zu implementieren, definiert man in der Regel eine Tabelle oder eine Liste, die Datenzeilen enthält, bei denen eine Spalte den Status eines jeweiligen Elements visualisiert. Dabei können unterschiedliche Status-Werte beispielsweise durch farbige Labels oder Badges dargestellt werden, um schnell und übersichtlich den Zustand des jeweiligen Eintrags zu erkennen.
Struktur der Komponente
Eine typische Herangehensweise ist, zunächst die Daten als ein Array von Objekten anzulegen, welche unter anderem eine Eigenschaft für den Status enthalten. Anschließend rendert man diese Daten dynamisch, indem man für jede Zeile eine Komponente oder ein JSX-Element erzeugt. Die Statusspalte erhält eine spezielle Darstellung, die abhängig vom Statuswert angepasst wird – etwa durch unterschiedliche Farben oder Icons.
Beispielimplementierung
Unten sehen Sie eine einfache React-Komponente, die eine Tabelle mit mehreren Einträgen anzeigt. Die Statusspalte zeigt farbliche Labels entsprechend dem jeweiligen Status an.
import React from react;const data = ;const StatusBadge = ({ status }) => { let className = status ; switch(status) { case active: className += active; break; case inactive: className += inactive; break; case pending: className += pending; break; case error: className += error; break; default: className += ; } return {status.charAt(0).toUpperCase() + status.slice(1)} ;};const StatusTable = () => { return ( <div className="table"> <div className="table-row table-header"> <div className="table-cell">Name</div> <div className="table-cell">Status</div> </div> {data.map(item => ( <div key={item.id} className="table-row"> <div className="table-cell">{item.name}</div> <div className="table-cell"><StatusBadge status={item.status} /></div> </div> ))} </div> );};export default StatusTable;Erklärung der Implementierung
In diesem Beispiel speichert das Array data verschiedene Benutzer mit einem jeweiligen Status. Die Komponente StatusBadge übernimmt die Aufgabe, einen Status-Wert aufzunehmen und ihn mit verschiedenen CSS-Klassen zu versehen. Diese definieren die jeweilige Farbgebung und Gestaltung des Labels. Im Hauptkomponenten-Layout StatusTable werden die Daten als Tabellenzeilen ausgegeben und in der Statusspalte jeweils das farbige Label eingefügt.
Durch diese klare Trennung und Modularisierung kann die Statusanzeige später einfach erweitert werden, zum Beispiel um neue Statuswerte oder weitere Stile. Außerdem ist die Bedienbarkeit mit React’s JSX und State-Handling sehr elegant und performant gehalten.
Styling
Das CSS definiert ein tabellenähnliches Layout ohne ein echtes HTML-Table-Element, was bei responsiven Designs manchmal Vorteile bringt. Die Status-Badges werden mit Farbklassen versehen, die leicht über CSS angepasst werden können. Die Farbwahl orientiert sich an gängigen Farben für Zustände: Grün für aktiv, Grau für inaktiv, Gelb für ausstehend und Rot für Fehler.
Fazit
Eine Statusspalte in einem React-Komponenten-Layout lässt sich effektiv durch eine Kombination aus datengetriebenem Mapping, bedingter CSS-Klassenvergabe und modularen Teilkomponenten realisieren. So entsteht eine übersichtliche, erweiterbare und optisch ansprechende Darstellung, die den Nutzer schnell über den Zustand einzelner Elemente informiert.