Lavorare con le tabelle in React, seconda parte

Panoramica

Questa è la seconda parte di una serie in due parti su React-Bootstrap-Table. Nella prima parte abbiamo creato una semplice applicazione React usando react-create-app, aggiunta React-Bootstrap-Table, compilato una tabella con dati, lavorato con colonne, disegnato la tabella e le righe selezionate. 

In questa parte continueremo il viaggio espandendo le righe, aggiungendo righe, eliminando le righe e coprendo l'impaginazione, la modifica delle celle e la personalizzazione avanzata.

Righe in espansione

Questa è una delle funzionalità più interessanti di React-bootstrap-table. Quando visualizzi dati tabulari, spesso ci sono dati aggiuntivi che potresti voler vedere su una o due righe, ma non puoi visualizzare tutti i dati per tutte le righe. 

Una delle opzioni da affrontare è quella di mostrare le descrizioni dei comandi, ma i tooltip richiedono di passare con il mouse sopra l'area di destinazione e si può vedere solo un suggerimento alla volta. Le file espandibili ti consentono di visualizzare dati aggiuntivi per ogni riga in un tipo di cassetto che rimane espanso per tutto il tempo che vuoi e che puoi ridimensionare quando hai finito. Puoi espandere tutte le righe che desideri contemporaneamente. Ecco come è fatto con React-bootstrap-table. 

La mappa d'amore contiene relazioni tra alcuni personaggi dello Sviluppo Arrestato: Gob ama Marta e Buster ama Lucile 2. Il isExpandable () la funzione controlla quali righe sono espandibili. In questo caso, restituisce true per le righe il cui nome del personaggio è nella mappa dell'amore. Il expandRow () la funzione restituisce un componente quando una riga viene espansa. 

Il componente restituito viene visualizzato sotto la riga fino a quando la riga non viene compressa. La configurazione dell'espansione di riga è un po 'complicata. Alcune opzioni sono solo oggetti di scena sul componente BootstrapTable. 

Le opzioni di colonna di espansione sono un oggetto prop, e poi c'è un oggetto chiamato opzioni che contiene opzioni di espansione di riga aggiuntive come expandRowBgColor e in espansione. Sarebbe molto più semplice se ci fosse un solo oggetto chiamato expandRowProp che conteneva tutte le opzioni (come la selectRowProp).

import React, Component da 'react' import BootstrapTable, TableHeaderColumn da 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'const loveMap = Gob:' Martha ', Buster:' Lucile 2 ', function isExpandableRow (row) return row [' name '] in loveMap;  function expandRow (row) return (restituisce ( 
row ['name'] ama loveMap [row ['name']].
 );  classe Table5 estende Component render () const options = expandRowBgColor: 'pink', espandendo: [1] // inizialmente espanso return ( 
   ID   Nome   Valore   
 ) esportazione predefinita Table5

paginatura

Finora abbiamo mostrato solo tre righe di dati. Le tabelle sono progettate per visualizzare molti dati che non si adattano necessariamente allo schermo contemporaneamente. È qui che entra in gioco la paginazione. La tabella bootstrap di React supporta molte opzioni di paginazione. 

Compila il nostro tavolo con 100 elementi, che saranno dieci pagine di dieci elementi ciascuno. Utilizzeremo una funzione getData () che restituisce un array di 100 oggetti con ID, nomi e valori in base al loro indice. 

Specifichiamo anche quale pagina visualizzare inizialmente (4), personalizza il testo per la prev, next, first e last page (usando le frecce Unicode per maggiore freddezza) e infine fornisci una funzione personalizzata chiamata showTotal () per visualizzare il numero totale di elementi. Si noti che l'attributo per il controllo del pulsante della pagina precedente è chiamato "prePage" e non "prevPage" (mi ha ottenuto). Tutte le opzioni di impaginazione passano all'attributo generale "opzioni" della tabella. 

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 getData () var data = [] per (var i = 0; i < 100; ++i)  data[i] = id: i, name: 'item_' + i, value: i  return data  function showTotal()  return 
Ci sono 100 articoli in totale
  classe Table6 estende Component render () const options = page: 4, prePage: '⟵', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: showTotal return ( 
   ID   Nome   Valore   
 ) esportazione predefinita Tabella6

Aggiunta ed eliminazione di righe

Finora abbiamo usato la tabella per visualizzare le informazioni in vari modi. Ma le tabelle possono essere utilizzate come interfaccia utente per la manipolazione dei dati. Vediamo come aggiungere e rimuovere righe da una tabella. 

Gli attributi chiave sono insertRow e deleteRow. Quando li specifichi, vengono aggiunti i pulsanti "Nuovo" e "Elimina". Se fai clic sul pulsante "Nuovo", si apre una finestra di dialogo modale che ti consente di aggiungere nuove righe. Se fai clic sul pulsante "Elimina", tutte le righe selezionate vengono eliminate. Per eliminare le righe, è necessario abilitare la selezione delle righe, ovviamente. È anche possibile allegare le funzioni di hook che vengono chiamate dopo aver aggiunto o eliminato le righe.

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 onInsertRow (row) let newRowStr = "for (const prop in row) newRowStr + = prop +': '+ row [prop] +' \ n ' alert (' Hai inserito: \ n '+ newRowStr ) function onDeleteRow (rowKeys) alert ('Hai eliminato:' + rowKeys) classe Table7 estende Component render () const options = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow // Per eliminare righe che puoi selezionare rows const selectRowProp = mode: 'checkbox' ritorno ( 
   ID   Nome   Valore   
 ) esportazione predefinita Table7

Editing cellulare

Un'altra forma di manipolazione dei dati è la modifica sul posto (a.k.a. modifica delle celle). La modifica della cella può essere attivata da un clic o doppio clic. La modifica della cella è controllata dall'attributo "cellEdit". Oltre alla modalità, è possibile specificare le righe non modificabili e le funzioni di hook. 

Nel seguente codice, il nonEditableRows la funzione restituisce semplicemente il tasto di riga 3, ma potrebbe utilizzare una logica più sofisticata.

import React, Component da 'react' import BootstrapTable, TableHeaderColumn da 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'class Table8 estende Component render () const cellEditProp = mode:' click ', //' dbclick 'per l'attivazione facendo doppio clic su nonEditableRows: function () return [3];   ritorno ( 
   ID   Nome   Valore   
 ) esporta Tabella8 predefinita

Esportare i tuoi dati

A volte, visualizzare i tuoi dati e giocarci in un'interfaccia utente web non è sufficiente e devi prendere i tuoi dati e inviarli ad altri strumenti. Il modo di farlo con React-bootstrap-table è molto semplice. Basta aggiungere l'attributo exportCSV (e facoltativamente un nome file) e viene aggiunto un pulsante di esportazione. Quando fai clic sul pulsante, ti consente di salvare i tuoi dati in un file CSV.

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

Ecco i dati esportati dalla nostra piccola tabella:

"id", "name", "value" "1", "Gob", "2" "2", "Buster", "5" "3", "George Michael", "4" 

Personalizzare tutte le cose

Abbiamo coperto molto materiale, ma React-bootstrap-table ha molto di più in serbo. Praticamente, ogni aspetto può essere personalizzato. Leggi la documentazione completa su come personalizzare un tavolo.

Ecco un elenco delle parti personalizzabili:

• Cellula
• Toolbar
• Inserisci modale
• paginatura
• Filtro a colonna
• Editing cellulare
• Colonna Selezione riga

Conclusione

React-bootstrap-table racchiude un potente pugno. Fornisce immediatamente una piacevole interfaccia utente per la visualizzazione, la ricerca e la manipolazione di dati tabulari. L'API è molto coerente: le funzionalità principali possono essere abilitate specificando un attributo semplice e opzionalmente personalizzate con attributi aggiuntivi che spesso possono essere funzioni dinamiche. 

Mentre il comportamento predefinito e la configurazione di base dovrebbero soddisfare la maggior parte degli utenti, se hai bisogno di funzionalità e personalizzazioni più avanzate, c'è un'ampia documentazione ed esempi su come procedere.

Negli ultimi due anni, React è cresciuto in popolarità. In effetti, sul mercato sono disponibili numerosi articoli disponibili per l'acquisto, la revisione, l'implementazione e così via. Se stai cercando risorse aggiuntive intorno a React, non esitare a verificarle.