Arbeiten mit Tabellen in Reaktion, Teil 2

Überblick

Dies ist Teil zwei einer zweiteiligen Serie über React-Bootstrap-Table. Im ersten Teil erstellten wir eine einfache React-Anwendung mit React-Create-App, fügten React-Bootstrap-Table hinzu, füllten eine Tabelle mit Daten, arbeiteten mit Spalten, formatierten die Tabelle und ausgewählte Zeilen. 

In diesem Teil werden wir die Reise fortsetzen, indem wir die Zeilen erweitern, Zeilen hinzufügen, Zeilen löschen und Seitenumbruch, Zellbearbeitung und erweiterte Anpassung abdecken.

Zeilen erweitern

Dies ist eine der coolsten Funktionen der React-Bootstrap-Tabelle. Bei der Anzeige tabellarischer Daten werden häufig zusätzliche Daten in einer oder zwei Zeilen angezeigt. Sie können jedoch nicht alle Daten für alle Zeilen anzeigen. 

Eine Option, die zur Adressierung dient, ist die Anzeige von QuickInfos. Bei QuickInfos müssen Sie jedoch mit der Maus über den Zielbereich fahren. Es kann jeweils nur ein QuickInfo angezeigt werden. Durch das Erweitern von Zeilen können Sie zusätzliche Daten für jede Zeile in einer Art Schublade anzeigen, die so lange geöffnet bleibt, wie Sie möchten. Wenn Sie fertig sind, können Sie sie wieder zusammenfalten. Sie können beliebig viele Zeilen gleichzeitig erweitern. So geht's mit der React-Bootstrap-Tabelle. 

Die Liebeskarte enthält Beziehungen zwischen einigen Figuren der Arrested Development: Gob liebt Marta und Buster liebt Lucile 2. The isExpandable () Funktion steuert, welche Zeilen erweiterbar sind. In diesem Fall wird true für Zeilen zurückgegeben, deren Charaktername in der Liebeskarte enthalten ist. Das expandRow () Funktion gibt eine Komponente zurück, wenn eine Zeile erweitert wird. 

Die zurückgegebene Komponente wird unter der Zeile angezeigt, bis die Zeile reduziert ist. Das Konfigurieren der Zeilenerweiterung ist etwas schwierig. Einige Optionen sind nur Requisiten für die BootstrapTable-Komponente. 

Die Erweiterungsspaltenoptionen sind eine Objektstütze, und dann gibt es eine Stütze namens Optionen, die zusätzliche Zeilenerweiterungsoptionen enthält, wie z expandRowBgColor und erweitern. Es wäre viel einfacher, wenn nur eine Requisite genannt würde expandRowProp das enthielt alle Optionen (wie die selectRowProp).

import React, Component aus 'reagieren' Import BootstrapTable, TableHeaderColumn aus 'Reakt-Bootstrap-Tabelle' import '… /css/Table.css' import '… /dist/react-bootstrap-table-all.min. css 'const loveMap = Gob:' Martha ', Buster:' Lucile 2 ', Funktion isExpandableRow (Zeile) Rückgabezeile [' Name '] in LoveMap;  function expandRow (Zeile) Rückkehr ( 
row ['name'] liebt loveMap [row ['name']].
 );  class Table5 erweitert Component render () const options = expandRowBgColor: 'pink', expandierend: [1] // anfänglich erweitert return ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren5

Seitennummerierung

Bisher haben wir nur drei Datenzeilen angezeigt. In Tabellen werden viele Daten angezeigt, die nicht unbedingt gleichzeitig auf dem Bildschirm angezeigt werden müssen. Hier kommt die Paginierung ins Spiel. Die React-Bootstrap-Tabelle unterstützt viele Paginierungsoptionen. 

Füllen wir unsere Tabelle mit 100 Elementen, die zehn Seiten mit jeweils zehn Elementen sind. Wir verwenden eine getData () - Funktion, die ein Array von 100 Objekten mit IDs, Namen und Werten basierend auf ihrem Index zurückgibt. 

Lassen Sie uns auch angeben, welche Seite anfänglich angezeigt werden soll (4), passen Sie den Text für die vorherige, nächste, erste und letzte Seite an (mithilfe von Unicode-Pfeilen für mehr Coolness) und stellen Sie schließlich eine benutzerdefinierte Funktion namens showTotal () bereit, um die Gesamtzahl der Elemente anzuzeigen. Beachten Sie, dass das Attribut zum Steuern der Schaltfläche "vorherige Seite" "prePage" und nicht "prevPage" heißt (es hat mich erhalten). Alle Paginierungsoptionen gehen in das allgemeine "options" -Attribut der Tabelle ein. 

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 getData () var data = [] für (var i = 0; i < 100; ++i)  data[i] = id: i, name: 'item_' + i, value: i  return data  function showTotal()  return 
Es gibt insgesamt 100 Artikel
  Die Klasse Table6 erweitert die Komponente render () const options = page: 4, prePage: '⟵', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: showTotal return ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren6

Zeilen hinzufügen und löschen

Bisher haben wir die Tabelle verwendet, um Informationen auf verschiedene Weise anzuzeigen. Tabellen können jedoch als Benutzeroberfläche zum Bearbeiten von Daten verwendet werden. Sehen wir uns an, wie Sie Zeilen aus einer Tabelle hinzufügen und entfernen. 

Die Schlüsselmerkmale sind insertRow und Zeile löschen. Wenn Sie sie angeben, werden die Schaltflächen "Neu" und "Löschen" hinzugefügt. Wenn Sie auf die Schaltfläche "Neu" klicken, wird ein modales Dialogfeld geöffnet, in dem Sie neue Zeilen hinzufügen können. Wenn Sie auf die Schaltfläche "Löschen" klicken, werden alle ausgewählten Zeilen gelöscht. Um Zeilen zu löschen, müssen Sie natürlich die Zeilenauswahl aktivieren. Sie können auch Hook-Funktionen hinzufügen, die nach dem Hinzufügen oder Löschen von Zeilen aufgerufen werden.

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 onInsertRow (Zeile) let newRowStr = "for (const prop in Zeile) newRowStr + = prop + ':' + row [prop] + '\ n' alert ('Sie haben eingefügt: \ n' + newRowStr ) Funktion onDeleteRow (rowKeys) alert ('Sie haben gelöscht:' + rowKeys) Klasse Table7 erweitert Component render () const options = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow // Zum Löschen von Zeilen, die Sie auswählen können Zeilen const selectRowProp = mode: 'checkbox' return ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren7

Zellbearbeitung

Eine weitere Form der Datenmanipulation ist die direkte Bearbeitung (z. B. Zellenbearbeitung). Die Bearbeitung von Zellen kann durch Klicken oder Doppelklicken ausgelöst werden. Die Bearbeitung von Zellen wird durch das Attribut "cellEdit" gesteuert. Zusätzlich zum Modus können Sie nicht bearbeitbare Zeilen- und Hook-Funktionen angeben. 

Im folgenden Code wird der nonEditableRows Funktion gibt einfach den Zeilenschlüssel 3 zurück, könnte jedoch eine ausgefeiltere Logik verwenden.

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 Table8 erweitert die Komponente render () const cellEditProp = mode:' click ', //' dbclick 'für den Trigger durch Doppelklick nonEditableRows: function () return [3];   Rückkehr ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren8

Exportieren Ihrer Daten

Manchmal reicht es nicht aus, Ihre Daten anzuzeigen und in einer Web-Benutzeroberfläche zu spielen, und Sie müssen Ihre Daten dazu verwenden, sie anderen Tools zur Verfügung zu stellen. Der Weg mit React-Bootstrap-table ist sehr einfach. Sie fügen einfach das exportCSV-Attribut (und optional einen Dateinamen) hinzu und eine Exportschaltfläche wird hinzugefügt. Wenn Sie auf die Schaltfläche klicken, können Sie Ihre Daten in einer CSV-Datei speichern.

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 Table9 erweitert Component render () return ( 
   ICH WÜRDE   Name   Wert   
 ) Standardtabelle exportieren9

Hier sind die exportierten Daten aus unserer kleinen Tabelle:

"id", "name", "value" "1", "Gob", "2" "2", "Buster", "5" "3", "George Michael", "4" 

Alle Dinge anpassen

Wir haben viel Material behandelt, aber der React-Bootstrap-Tisch hat noch viel mehr zu bieten. Praktisch kann jeder Aspekt angepasst werden. Lesen Sie die vollständige Dokumentation zum Anpassen einer Tabelle.

Hier ist eine Liste der anpassbaren Teile:

• Zelle
• Werkzeugleiste
• Modal einfügen
• Seitennummerierung
• Spaltenfilter
• Zellbearbeitung
• Zeilenauswahlspalte

Fazit

Der React-Bootstrap-Table bietet einen kraftvollen Schlag. Es bietet eine praktische Benutzeroberfläche zum Anzeigen, Suchen und Bearbeiten von Tabellendaten. Die API ist sehr konsistent. Die wichtigsten Funktionen können durch Angabe eines einfachen Attributs aktiviert und optional mit zusätzlichen Attributen angepasst werden, die häufig dynamische Funktionen sind. 

Das Standardverhalten und die grundlegende Konfiguration sollten die meisten Benutzer zufriedenstellen. Wenn Sie jedoch erweiterte Funktionen und Anpassungen benötigen, gibt es eine umfangreiche Dokumentation und Beispiele, wie Sie dies tun können.

In den letzten Jahren hat React an Popularität gewonnen. Tatsächlich gibt es auf dem Marktplatz eine Reihe von Artikeln, die zum Kauf, zur Überprüfung, zur Implementierung usw. zur Verfügung stehen. Wenn Sie nach weiteren Ressourcen rund um React suchen, zögern Sie nicht, sie herauszufinden.