Share
L'un des éléments d'interface utilisateur les plus courants pour la présentation de vos données est un tableau. Il s'avère qu'il y a de nombreux aspects à contrôler lorsque vous travaillez avec des tables, tels que:
Dans cette série en deux parties, vous découvrirez les avantages et les inconvénients de l'utilisation de données tabulaires dans React à l'aide du composant React Bootstrap Table. Vous serez capable de créer des tables sophistiquées et professionnelles par défaut avec peu d'effort tout en pouvant personnaliser chaque partie de votre choix..
Je suppose que vous connaissez bien React et que vous allez vous concentrer sur React Bootstrap Table. Envato Tuts + a une grande série sur React que vous pouvez lire en arrière-plan.
En un mot, j'ai utilisé react-create-app pour créer une application vanilla React, puis installé le tableau react-bootstrap-table: npm installer react-bootstrap-table --save.
Il est important d'ajouter le code CSS d'amorçage au fichier public / index.html..
React App
Si vous utilisez WebStorm de JetBrains et que vous souhaitez exécuter les tests, ajoutez --env = jsdom dans votre configuration.
Nous allons commencer avec un tableau de base. Voici un composant de base du tableau. Il importe le BoostrapTable et le TableHeaderColumn de react-bootstrap-table ainsi que le CSS du répertoire dist.
le rendre() La méthode affiche une table avec trois colonnes: "ID", "Nom" et "Valeur". Les données réelles dans la table proviennent de la propriété "data" (this.props.data). Les données contiennent les noms de certains personnages de l'émission hilarante Arrested Development.
importer Réagir, Composant de 'réagir'; import BootstrapTable, TableHeaderColumn à partir de 'react-bootstrap-table'; importer '… /css/Table.css'; import '… /… / node_modules / react-bootstrap-table / css / react-bootstrap-table.css' de la classe Table1 extend Component render () return () export default Table1;ID prénom Valeur
J'ai instancié BasicTable dans la méthode render () de la norme App.js et transmis des données codées en dur:
importer Réagir, Composant de 'réagir'; importer './App.css'; importer Table1 depuis './components/Table1' var data = [id: 1, nom: 'Gob', valeur: '2', id: 2, nom: 'Buster', valeur: '5', id: 3, nom: 'George Michael', valeur: '4']; La classe App étend le composant render () return () export par défaut App;Table de base
Pour voir la table, tapez: npm start. La configuration créée par créer-réagir-app surveille votre code et recompilera chaque fois que vous modifiez quelque chose; vous n'avez donc besoin que d'une exécution; chaque modification sera automatiquement répercutée.
Compilé avec succès! Vous pouvez maintenant voir react-table dans le navigateur. Local: http: // localhost: 3000 / Sur votre réseau: http://192.168.1.136:3000/ Notez que la version de développement n'est pas optimisée. Pour créer une construction de production, utilisez la construction de fil.
Voici le résultat:
Notez que chaque colonne a exactement la même largeur.
Vous pouvez contrôler de nombreux aspects des colonnes. En particulier, les largeurs de colonne peuvent être spécifiées en unités absolues sous forme de pourcentages ou laissées non spécifiées. La largeur de colonne des colonnes non spécifiées est le reste divisé en parts égales. Par exemple, pour une largeur de table de 100 px, une colonne spécifie 15 px, une deuxième colonne indique 25% (25 px) et une troisième colonne spécifie 30% (15 px)..
Deux autres colonnes ne spécifiaient pas de largeur. Les colonnes 1, 2 et 3 utilisaient 70 px ensemble, ce qui laisse 30 px pour les colonnes 4 et 5, qui le diviseront également. Les colonnes 4 et 5 auront chacune une largeur de 15 px. Notez que si la table est redimensionnée, les nombres changeront. Seule la colonne 1 aura toujours une largeur de 15 px.
Les autres colonnes seront calculées en fonction de la largeur de la table. Vous pouvez également gérer l'alignement du texte et des colonnes ainsi que le style des en-têtes et des colonnes. Voici un exemple sur la manière de spécifier différentes largeurs de colonne, alignement de texte et styles personnalisés:
importer Réagir, Composant de 'réagir' importer BootstrapTable, TableHeaderColumn de 'react-bootstrap-table' importer '…… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. css 'class Table2 étend Component render () return () export par défaut Table2ID prénom Valeur
Vous avez vu comment styliser des colonnes et des en-têtes individuels, mais le style peut aller beaucoup plus loin. React-bootstrap-table fournit de nombreuses options pour la personnalisation. Tout d'abord, vous pouvez simplement ajouter les attributs striped et hover au composant BootstrapTable pour obtenir d'autres couleurs d'arrière-plan sur chaque ligne:
Pour styler toutes les lignes, utilisez trClassName:
Si vous voulez avoir vraiment envie, le trStyle peut avoir une fonction. Découvrez le composant de tableau suivant qui attribue un style différent aux lignes dont le nom est "George Michael":
importer Réagir, Composant de 'réagir' importer BootstrapTable, TableHeaderColumn de 'react-bootstrap-table' importer '…… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. css 'function rowClassNameFormat (row, rowIdx) // row est un objet de la ligne entière // rowIdx est l'index de la ligne console.log (row) renvoie la ligne [' name '] ===' George Michael '? "GeorgeMichael-Row": "Autre-Row"; class Table3 étend Component render () return () export par défaut Table3ID prénom Valeur
le GeorgeMichael-Row et Autre rangée Les classes CSS sont définies dans Table.css:
.En-tête de table background-color: #ccc; Couleur bleue; rembourrage: 10px; text-align: left; .GeorgeMichael-Row background-color: prune; .Other-Row background-color: greenyellow;
Une fois que vous avez vos données dans une table, vous souhaiterez peut-être sélectionner certaines lignes afin d'effectuer certaines opérations dessus. React-bootstrap-table offre une grande variété d'options de sélection. Toutes les options sont organisées dans un seul objet que vous transmettez au composant en tant que selectRow attribut. Voici certaines des options de sélection:
Les composants suivants illustrent plusieurs de ces options:
Accentsconagua
importer Réagir, Composant de 'réagir' importer BootstrapTable, TableHeaderColumn de 'react-bootstrap-table' importer '…… /css/Table.css' importer '… /dist/react-bootstrap-table-all.min. css 'function onSelectRow (ligne, isSélectionné, e) if (isSélectionné) alert (' Vous venez de sélectionner '$ ligne [' nom '] ") const selectRowProp = mode:' case à cocher ', cliquez surToSelect: true , non sélectionnable: [2], sélectionné: [1], onSelect: onSelectRow, bgColor: 'gold'; class Table4 extend Component render () return ( ID prénom Valeur ) export par défaut Table4
Dans cette 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 la partie suivante, 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. Restez à l'écoute.
