Share
Et av de vanligste brukergrensesnittelementene for å presentere dataene dine er et bord. Det viser seg at det er mange aspekter å kontrollere når du arbeider med bord, for eksempel:
I denne todelte serien vil du lære om innsatsene og innsatsene for å jobbe med tabelldata i React ved hjelp av React Bootstrap Table-komponenten. Du vil kunne lage sofistikerte og profesjonelle utseende tabeller som standard med liten innsats og likevel kunne tilpasse hver del du vil.
Jeg antar at du er kjent med React selv og vil fokusere på å jobbe med React Bootstrap Table. Envato Tuts + har en flott serie på React du kan lese for bakgrunn.
I et nøtteskall brukte jeg React-create-app til å lage en vanilje-React-app og installerte deretter reaksjonsstart-bordet: npm installere reager-bootstrap-table - save.
Det er viktig å legge til bootstrap CSS til filen public / index.html.
Reager App
Hvis du bruker JetBrains 'WebStorm, og du vil kjøre testene, legger du til --env = jsdom i din run-config.
Vi starter med et grunnleggende bord. Her er en grunnleggende tabellkomponent. Det importerer BoostrapTable og TableHeaderColumn fra reager-bootstrap-table og også CSS fra dist-katalogen.
De render () Metoden gjør et bord med tre kolonner: "ID", "Navn" og "Verdi". De faktiske dataene i tabellen kommer fra "data" -egenskapen (this.props.data). Dataene inneholder navnene på noen tegn fra det morsomme showet Arrested Development.
Import React, Component fra 'reagere'; importer BootstrapTable, TableHeaderColumn fra 'react-bootstrap-table'; importer '... /css/Table.css'; importere '... / ... / node_modules / reager-bootstrap-table / css / reager-bootstrap-table.css' klasse Tabell1 utvider komponent render () return); eksporter standard Tabell1;ID Navn Verdi
Jeg instanserte BasicTable i renderen () -metoden til standard App.js og bestod noen hardkodede data:
Import React, Component fra 'reagere'; importer './App.css'; importer tabell1 fra './components/Table1' var data = [id: 1, navn: 'Gob', verdi: '2', id: 2, navn: 'Buster', verdi: '5', id: 3, navn: 'George Michael', verdi: '4']; klassen App utvider komponent render () return (); eksporter standard app;Grunnleggende tabell
For å vise tabellen, skriv inn: npm start. Konfigurasjonen opprettet av create reagere-app ser på koden din og vil kompilere når du endrer noe, så du trenger å kjøre bare én gang, og deretter vil alle endringer automatisk bli reflektert.
Kompilert med hell! Du kan nå vise reaksjonstabell i nettleseren. Lokal: http: // localhost: 3000 / På nettverket ditt: http://192.168.1.136:3000/ Merk at utviklingsbygget ikke er optimalisert. For å lage en produksjonsbygg, bruk garnbygging.
Her er resultatet:
Merk at hver kolonne har nøyaktig samme bredde.
Du kan kontrollere mange aspekter av kolonnene. Spesielt kan kolonnebredder angis i absolutte enheter som prosentandeler eller uspesifiserte. Kolonnebredden på uspesifiserte kolonner er resten fordelt like mye. For eksempel for en tabellbredde på 100 px, en kolonne angitt 15 px, en andre kolonne spesifisert 25% (25 px) og en tredje kolonne spesifisert 30% (15 px).
To andre kolonner angir ikke en bredde. Kolonnene 1, 2 og 3 brukte 70 px sammen, som etterlater 30 px for kolonnene 4 og 5, som vil dele det likt. Kolonne 4 og 5 vil hver ha en bredde på 15 px. Merk at hvis bordet er endret, endres tallene. Bare kolonne 1 vil alltid være 15 px bred.
De andre kolonnene beregnes basert på bordbredden. Du kan også håndtere justeringen av tekst og kolonner, samt stilen til overskrifter og kolonner. Her er et eksempel på hvordan du angir forskjellige kolonnebredder, tekstjustering og tilpassede stiler:
Import React, Component fra "reagere" import BootstrapTable, TableHeaderColumn fra 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'klasse Table2 utvider komponent render () return () eksporter standard Tabell2ID Navn Verdi
Du så hvordan du stiler individuelle kolonner og overskrifter, men styling kan gå mye lenger. React-bootstrap-table gir mange muligheter for tilpasning. Først kan du bare legge til stripede og sveveattributtene til BootstrapTable-komponenten for å få alternative bakgrunnsfarger på hver rad:
For å style alle rader, bruk trClassName:
Hvis du vil bli veldig fancy, kan trStyle fungere. Sjekk ut følgende tabellkomponent som stiler annerledes rader der navnet er "George Michael":
Import React, Component fra "reagere" import BootstrapTable, TableHeaderColumn fra 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'funksjon rowClassNameFormat (rad, rowIdx) // rad er hele rad objekt // rowIdx er indeks av rad console.log (rad) tilbake rad [' name '] ===' George Michael '? 'GeorgeMichael-Row': 'Andre-Row'; klasse Tabell 3 utvider komponent render () return () eksporter standard Tabell3ID Navn Verdi
De George Michael-Rad og Andre-Rad CSS klasser er definert i Table.css:
.Tabelloverskrift bakgrunnsfarge: #ccc; farge: blå; polstring: 10px; tekstjustering: venstre; .GeorgeMichael-Row bakgrunnsfarge: plomme; .Other-Row bakgrunnsfarge: greenyellow;
Når du har dataene dine i et bord, vil du kanskje velge noen rader for å utføre noen operasjoner på dem. React-bootstrap-table gir et bredt utvalg av valgalternativer. Alle alternativene er organisert i et enkelt objekt du overfører til komponenten som selectRow Egenskap. Her er noen av valgalternativene:
Følgende komponenter viser mange av disse alternativene:
Accentsconagua
Import React, Component fra "reagere" import BootstrapTable, TableHeaderColumn fra 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'funksjon onSelectRow (rad, isSelected, e) if (isSelected) alert (' Du har valgt '$ row [' name '] ") const selectRowProp = modus:' avkrysningsboks ', klikkToVelg: true , unselectable: [2], valgt: [1], onSelect: onSelectRow, bgColor: 'gold'; klasse Table4 utvider komponent render () return ID Navn Verdi ) eksporter standard Tabell4
I denne delen opprettet vi et enkelt React-program ved hjelp av reaksjonsopprett-app, lagt til React-Bootstrap-Table, fylte en tabell med data, arbeidet med kolonner, stylet bordet og utvalgte rader.
I neste del fortsetter vi reisen ved å utvide rader, legge til rader, slette rader og dekke paginering, celleredigering og avansert tilpasning. Følg med.
