Arbeiten mit Tabellen in Reaktion, Teil 1

Überblick

Eines der häufigsten Elemente der Benutzeroberfläche zur Darstellung Ihrer Daten ist eine Tabelle. Es stellt sich heraus, dass es viele Aspekte gibt, die bei der Arbeit mit Tabellen zu kontrollieren sind, wie zum Beispiel:

• Spalten und Kopfzeilen definieren
• verschiedene Zellenformate (Text, Zahlen, Kontrollkästchen)
• Größenänderung
• Filterung
• dynamisch wachsend
• Styling

In dieser zweiteiligen Serie erfahren Sie, wie Sie mit React Bootstrap Table mit Tabellendaten arbeiten können. Standardmäßig können Sie mit wenig Aufwand ausgefeilte und professionell aussehende Tabellen erstellen und dabei jeden gewünschten Teil anpassen.

Erstellen Sie eine Vanilla React App

Ich gehe davon aus, dass Sie mit React selbst vertraut sind und sich auf die Arbeit mit React Bootstrap Table konzentrieren. Envato Tuts + hat eine großartige Serie zu React, die Sie für Hintergrund lesen können.

Kurz gesagt, mit Reactor-Create-App habe ich eine Vanille-React-App erstellt und dann die Reakt-Bootstrap-Tabelle installiert: npm install reakt-bootstrap-table --save.

Es ist wichtig, das bootstrap-CSS der Datei public / index.html hinzuzufügen.

WebStorm

Wenn Sie den WebStorm von JetBrains verwenden und die Tests ausführen möchten, fügen Sie hinzu --env = jsdom in deinem lauf config.

Grundtabelle

Wir beginnen mit einer Basistabelle. Hier ist eine grundlegende Tabellenkomponente. Es importiert die BoostrapTable- und TableHeaderColumn-Datei aus der reaktions-Bootstrap-Tabelle und auch das CSS aus dem Verzeichnis dist. 

Das machen() Die Methode stellt eine Tabelle mit drei Spalten dar: "ID", "Name" und "Value". Die tatsächlichen Daten in der Tabelle stammen von der Eigenschaft "data" (this.props.data). Die Daten enthalten die Namen einiger Charaktere aus der lustigen Show Arrested Development.

importieren Sie React, Component aus 'reagieren'; import BootstrapTable, TableHeaderColumn aus 'reag-bootstrap-table'; import '… /css/Table.css'; import '… /… / node_modules / react-bootstrap-table / css / react-bootstrap-table.css' Klasse Table1 erweitert die Komponente render () return ( 
   ICH WÜRDE   Name   Wert   
 );  export standard tabelle1; 

Ich habe die BasicTable in der render () - Methode der Standard-App.js instanziiert und einige hartcodierte Daten übergeben:

 importieren Sie React, Component aus 'reagieren'; import './App.css'; importiere Table1 aus './components/Table1' var data = [id: 1, name: 'Gob', Wert: '2', id: 2, name: 'Buster', Wert: '5', id: 3, name: 'George Michael', wert: '4']; Die Klasse App erweitert die Komponente render () return ( 
 
Grundtabelle
  
 );  Standard-App exportieren; 

Um die Tabelle anzuzeigen, geben Sie Folgendes ein: npm starten. Die Konfiguration wurde von erstellt Create-React-App Überwacht den Code und wird bei jeder Änderung neu kompiliert. Sie müssen also nur einmal ausgeführt werden, und jede Änderung wird automatisch übernommen.

Erfolgreich zusammengestellt Sie können jetzt die Reaktionstabelle im Browser anzeigen. Local: http: // localhost: 3000 / In Ihrem Netzwerk: http://192.168.1.136:3000/ Beachten Sie, dass der Entwicklungs-Build nicht optimiert ist. Um einen Produktionsaufbau zu erstellen, verwenden Sie den Garnaufbau. 

Hier ist das Ergebnis:

Beachten Sie, dass jede Spalte genau die gleiche Breite hat.

Mit Spalten arbeiten

Sie können viele Aspekte der Spalten steuern. Insbesondere können die Spaltenbreiten in absoluten Einheiten als Prozentwerte angegeben oder nicht angegeben werden. Die Spaltenbreite von nicht spezifizierten Spalten ist der Rest, der gleichmäßig aufgeteilt wird. Für eine Tabellenbreite von 100 px wurden beispielsweise eine Spalte mit 15 px, eine zweite um 25% (25 px) und eine dritte um 30% (15 px) angegeben.. 

Zwei andere Spalten haben keine Breite angegeben. In den Spalten 1, 2 und 3 wurden 70 Pixel verwendet, so dass 30 Pixel für die Spalten 4 und 5 übrig bleiben, wodurch die Aufteilung gleich ist. Die Spalten 4 und 5 haben jeweils eine Breite von 15 px. Beachten Sie, dass sich die Zahlen ändern, wenn die Größe der Tabelle geändert wird. Nur Spalte 1 ist immer 15 px breit. 

Die anderen Spalten werden basierend auf der Tabellenbreite berechnet. Sie können auch die Ausrichtung von Text und Spalten sowie den Stil von Kopfzeilen und Spalten verwalten. Hier ein Beispiel, wie Sie unterschiedliche Spaltenbreiten, Textausrichtungen und benutzerdefinierte Stile festlegen:

import React, Component aus 'reagieren' Import BootstrapTable, TableHeaderColumn aus 'Reakt-Bootstrap-Tabelle' import '… /css/Table.css' import '… /dist/react-bootstrap-table-all.min. css 'Klasse Table2 erweitert Component render () return ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren2

Gestalten Sie Ihren Tisch

Sie haben gesehen, wie Sie einzelne Spalten und Überschriften formatieren, das Styling kann jedoch noch viel weiter gehen. Die React-Bootstrap-Tabelle bietet viele Anpassungsmöglichkeiten. Zunächst können Sie der BootstrapTable-Komponente einfach die Attribute striped und hover hinzufügen, um für jede Zeile alternative Hintergrundfarben zu erhalten: 

Um alle Zeilen zu formatieren, verwenden Sie trClassName:  

Wenn Sie wirklich ausgefallen sein wollen, kann der trStyle eine Funktion haben. Schauen Sie sich die folgende Tabellenkomponente an, die Zeilen mit dem Namen "George Michael" unterschiedlich formatiert:

import React, Component aus 'reagieren' Import BootstrapTable, TableHeaderColumn aus 'Reakt-Bootstrap-Tabelle' import '… /css/Table.css' import '… /dist/react-bootstrap-table-all.min. css 'function rowClassNameFormat (row, rowIdx) // row ist ein ganzes Zeilenobjekt // // rowIdx ist der Index der Zeile console.log (row) gibt die Zeile [' name '] ===' George Michael 'zurück? 'GeorgeMichael-Row': 'Other-Row';  Die Klasse Table3 erweitert die Komponente render () return ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren3 

Das GeorgeMichael-Row und Other-Row CSS-Klassen sind in Table.css definiert:

.Tabellenkopfzeile Hintergrundfarbe: #ccc; Farbe blau; Polsterung: 10px; Text ausrichten: links;  .GeorgeMichael-Row Hintergrundfarbe: Pflaume;  .Other-Row Hintergrundfarbe: Grüngelb; 

Zeilen auswählen

Nachdem Sie Ihre Daten in einer Tabelle gespeichert haben, möchten Sie möglicherweise einige Zeilen auswählen, um einige Operationen an ihnen durchzuführen. Die React-Bootstrap-Tabelle bietet eine Vielzahl von Auswahlmöglichkeiten. Alle Optionen sind in einem einzigen Objekt organisiert, das Sie als Komponente an die Komponente übergeben selectRow Attribut. Hier einige Auswahlmöglichkeiten:

• Einzelauswahlmodus (Optionsfeld)
• Mehrfachauswahlmodus (Kontrollkästchen)
• konfigurierbare Spaltenauswahlbreite
• Wählen Sie in der Zeile klicken: Standardmäßig müssen Sie die Auswahl (Optionsfeld oder Kontrollkästchen) anklicken.
• Auswahlspalte ausblenden (nützlich, wenn "Auswählen in Zeile klicken" auf "Wahr" gesetzt ist)
• Hintergrundfarbe bei Auswahl ändern
• anfänglich ausgewählte Zeilen
• Auswahlhaken (in einer Zeile oder wenn alle Zeilen ausgewählt sind).

Die folgenden Komponenten zeigen viele dieser Optionen:

import React, Component aus 'reagieren' Import BootstrapTable, TableHeaderColumn aus 'Reakt-Bootstrap-Tabelle' import '… /css/Table.css' import '… /dist/react-bootstrap-table-all.min. css-Funktion onSelectRow (row, isSelected, e) if (isSelected) alert ('Sie haben' $ row ['name'] "ausgewählt) const selectRowProp = mode: 'checkbox', clickToSelect: true , nicht auswählbar: [2], ausgewählt: [1], onSelect: onSelectRow, bgColor: 'gold'; Klasse Table4 erweitert Component render () return ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren4

Fazit

In diesem Teil haben wir eine einfache React-Anwendung erstellt, die die React-Create-App verwendet, React-Bootstrap-Table hinzugefügt, eine Tabelle mit Daten gefüllt, mit Spalten gearbeitet, die Tabelle mit Stilen versehen und ausgewählte Zeilen ausgewählt. 

Im nächsten Teil werden wir die Reise fortsetzen, indem wir Zeilen erweitern, Zeilen hinzufügen, Zeilen löschen und Seitenumbruch, Zellbearbeitung und erweiterte Anpassungen abdecken. Bleib dran.