Travailler avec des tables dans React, deuxième partie

Vue d'ensemble

Ceci est la deuxième partie d'une série en deux parties sur React-Bootstrap-Table. Dans la première partie, nous avons créé une application React simple à l'aide de react-create-app, ajouté à React-Bootstrap-Table, complété un tableau avec des données, traité des colonnes, stylisé le tableau et sélectionné les lignes.. 

Dans cette partie, nous allons continuer le voyage en développant des lignes, en ajoutant des lignes, en supprimant des lignes et en couvrant la pagination, la modification de cellules et la personnalisation avancée..

Lignes en expansion

C’est l’une des fonctionnalités les plus intéressantes de React-bootstrap-table. Lors de l'affichage de données tabulaires, il est souvent utile de voir des données supplémentaires sur une ou deux lignes, mais vous ne pouvez pas afficher toutes les données pour toutes les lignes.. 

Une option pour résoudre le problème consiste à afficher des info-bulles, mais les info-bulles nécessitent de survoler la zone cible avec la souris et vous ne pouvez voir qu'une info-bulle à la fois. L'extension des lignes vous permet d'afficher des données supplémentaires pour chaque ligne dans un type de tiroir qui reste étendu aussi longtemps que vous le souhaitez, et vous pouvez les réduire lorsque vous avez terminé. Vous pouvez développer autant de lignes que vous le souhaitez en même temps. Voici comment faire avec React-bootstrap-table. 

La carte de l’amour contient des relations entre des personnages du développement arrêté: Gob aime Marta et Buster aime Lucile 2. Le isExpandable () fonction contrôle quelles lignes sont extensibles. Dans ce cas, il retourne vrai pour les lignes dont le nom du personnage est dans la carte d'amour. le expandRow () la fonction retourne un composant quand une ligne est développée. 

Le composant renvoyé est affiché sous la ligne jusqu'à ce que celle-ci soit réduite. La configuration de l'expansion des lignes est un peu délicate. Certaines options ne sont que des accessoires sur le composant BootstrapTable. 

Les options de colonne expand sont un objet, puis il existe un accessoire appelé options qui contient des options supplémentaires d’extension de ligne telles que expandRowBgColor et en expansion. Ce serait beaucoup plus simple s'il n'y avait qu'un seul accessoire appelé expandRowProp qui contenait toutes les options (comme le selectRowProp).

importer Réagir, Composant à partir de 'réagir' importer BootstrapTable, TableHeaderColumn à partir de 'react-bootstrap-table' importer '… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. css 'const loveMap = Gob:' Martha ', Buster:' Lucile 2 ', function estExpandableRow (ligne) ligne de retour [' nom ']] dans loveMap;  function expandRow (row) return ( 
row ['name'] aime loveMap [row ['name']].
 )  class Table5 extend Component render () const options = expandRowBgColor: 'pink', en développant: [1] // initialement développé return ( 
   ID   prénom   Valeur   
 ) exportation par défaut Table5

Pagination

Jusqu'ici, nous n'avons affiché que trois lignes de données. Les tableaux sont conçus pour afficher un grand nombre de données qui ne tiennent pas nécessairement sur l'écran en même temps. C'est là qu'intervient la pagination. React-bootstrap-table prend en charge de nombreuses options de pagination.. 

Remplissons notre tableau avec 100 éléments, qui seront dix pages de dix éléments chacun. Nous allons utiliser une fonction getData () qui renvoie un tableau de 100 objets avec les identifiants, noms et valeurs basés sur leur index.. 

Spécifions également la page à afficher initialement (4), personnalisons le texte des pages prev, next, first et last (à l'aide des flèches Unicode pour plus de fraîcheur) et fournissons enfin une fonction personnalisée appelée showTotal () pour afficher le nombre total d'éléments. Notez que l'attribut permettant de contrôler le bouton de la page précédente s'appelle "prePage" et non "prevPage" (cela m'a été obtenu). Toutes les options de pagination vont dans l'attribut général "options" de la table. 

importer Réagir, Composant à partir de 'réagir' importer BootstrapTable, TableHeaderColumn à partir de 'react-bootstrap-table' importer '… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. css 'fonction getData () var data = [] pour (var i = 0; i < 100; ++i)  data[i] = id: i, name: 'item_' + i, value: i  return data  function showTotal()  return 
Il y a 100 articles au total
  class Table6 étend Component render () const options = page: 4, prePage: '', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: showTotal return ( 
   ID   prénom   Valeur   
 ) export par défaut Table6

Ajout et suppression de lignes

Jusqu'ici, nous avons utilisé la table pour afficher des informations de différentes manières. Mais les tableaux peuvent être utilisés comme interface utilisateur pour manipuler des données. Voyons comment ajouter et supprimer des lignes d'une table. 

Les attributs clés sont insertRow et Supprimer la ligne. Lorsque vous les spécifiez, les boutons "Nouveau" et "Supprimer" sont ajoutés. Si vous cliquez sur le bouton "Nouveau", une boîte de dialogue modale s'ouvre et vous permet d'ajouter de nouvelles lignes. Si vous cliquez sur le bouton "Supprimer", toutes les lignes sélectionnées sont supprimées. Pour supprimer des lignes, vous devez bien sûr activer la sélection de lignes. Vous pouvez également attacher des fonctions de hook appelées après l'ajout ou la suppression de lignes..

importer Réagir, Composant à partir de 'réagir' importer BootstrapTable, TableHeaderColumn à partir de 'react-bootstrap-table' importer '… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. css 'function onInsertRow (row) let newRowStr = "pour (const prop dans row) newRowStr + = prop +': '+ row [prop] +' \ n ' alert (' Vous avez inséré: \ n '+ newRowStr ) function onDeleteRow (rowKeys) alert ('Vous avez supprimé:' + rowKeys) classe Table7: Component render () const options = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow // Supprime les lignes que vous pouvez sélectionner rows const selectRowProp = mode: 'case à cocher' return ( 
   ID   prénom   Valeur   
 ) export par défaut Table7

Modification de cellule

Une autre forme de manipulation de données est la modification sur place (modification de cellule, par exemple). La modification de cellule peut être déclenchée par un clic ou un double-clic. L'édition de cellule est contrôlée par l'attribut "cellEdit". En plus du mode, vous pouvez spécifier des lignes non modifiables et des fonctions de raccordement. 

Dans le code suivant, le nonEditableRows la fonction retourne simplement la clé de ligne 3, mais pourrait utiliser une logique plus sophistiquée.

importer Réagir, Composant à partir de 'réagir' importer BootstrapTable, TableHeaderColumn à partir de 'react-bootstrap-table' importer '… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. css 'class Table8 étend Component render () const cellEditProp = mode:' cliquez ', //' dbcliquez 'pour déclencher en double-cliquant sur nonEditableRows: function () return [3];   revenir ( 
   ID   prénom   Valeur   
 ) exportation par défaut Table8

Exporter vos données

Parfois, il ne suffit pas d’afficher vos données et de les utiliser dans une interface Web, vous devez les utiliser et les transmettre à d’autres outils. La façon de le faire avec React-bootstrap-table est très simple. Vous ajoutez simplement l'attribut exportCSV (et éventuellement un nom de fichier) et un bouton d'exportation est ajouté. Lorsque vous cliquez sur le bouton, cela vous permet d’enregistrer vos données dans un fichier CSV..

importer Réagir, Composant à partir de 'réagir' importer BootstrapTable, TableHeaderColumn à partir de 'react-bootstrap-table' importer '… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. La classe Table9 étend le composant render () return ( 
   ID   prénom   Valeur   
 ) exportation par défaut Table9

Voici les données exportées de notre petite table:

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

Personnaliser toutes les choses

Nous avons couvert beaucoup de matériel, mais React-bootstrap-table en a beaucoup plus. Pratiquement, chaque aspect peut être personnalisé. Lisez la documentation complète sur la personnalisation d'un tableau..

Voici une liste des pièces personnalisables:

• Cellule
• Barre d'outils
• Insérer un modal
• Pagination
• Filtre de colonne
• Modification de cellule
• Colonne de sélection de ligne

Conclusion

React-bootstrap-table emballe un puissant coup de poing. Il fournit dès le départ une interface utilisateur agréable pour afficher, rechercher et manipuler des données tabulaires. L'API est très cohérente - les principales fonctionnalités peuvent être activées en spécifiant un attribut simple et éventuellement personnalisées avec des attributs supplémentaires qui peuvent souvent être des fonctions dynamiques. 

Alors que le comportement par défaut et la configuration de base devraient satisfaire la plupart des utilisateurs, si vous avez besoin de fonctionnalités plus avancées et de personnalisation, il existe une documentation abondante et des exemples pour vous aider..

React a acquis une popularité croissante au cours des deux dernières années. En fait, un certain nombre d’articles sur le marché sont disponibles à l’achat, à l’examen, à la mise en oeuvre, etc. Si vous recherchez des ressources supplémentaires autour de React, n'hésitez pas à les consulter..