Arbeide med tabeller i reaksjon, del to

Oversikt

Dette er del to i en todelt serie om React-Bootstrap-Table. I del ett 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 denne delen fortsetter vi reisen ved å utvide rader, legge til rader, slette rader og dekke paginering, celleredigering og avansert tilpasning.

Utvide rader

Dette er en av de kuleste funksjonene i React-bootstrap-table. Når du viser tabelldata, er det ofte flere data du kanskje vil se på en eller to rader, men du kan ikke vise alle dataene for alle rader.

Et alternativ til å ta opp det som er å vise verktøytips, men verktøytips krever at du svever med musen over målområdet, og du kan bare se ett verktøytips om gangen. Utvidende rader lar deg vise ytterligere data for hver rad i en slags skuff som forblir utvidet så lenge du vil, og du kan kollapse den tilbake når du er ferdig. Du kan utvide så mange rader som du vil på samme tid. Slik gjøres det med React-bootstrap-table.

Kjærlighetskartet inneholder forhold mellom noen Arrested Development-tegn: Gob elsker Marta og Buster elsker Lucile 2. The isExpandable () funksjonskontroller hvilke rader som kan utvides. I dette tilfellet returnerer det sant for rader hvis karakternavn er i kjærlighets kartet. De expandRow () funksjonen returnerer en komponent når en rad utvides.

Den returnerte komponenten vises under raden til raden er kollapset. Konfigurere radekspansjon er litt vanskelig. Noen alternativer er bare rekvisitter på BootstrapTable-komponenten.

Utvidelseskolonne-alternativene er en gjenstandsprop, og så er det en prop kalles alternativer som inneholder flere radekspansjonsalternativer som expandRowBgColor og utvide. Det ville være mye enklere hvis det bare var en prop kallt expandRowProp som inneholdt alle alternativene (som selectRowProp).

Import React, Component fra "reagere" import BootstrapTable, TableHeaderColumn fra 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'const loveMap = Gob:' Martha ', Buster:' Lucile 2 ', funksjonen erExpandableRow (rad) return row [' name '] i loveMap;  funksjonen expandRow (rad) return ( rad ['navn'] elsker loveMap [rad ['navn']].
 );  klasse Table5 utvider komponent render () const options = expandRowBgColor: 'rosa', utvider: [1] // i utgangspunktet utvidet retur (    ID   Navn   Verdi   
 ) eksporter standard Tabell5

paginering

Så langt har vi bare vist tre rader med data. Tabeller er laget for å vise mye data som ikke nødvendigvis passer på skjermen på samme tid. Det er der paginering kommer inn. React-bootstrap-bordet støtter mange paginasjonsalternativer.

La oss fylle vårt bord med 100 elementer, som vil være ti sider med ti elementer hver. Vi bruker en getData () -funksjon som returnerer en rekke 100 objekter med ids, navn og verdier basert på deres indeks.

La oss også spesifisere hvilken side som skal vises i utgangspunktet (4), tilpasse teksten til forrige, neste, første og siste side (ved hjelp av Unicode-pilene for ekstra kjølighet) og til slutt gi en tilpasset funksjon kalt showTotal () for å vise totalt antall elementer. Merk at attributtet for å kontrollere den forrige siden-knappen kalles "prePage" og ikke "prevPage" (det fikk meg). Alle paginasjonsalternativene går inn i det generelle "alternativet" -attributtet til tabellen.

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 getData () var data = [] for (var i = 0; i < 100; ++i)  data[i] = id: i, name: 'item_' + i, value: i  return data  function showTotal()  return Det er 100 artikler totalt
  klasse Table6 utvider komponent render () const options = side: 4, prePage: '⟵', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: showTotal return    ID   Navn   Verdi   
 ) eksporter standard Tabell6

Legge til og slette rader

Så langt brukte vi bordet til å vise informasjon på en rekke måter. Men tabeller kan brukes som et brukergrensesnitt for å manipulere data. La oss se hvordan du legger til og fjerner rader fra et bord.

Nøkkelattributtene er insertRow og deleteRow. Når du angir dem, legges "Ny" og "Slett" -knappene til. Hvis du klikker på "Ny" -knappen, åpnes en modal dialog og lar deg legge til nye rader. Hvis du klikker på "Slett" -knappen, slettes alle valgte rader. For å slette rader må du selvsagt aktivere radvalg. Du kan også legge ved krokfunksjoner som kalles etter å legge til eller slette rader.

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 onInsertRow (rad) la newRowStr = "for (const prop i rad) newRowStr + = prop +': '+ rad [prop] +' \ n ' varsel (' Du har satt inn: \ n '+ newRowStr ) funksjon onDeleteRow (rowKeys) alarm ('Du slettet:' + rowKeys) klasse Tabell 7 utvider komponent render () const options = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow // For å slette rader kan du velge rader const selectRowProp = modus: 'avmerkingsboks' returnere (    ID   Navn   Verdi   
 ) eksporter standard Tabell7

Cell redigering

En annen form for datamanipulering er redigering på stedet (f.eks. Celleredigering). Cellredigering kan utløses med et klikk eller dobbeltklikk. Cellredigering styres av "cellEdit" -attributtet. I tillegg til modusen kan du angi ikke-redigerbare rader og krokfunksjoner.

I den følgende koden, er nonEditableRows funksjonen returnerer bare radnøkkelen 3, men kan bruke en mer sofistikert logikk.

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 Table8 utvider komponent render () const cellEditProp = modus:' klikk ', //' dbclick 'for utløseren ved å dobbeltklikke på nonEditableRows: function () return [3];   komme tilbake (    ID   Navn   Verdi   
 ) eksporter standard Tabell8

Eksportere dataene dine

Noen ganger ser du dataene dine og spiller med det i et webgrensesnitt, ikke nok, og du må ta dataene dine og matte det til andre verktøy. Måten å gjøre det med React-bootstrap-table er veldig enkelt. Du legger bare til eksportCSV-attributtet (og eventuelt et filnavn) og en eksportknapp er lagt til. Når du klikker på knappen, kan du lagre dataene dine i en CSV-fil.

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 Tabell 9 utvider komponent render () return (    ID   Navn   Verdi   
 ) eksporter standard Tabell9

Her er de eksporterte dataene fra vårt lille bord:

"George", "4", "5", "Buster", "5" "3", "George"

Tilpasse alle ting

Vi dekket mye materiale, men React-bootstrap-bordet har mye mer i butikken. Praktisk sett kan alle aspekter tilpasses. Les hele dokumentasjonen om hvordan du tilpasser et bord.

Her er en liste over de tilpassbare delene:

Celle
verktøylinje
Sett inn Modal
paginering
Kolonnefilter
Cell redigering
Radvalgskolonne

Konklusjon

React-bootstrap-tabellen pakker et kraftig slag. Det gir ut av boksen et hyggelig brukergrensesnitt for å vise, søke og manipulere tabelldata. API-en er svært konsekvent. Viktige funksjoner kan aktiveres ved å spesifisere et enkelt attributt og eventuelt tilpasses med flere attributter som ofte kan være dynamiske funksjoner.

Selv om standardoppførelsen og den grunnleggende konfigurasjonen skal tilfredsstille de fleste brukere, hvis du trenger mer avanserte funksjoner og tilpasning, er det rikelig med dokumentasjon og eksempler på hvordan du skal gjøre det.

I løpet av de siste par årene har React vokst i popularitet. Faktisk har vi en rekke elementer på markedet som er tilgjengelige for kjøp, gjennomgang, implementering og så videre. Hvis du leter etter flere ressurser rundt React, ikke nøl med å sjekke dem ut.

Kode