Lucrul cu tabelele în reacție, Partea întâi

Prezentare generală

Unul dintre cele mai comune elemente de interfață pentru prezentarea datelor dvs. este un tabel. Se pare că există multe aspecte de controlat atunci când se lucrează cu mese, cum ar fi:

• definirea coloanelor și anteturilor
• diferite formate de celule (text, numere, casete de selectare)
• redimensionarea
• filtrare
• creșterea dinamică
• Coafura

În această serie de două părți, veți afla despre datele inspirate și de a lucra cu date tabulare în React utilizând componenta React Bootstrap Table. Veți putea crea tabele sofisticate și profesionale în mod implicit, cu puțin efort și totuși să puteți personaliza fiecare parte pe care doriți să o faceți.

Creați o aplicație Vanilla React

Presupun că sunteți familiarizat cu Reactul însuși și vă veți concentra pe lucrul cu tabelul React Bootstrap. Envato Tuts + are o serie serioasă pe React pe care o puteți citi pentru fundal.

Pe scurt, am folosit reac-create-app pentru a crea o aplicație vanilla React și apoi a instalat tabela react-bootstrap: npm instalează rea-bootstrap-table - salvează.

Este important să adăugați CSS-ul de bootstrap în fișierul public / index.html.

WebStorm

Dacă utilizați WebStorm JetBrains și doriți să executați testele, adăugați --env = jsdom în config.

Tabelul de bază

Vom începe cu o masă de bază. Iată o componentă de bază a tabelului. Importează BoostrapTable și TableHeaderColumn din tabelul react-bootstrap și de asemenea CSS din directorul dist. 

face() metoda face un tabel cu trei coloane: "ID", "Nume" și "Valoare". Datele reale din tabel provin din proprietatea "date" (this.props.data). Datele conțin numele unor personaje din show-ul hilar "Arrested Development".

import React, Component de la "reacție"; import BootstrapTable, TableHeaderColumn de la "react-bootstrap-table"; import "... /css/Table.css"; import '... / ... / node_modules / react-bootstrap-table / css / react-bootstrap-table.css' Tabelul1 extinde Component render () 
   ID-ul   Nume   Valoare   
 );  exportul implicit Table1; 

Am instanțiat metoda BasicTable în metoda rendering () a App.js standard și am trecut unele date codate greu:

 import React, Component de la "reacție"; import "./App.css"; importă tabelul de la './components/Table1' var data = [id: 1, nume: 'Gob', valoare: '2', id: id: 3, numele: "George Michael", valoarea: '4']; clasa App extinde Component render () return ( 
 
Tabelul de bază
  
 );  exportă aplicația implicită; 

Pentru a vizualiza tabelul, tastați: npm start. Configurația creată de Create-reacționează aplicație veghează peste codul dvs. și se va recompila ori de câte ori schimbați ceva, deci trebuie să rulați o singură dată și apoi fiecare schimbare va fi reflectată automat.

Compilați cu succes! Acum puteți vedea tabelul de reacții în browser. Local: http: // localhost: 3000 / În rețeaua dvs.: http://192.168.1.136:3000/ Rețineți că dezvoltarea de dezvoltare nu este optimizată. Pentru a crea o construcție de producție, utilizați construirea firelor. 

Iată rezultatul:

Rețineți că fiecare coloană are exact aceeași lățime.

Lucrul cu coloane

Puteți controla mai multe aspecte ale coloanelor. În special, lățimea coloanelor poate fi specificată în unități absolute ca procente sau lăsată nespecificată. Lățimea coloanei coloanelor nespecificate reprezintă restul împărțit în mod egal. De exemplu, pentru o lățime de tabel de 100 px, o coloană a specificat 15 px, o a doua coloană specifică 25% (25 px) și o a treia coloană specifică 30% (15 px). 

Două alte coloane nu au specificat o lățime. Coloanele 1, 2 și 3 au utilizat 70 de pixeli împreună, ceea ce lasă 30 px pentru coloanele 4 și 5, ceea ce o va împărți în mod egal. Coloanele 4 și 5 vor avea fiecare o lățime de 15 px. Rețineți că dacă tabelul este redimensionat, numerele se vor schimba. Numai coloana 1 va avea întotdeauna o lățime de 15 px. 

Celelalte coloane vor fi calculate pe baza lățimii tabelului. De asemenea, puteți gestiona alinierea textului și coloanelor, precum și stilul anteturilor și coloanelor. Iată un exemplu de specificare a lățimii coloanelor, a alinierii textului și a stilurilor personalizate:

import React, Component de la 'react' import BootstrapTable, TableHeaderColumn din 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'Clasa Table2 extinde Component render () return ( 
   ID-ul   Nume   Valoare   
  tabelul de export implicit

Modelarea mesei

Ați văzut cum să stilul coloanelor și anteturilor individuale, dar stilul poate merge mult mai departe. Tasta React-bootstrap oferă o mulțime de opțiuni pentru personalizare. Mai întâi puteți adăuga pur și simplu atributele dungate și hover la componenta BootstrapTable pentru a obține culori de fundal alternative pe fiecare rând: 

Pentru a modela toate rândurile, utilizați trClassName:  

Dacă doriți să obțineți cu adevărat fantezie, trStyle poate funcționa. Consultați următoarea componentă de masă care modelează rânduri diferite în cazul în care numele este "George Michael":

import React, Component de la 'react' import BootstrapTable, TableHeaderColumn din 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'function rowClassNameFormat (rând, rowIdx) // rândul este un obiect de rând întreg // rowIdx este indexul rândului consola.log (rândul) rândul retur [' name '] ===' George Michael '? "GeorgeMichael-Row": "Alt-Row";  class Table3 extinde Component render () return ( 
   ID-ul   Nume   Valoare   
 ) exportă implicit Table3 

George Michael-Row și Alte rânduri Clasele CSS sunt definite în Table.css:

.Antetul tabelului background-color: #ccc; Culoarea albastra; padding: 10px; text-aliniere: stânga;  .GeorgeMichael-Row fundal-culoare: prune; . Altele-Row background-color: greenyellow; 

Selectarea rândurilor

Odată ce aveți datele într-un tabel, este posibil să doriți să selectați câteva rânduri pentru a efectua anumite operații pe ele. Tasta React-bootstrap oferă o mare varietate de opțiuni de selecție. Toate opțiunile sunt organizate într-un singur obiect pe care îl transmiteți componentei ca fiind selectRow atribut. Iată câteva dintre opțiunile de selecție:

• mod de selecție unică (buton radio)
• modul multi-selecție (caseta de selectare)
• configurabilă lățime de selectare a coloanei
• selectați pe clic pe rând: în mod prestabilit, trebuie să faceți clic pe selector (butonul radio sau caseta de selectare)
• ascundeți coloana de selecție (utilă dacă selectați dacă faceți clic pe rând este adevărată)
• schimba culoarea de fundal la selecție
• rândurile selectate inițial
• cârlige de selectare (pe un singur rând sau când toate rândurile sunt selectate).

Următoarele componente demonstrează multe dintre aceste opțiuni:

import React, Component de la 'react' import BootstrapTable, TableHeaderColumn din 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'function onSelectRow (rand, isSelected, e) if (isSelected) alert (' Ați selectat '$ row') const selectRowProp = mode: 'checkbox', clickToSelect: true , unselectable: [2], selectat: [1], onSelect: onSelectRow, bgColor: 'gold'; clasa Table4 extinde Component render () return 
   ID-ul   Nume   Valoare   
 ) exportă implicit Table4

Concluzie

În această parte, am creat o aplicație React simplă utilizând reac-create-app, adăugat React-Bootstrap-Table, umplut un tabel cu date, a lucrat cu coloane, s-au șters tabelul și rândurile selectate. 

În următoarea parte, vom continua călătoria prin extinderea rândurilor, adăugarea rândurilor, ștergerea rândurilor și acoperirea paginării, editarea celulelor și personalizarea avansată. Rămâneți aproape.