Share
Een van de meest voorkomende elementen van de gebruikersinterface voor het presenteren van uw gegevens is een tabel. Het blijkt dat er veel aspecten te controleren zijn bij het werken met tabellen, zoals:
In deze tweedelige serie leert u meer over het reilen en zeilen van het werken met tabulaire gegevens in React met behulp van de React Bootstrap Table-component. U kunt standaard met weinig moeite geavanceerde en professioneel ogende tafels maken en toch elk onderdeel dat u wilt aanpassen.
Ik neem aan dat u bekend bent met React zelf en zich gaat richten op het werken met React Bootstrap Table. Envato Tuts + heeft een geweldige serie over React die je kunt lezen als achtergrond.
In een notendop, ik gebruikte react-create-app om een vanille React-app te maken en installeerde vervolgens de react-bootstrap-tabel: npm install react-bootstrap-table - opslaan.
Het is belangrijk om de bootstrap-CSS toe te voegen aan het bestand public / index.html.
Reageer App
Als u de WebStorm van JetBrains gebruikt en u de tests wilt uitvoeren, voegt u toe --env = jsdom in je run-configuratie.
We beginnen met een basistabel. Hier is een basistabelonderdeel. Het importeert de BoostrapTable en TableHeaderColumn uit react-bootstrap-table en ook de CSS uit de dist-directory.
De render () methode geeft een tabel met drie kolommen: "ID", "Naam" en "Waarde". De feitelijke gegevens in de tabel zijn afkomstig van de eigenschap "data" (this.props.data). De data bevat de namen van enkele personages uit de hilarische show Arrested Development.
import Reageren, Component uit 'reageren'; import BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table'; importeer '... /css/Table.css'; import '... / ... / node_modules / react-bootstrap-table / css / react-bootstrap-table.css' class Table1 breidt Component render () return uit (); standaard tabel 1 exporteren;ID kaart Naam Waarde
Ik heb de basistabel geïnstantieerd in de render () -methode van de standaard App.js en een aantal hardgecodeerde gegevens doorgegeven:
import Reageren, Component uit 'reageren'; import './App.css'; importeer Tabel 1 uit './components/Table1' var data = [id: 1, name: 'Gob', value: '2', id: 2, name: 'Buster', value: '5', id: 3, naam: 'George Michael', waarde: '4']; class-app breidt component render () terug (); standaard app exporteren;Basis tabel
Typ de volgende opties om de tabel te bekijken: npm start. De configuratie gemaakt door create-reactie-app bewaakt uw code en hercompileert wanneer u iets wijzigt, dus u hoeft slechts één keer te draaien en vervolgens wordt elke wijziging automatisch weergegeven.
Met succes samengesteld! U kunt de reactietabel nu in de browser bekijken. Lokaal: http: // localhost: 3000 / Op uw netwerk: http://192.168.1.136:3000/ Merk op dat de ontwikkelingsopbouw niet is geoptimaliseerd. Gebruik garenopbouw om een productie-build te maken.
Hier is het resultaat:
Merk op dat elke kolom exact dezelfde breedte heeft.
U kunt veel aspecten van de kolommen beheren. In het bijzonder kunnen de kolombreedten worden opgegeven in absolute eenheden als percentages of niet gespecificeerd worden gelaten. De kolombreedte van niet-gespecificeerde kolommen is de rest gelijk verdeeld. Voor een tabelbreedte van 100 px heeft bijvoorbeeld één kolom 15 px opgegeven, een tweede kolom 25% (25 px) en een derde kolom 30% (15 px).
In twee andere kolommen is geen breedte opgegeven. Kolommen 1, 2 en 3 gebruikten samen 70 px, waardoor 30 px overblijft voor kolommen 4 en 5, die het gelijk verdelen. Kolom 4 en 5 hebben elk een breedte van 15 px. Merk op dat als de grootte van de tabel verandert, de nummers zullen veranderen. Alleen kolom 1 is altijd 15 px breed.
De andere kolommen worden berekend op basis van de tabelbreedte. U kunt ook de uitlijning van tekst en kolommen beheren, evenals de stijl van kopteksten en kolommen. Hier volgt een voorbeeld van het opgeven van verschillende kolombreedten, tekstuitlijning en aangepaste stijlen:
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'class Table2 breidt Component render () return uit () exporteer standaard Tabel2ID kaart Naam Waarde
Je zag hoe je individuele kolommen en headers moest stylen, maar stylen kan veel verder gaan. React-bootstrap-tabel biedt veel opties voor maatwerk. Eerst kunt u simpelweg de attributen striped en hover toevoegen aan de BootstrapTable-component om alternatieve achtergrondkleuren op elke rij te krijgen:
Gebruik de stijl om alle rijen op te maken trClassName:
Als je echt zin hebt, kan de trStyle een functie hebben. Bekijk de volgende tabelcomponent die andere rijen met de naam "George Michael" stijlen:
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'functie rowClassNameFormat (rij, rowIdx) // row is whole row object // rowIdx is index van rij console.log (rij) return row [' name '] ===' George Michael '? 'GeorgeMichael-Row': 'Other-Row'; class Table3 breidt Component render () return uit () exporteer standaard Tabel3ID kaart Naam Waarde
De Georgemichael-Row en Andere Row CSS-klassen worden gedefinieerd in Table.css:
.Tabelkop achtergrondkleur: #ccc; kleur blauw; opvulling: 10px; text-align: left; .GeorgeMichael-Row achtergrondkleur: pruim; . Andere-rij achtergrondkleur: groengeel;
Zodra u uw gegevens in een tabel hebt staan, wilt u mogelijk enkele rijen selecteren om bepaalde bewerkingen uit te voeren. React-bootstrap-tabel biedt een breed scala aan selectie-opties. Alle opties zijn georganiseerd in een enkel object dat u doorgeeft aan het onderdeel als het selectRow attribuut. Hier zijn enkele van de selectie-opties:
De volgende componenten demonstreren veel van deze opties:
Accentsconagua
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'functie onSelectRow (row, isSelected, e) if (isSelected) alert (' Je hebt zojuist '$ row [' name '] geselecteerd) const selectRowProp = mode:' checkbox ', clickToSelect: true , unselectable: [2], geselecteerd: [1], onSelect: onSelectRow, bgColor: 'gold'; class Table4 breidt Component render () return uit ( ID kaart Naam Waarde ) exporteer standaard Tabel4
In dit deel hebben we een eenvoudige React-toepassing gemaakt met behulp van react-create-app, React-Bootstrap-Table toegevoegd, een tabel met gegevens ingevuld, gewerkt met kolommen, de tabel opgemaakt en geselecteerde rijen.
In het volgende deel gaan we verder met de reis door rijen uit te breiden, rijen toe te voegen, rijen te verwijderen en paginering, celbewerking en geavanceerde aanpassing aan te brengen. Blijf kijken.
