Lucrul cu tabelele în reacție, partea a doua

Prezentare generală

Aceasta este partea a doua a unei serii în două părți despre React-Bootstrap-Table. În prima parte am creat o aplicație simplă React folosind reac-create-app, adăugat React-Bootstrap-Table, umplut un tabel cu date, a lucrat cu coloane, a stilat tabelul și rândurile selectate. 

În această 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ă.

Extindeți rândurile

Aceasta este una dintre cele mai bune caracteristici ale tabelului React-bootstrap. Când se afișează date tabulare, există adesea date suplimentare pe care doriți să le vedeți pe unul sau două rânduri, dar nu puteți afișa toate datele pentru toate rândurile. 

O singură opțiune pentru a afișa care este de a afișa tooltips, dar tooltips necesită să mouse-ul cu mouse-ul peste zona țintă, și puteți vedea doar un simbol deget la un moment dat. Extinderea rândurilor vă permite să afișați date suplimentare pentru fiecare rând într-un fel de sertar care rămâne extins atâta timp cât doriți și îl puteți restrânge înapoi când ați terminat. Puteți extinde cât mai multe rânduri pe care le doriți în același timp. Iată cum se face cu tabelul React-bootstrap. 

Harta de dragoste conține relații între unele personaje ale Arrested Development: Gob iubește pe Marta și pe Buster îi iubește pe Lucile 2. The isExpandable () funcții de control care rânduri sunt extensibile. În acest caz, se întoarce adevărat pentru rândurile al căror nume de caractere este în harta dragoste. expandRow () funcția returnează o componentă atunci când un rând este extins. 

Componenta returnată este afișată sub rând, până când rândul este restrâns. Configurarea expansiunii rândului este puțin complicată. Unele opțiuni sunt doar elemente de recuzită pe componenta BootstrapTable. 

Opțiunile pentru coloanele de extensie sunt un obiect prop, iar apoi există o opțiune numită opțiuni care conține opțiuni suplimentare de expansiune a rândului, cum ar fi expandRowBgColor și extinderea. Ar fi mult mai simplu dacă ar fi fost numit doar un singur propulsor expandRowProp care conținea toate opțiunile (cum ar fi selectRowProp).

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 'const dragMap = Gob:' Martha ', Buster:' Lucile 2 ', funcția esteExpandableRow (rând) rândul întoarcere [' name '] în loveMap;  funcția expandRow (rând) return ( 
row ['nume'] iubește loveMap [rând ['nume']].
 );  clasa Table5 extinde Component render () const opțiuni = expandRowBgColor: "roz", extinderea: [1] // întinderea inițială retur ( 
   ID-ul   Nume   Valoare   
 ) exportă tabelul implicit5

Paginare

Până acum, am afișat doar trei rânduri de date. Tabelele sunt concepute pentru a afișa o mulțime de date care nu se potrivesc neapărat pe ecran în același timp. Aici intră paginarea. React-bootstrap-table suportă mai multe opțiuni de paginare. 

Să populam masa noastră cu 100 de articole, care vor fi zece pagini de zece articole fiecare. Vom folosi o funcție getData () care returnează o matrice de 100 de obiecte cu ID-uri, nume și valori pe baza indexului lor. 

De asemenea, să specificăm ce pagină să afișăm inițial (4), să personalizăm textul pentru pagina precedentă, următoarea, prima și ultima (folosind săgețile Unicode pentru o răcoare extraordinară) și, în final, să oferim o funcție personalizată numită showTotal () pentru a afișa numărul total de elemente. Rețineți că atributul pentru controlul butonului paginii anterioare se numește "prePage" și nu "prevPage" (mi-a luat-o). Toate opțiunile de paginare intră în atributul general "opțiuni" din tabel. 

import React, Component de la 'react' import BootstrapTable, TableHeaderColumn din 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. funcția css 'getData () var data = [] pentru (var i = 0; i < 100; ++i)  data[i] = id: i, name: 'item_' + i, value: i  return data  function showTotal()  return 
Există 100 de articole în total
  clasa Table6 extinde Component render () const opțiuni = pagina: 4, prePage: '⟵', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: 
   ID-ul   Nume   Valoare   
 ) exportă implicit Table6

Adăugarea și ștergerea rândurilor

Până acum, am folosit masa pentru a afișa informații într-o varietate de moduri. Dar tabelele pot fi folosite ca interfață pentru manipularea datelor. Să vedem cum să adăugăm și să eliminăm rânduri dintr-o masă. 

Atributele cheie sunt insertRow și deleteRow. Când le specificați, se adaugă butoanele "Noi" și "Ștergeți". Dacă faceți clic pe butonul "Nou", se deschide un dialog modal și vă permite să adăugați rânduri noi. Dacă dați clic pe butonul "Ștergeți", toate rândurile selectate vor fi șterse. Pentru a șterge rânduri, trebuie să activați selecția rândului, desigur. De asemenea, puteți atașa funcțiile de cârlig numite după adăugarea sau ștergerea rândurilor.

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 'funcția onInsertRow (rând) let newRowStr = "pentru (const prop în rând) newRowStr + = prop +': '+ rând [prop] +' \ n ' alert ) funcția onDeleteRow (rowKeys) alert ('Ați șters:' + rowKeys) clasa Table7 extinde Component render () const opțiuni = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow rânduri const selectRowProp = mode: 'checkbox' retur ( 
   ID-ul   Nume   Valoare   
 ) exportă implicit Table7

Editarea celulelor

O altă formă de manipulare a datelor este editarea pe loc (de exemplu, editarea celulelor). Editarea celulelor poate fi declanșată printr-un clic sau dublu-clic. Editarea celulelor este controlată de atributul "cellEdit". În plus față de modul, puteți specifica rânduri și funcții de cârlig care nu pot fi editate. 

În următorul cod, nonEditableRows funcția returnează pur și simplu tasta rând 3, dar ar putea folosi o logică mai sofisticată.

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 'Tabelul 8 extinde Component render () const cellEditProp = mode:' click ', //' dbclick 'pentru trigger prin dublu clic pe nonEditableRows: function () return [3];   întoarcere ( 
   ID-ul   Nume   Valoare   
 ) export implicit Table8

Exportul datelor

Uneori, vizualizarea datelor și redarea lor cu ajutorul unui interfață web nu este suficientă și trebuie să vă luați datele și să le alimentați altor instrumente. Modul de a face acest lucru cu masa React-bootstrap este foarte simplu. Doar adăugați atributul exportCSV (și opțional un nume de fișier) și se adaugă un buton de export. Când faceți clic pe buton, vă permite să salvați datele într-un fișier CSV.

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 'class Table9 extinde Component render () return ( 
   ID-ul   Nume   Valoare   
  exportul implicit Table9

Iată datele exportate din tabelul nostru mic:

"1", "Gob", "2" "2", "Buster", "5" "3", "George Michael" 

Personalizarea tuturor lucrurilor

Am acoperit o mulțime de materiale, dar tabelul React-bootstrap are mult mai mult în stoc. Practic, fiecare aspect poate fi personalizat. Citiți documentația completă cu privire la modul de personalizare a unui tabel.

Iată o listă a părților personalizabile:

• celulă
• Bara de instrumente
• Introduceți Modal
• Paginare
• Filtru de coloane
• Editarea celulelor
• Rula de selecție a rândurilor

Concluzie

Masa React-bootstrap-pack oferă o lovitură puternică. Oferă din cutie o interfață de utilizare plăcută pentru afișarea, căutarea și manipularea datelor tabulare. API-ul este foarte consistent - caracteristicile majore pot fi activate prin specificarea unui atribut simplu și opțional personalizate cu atribute suplimentare care adesea pot fi funcții dinamice. 

În timp ce comportamentul implicit și configurația de bază ar trebui să satisfacă majoritatea utilizatorilor, dacă aveți nevoie de funcții mai avansate și de personalizare, există o documentație amplă și exemple despre cum să faceți acest lucru.

În ultimii ani, React a crescut în popularitate. De fapt, avem un număr de elemente pe piață care sunt disponibile pentru cumpărare, revizuire, implementare și așa mai departe. Dacă sunteți în căutarea unor resurse suplimentare în jurul React, nu ezitați să le verificați.