Lavorare con le tabelle in React, prima parte

Panoramica

Uno degli elementi di interfaccia utente più comuni per la presentazione dei dati è una tabella. Si scopre che ci sono molti aspetti da controllare quando si lavora con le tabelle, come ad esempio:

• definizione di colonne e intestazioni
• vari formati di celle (testo, numeri, caselle di controllo)
• il ridimensionamento
• filtraggio
• crescita dinamica
• messa in piega

In questa serie in due parti, imparerai a conoscere i dettagli del lavoro con i dati tabulari in React usando il componente React Bootstrap Table. Per impostazione predefinita, sarai in grado di creare tabelle dall'aspetto sofisticato e professionale con un minimo di sforzo e tuttavia essere in grado di personalizzare ogni parte desiderata.

Crea una App Vanilla React

Presumo che tu abbia familiarità con React stesso e si concentrerà sul lavoro con React Bootstrap Table. Envato Tuts + ha una grande serie su React che puoi leggere per lo sfondo.

In poche parole, ho usato react-create-app per creare un'app vanilla React e poi ho installato il react-bootstrap-table: npm installa react-bootstrap-table --save.

È importante aggiungere i CSS di bootstrap al file public / index.html.

WebStorm

Se si utilizza WebStorm di JetBrains e si desidera eseguire i test, aggiungere --env = jsdom nella tua configurazione di marcia.

Tabella di base

Inizieremo con una tabella di base. Ecco un componente di base della tabella. Importa BoostrapTable e TableHeaderColumn da react-bootstrap-table e anche il CSS dalla directory dist. 

Il render () metodo esegue il rendering di una tabella con tre colonne: "ID", "Nome" e "Valore". I dati effettivi nella tabella provengono dalla proprietà "data" (this.props.data). I dati contengono i nomi di alcuni personaggi dello spettacolo esilarante Arrested Development.

import React, Component da 'react'; import BootstrapTable, TableHeaderColumn da 'react-bootstrap-table'; import '... /css/Table.css'; importare '... / ... / node_modules / react-bootstrap-table / css / react-bootstrap-table.css' classe Table1 estende Component render () return ( 
   ID   Nome   Valore   
 );  export default Table1; 

Ho istanziato la BasicTable nel metodo render () dello standard App.js e ho passato alcuni dati hard-coded:

 import React, Component da 'react'; importare './App.css'; import Table1 da './components/Table1' var data = [id: 1, nome: 'Gob', valore: '2', id: 2, nome: 'Buster', valore: '5', id: 3, nome: 'George Michael', valore: '4']; la classe App estende Component render () return ( 
 
Tabella di base
  
 );  Esporta l'app predefinita; 

Per visualizzare la tabella, digitare: inizio di npm. La configurazione creata da Create-reagiscono-app controlla il tuo codice e ricompilerà ogni volta che cambierai qualcosa, quindi devi eseguire solo una volta e quindi ogni modifica verrà automaticamente riflessa.

Compilato con successo! È ora possibile visualizzare la tabella di reazione nel browser. Locale: http: // localhost: 3000 / Sulla tua rete: http://192.168.1.136:3000/ Si noti che la build di sviluppo non è ottimizzata. Per creare una build di produzione, utilizza la generazione del filato. 

Ecco il risultato:

Nota che ogni colonna ha esattamente la stessa larghezza.

Lavorare con le colonne

Puoi controllare molti aspetti delle colonne. In particolare, le larghezze delle colonne possono essere specificate in unità assolute come percentuali o non specificate. La larghezza della colonna di colonne non specificate è il resto diviso in parti uguali. Ad esempio, per una larghezza della tabella di 100 px, una colonna specificava 15 px, una seconda colonna specificava il 25% (25 px) e una terza colonna specificava il 30% (15 px). 

Altre due colonne non hanno specificato una larghezza. Le colonne 1, 2 e 3 usano insieme 70 px, che lascia 30 px per le colonne 4 e 5, che lo divideranno equamente. Le colonne 4 e 5 avranno ciascuna una larghezza di 15 px. Notare che se la tabella viene ridimensionata, i numeri cambieranno. Solo la colonna 1 sarà sempre larga 15 px. 

Le altre colonne verranno calcolate in base alla larghezza della tabella. Puoi anche gestire l'allineamento di testo e colonne nonché lo stile delle intestazioni e delle colonne. Ecco un esempio di come specificare diverse larghezze di colonna, allineamento del testo e stili personalizzati:

import React, Component da 'react' import BootstrapTable, TableHeaderColumn da 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. la classe css 'Table2 estende Component render () return ( 
   ID   Nome   Valore   
 ) esportazione predefinita Table2

Disegna la tua tavola

Hai visto come personalizzare singole colonne e intestazioni, ma lo stile può andare molto oltre. React-bootstrap-table fornisce molte opzioni per la personalizzazione. Innanzitutto puoi semplicemente aggiungere gli attributi a strisce e al passaggio del mouse al componente BootstrapTable per ottenere colori di sfondo alternativi su ogni riga: 

Per disegnare tutte le righe, usa trClassName:  

Se vuoi essere davvero fantasioso, il trStyle può avere una funzione. Dai un'occhiata al seguente componente della tabella che disegna in modo diverso le righe in cui il nome è "George Michael":

import React, Component da 'react' import BootstrapTable, TableHeaderColumn da 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'function rowClassNameFormat (row, rowIdx) // row is whole row object // rowIdx è l'indice della riga console.log (row) return row [' name '] ===' George Michael '? 'GeorgeMichael-Row': 'Other-Row';  classe Table3 estende Component render () return ( 
   ID   Nome   Valore   
 ) esportazione predefinita Table3 

Il George Michael-Row e Altro-Row Le classi CSS sono definite in Table.css:

.Intestazione tabella background-color: #ccc; colore blu; imbottitura: 10px; allineamento del testo: a sinistra;  .GeorgeMichael-Row background-color: prugna;  .Other-Row background-color: greenyellow; 

Selezione di righe

Una volta che hai i tuoi dati in una tabella, potresti voler selezionare alcune righe per eseguire alcune operazioni su di esse. React-bootstrap-table offre un'ampia varietà di opzioni di selezione. Tutte le opzioni sono organizzate in un singolo oggetto che si passa al componente come selectRow attributo. Ecco alcune delle opzioni di selezione:

• modalità di selezione singola (pulsante di opzione)
• modalità di selezione multipla (casella di controllo)
• larghezza di selezione della colonna configurabile
• seleziona su riga: per impostazione predefinita è necessario fare clic sul selettore (pulsante di opzione o casella di controllo)
• nascondi la colonna di selezione (utile se selezionare sul clic di riga è vero)
• cambia colore di sfondo alla selezione
• prime righe selezionate
• ganci di selezione (su una riga singola o quando tutte le righe sono selezionate).

I seguenti componenti dimostrano molte di queste opzioni:

import React, Component da 'react' import BootstrapTable, TableHeaderColumn da 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. funzione css 'onSelectRow (row, isSelected, e) if (isSelected) alert (' Hai appena selezionato '$ row [' name '] ") const selectRowProp = mode:' checkbox ', clickToSelect: true , non selezionabile: [2], selezionato: [1], onSelect: onSelectRow, bgColor: 'gold'; la classe Table4 estende Component render () return ( 
   ID   Nome   Valore   
 ) esportazione predefinita Table4

Conclusione

In questa parte, abbiamo creato una semplice applicazione React utilizzando react-create-app, aggiunto React-Bootstrap-Table, compilato una tabella con dati, lavorato con colonne, disegnato la tabella e le righe selezionate. 

Nella parte successiva, continueremo il viaggio espandendo le righe, aggiungendo righe, eliminando le righe e coprendo l'impaginazione, la modifica delle celle e la personalizzazione avanzata. Rimanete sintonizzati.