Utiliser des tables dans React : Partie 1

L'un des éléments d'interface utilisateur les plus couramment utilisés pour présenter des données est un tableau. Il s'avère qu'il y a beaucoup de choses que vous devez contrôler lorsque vous utilisez des tableaux, telles que :

• Définir les colonnes et les en-têtes
• Divers formats de cellules (texte, chiffres, cases à cocher)
• Redimensionner
• Filtre
• Croissance dynamique
• Style

Dans cette série en deux parties, vous découvrirez les tenants et les aboutissants de l'utilisation de données tabulaires dans React à l'aide du composant React Bootstrap Table. Vous serez en mesure de créer facilement des formulaires complexes d’aspect professionnel, avec la possibilité de personnaliser chaque aspect.

Commencer

​

Tout d’abord, vous devez vous familiariser avec React lui-même. Si vous avez besoin d'une introduction à React, Envato Tuts+ propose une excellente série pour vous aider à démarrer avec React. Dans ce tutoriel, nous nous concentrerons sur l'utilisation de React Bootstrap Table2.

Tout d’abord, utilisez create-react-app 命令创建一个 React 应用。您可以在 React 初学者速成课程中了解如何设置 create-react-app.

create-react-app react-table-app

Maintenant, accédez au dossier du projet et installez React Bootstrap Table 2 et Bootstrap.

cd react-table-app
npm install react-bootstrap-table-next --save
npm install --save bootstrap@4.0.0

Créer une table de base

Nous commencerons par un formulaire de base. Nous commençons par importer le composant BootstrapTable et le CSS comme indiqué ci-dessous.

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';
 

Tout d'abord, nous initialisons les variables de données et de colonne, puis attribuons les données au composant BootstrapTable. Les données contiennent les noms de certains personnages de la série comique Arrested Development.

const data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];
const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'value',
  text: 'Product value'
}]; 

Le composant Bootstrap prend les propriétés suivantes.

• keyField
• data
• 列

La méthode

render() affiche un tableau avec trois colonnes : "ID", "Name" et "Value".

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable keyField='id' data={ person } columns={ columns } />
      </div>
    );
  }
}

Pour afficher le tableau, lancez la commande npm start--reload。由 create-react-app La configuration créée surveille votre code et se recompile lorsque vous modifiez quelque chose, vous n'avez donc qu'à l'exécuter une seule fois. Ensuite, chaque changement est automatiquement reflété.

Compiled successfully!

You can now view my-table-app in the browser.

  Local:            https://localhost:3002
  On Your Network:  http://192.168.43.206:3002

Note that the development build is not optimized.
To create a production build, use npm run build.

Les résultats sont les suivants :

Veuillez noter que chaque colonne a la même largeur.

Utiliser des colonnes

Vous pouvez contrôler de nombreux aspects de vos colonnes. En particulier, les largeurs de colonnes peuvent être spécifiées en unités absolues, en pourcentages ou non. La largeur des colonnes non spécifiées correspond au reste après division égale. Par exemple, pour notre table de base, nous précisons les colonnes comme suit :

• Première colonne : 20%
• Deuxième colonne : 60%
• La troisième colonne : 20%

Vous pouvez également gérer l'alignement du texte et des colonnes ainsi que les styles d'en-tête et de colonne. Voici un exemple de la manière de spécifier différentes largeurs de colonnes, alignement du texte et styles personnalisés :

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
}, {
  dataField: 'name',
  text: 'Product Name',
  sort: true,
  headerStyle: (colum, colIndex) => {
          return { width: '60%', textAlign: 'center' };
        }
}, {
  dataField: 'value',
  text: 'Product value',
  headerStyle: (colum, colIndex) => {
          return { width: '20%', textAlign: 'center' };
        }
  
}]; 

Le tableau ressemble maintenant à ceci :

Concevez votre formulaire

Vous savez déjà comment styliser des colonnes et des en-têtes individuels, mais le style peut aller encore plus loin. React Bootstrap Table 2 offre de nombreuses options de personnalisation. Tout d’abord, vous ajoutez simplement l’attribut striped 和 hover 属性添加到 BootstrapTable au composant

pour obtenir une couleur d’arrière-plan alternative pour chaque ligne.

striped 和 hoverAppliquons l'attribut

à notre table.

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        keyField='id'
        data={ person }
        columns={ columns } 
        />
      </div>
    );
  }
}

Découvrez comment styliser différentes colonnes avec différentes couleurs.

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc }
}, {
  dataField: 'value',
  text: 'Product value',
  style: { backgroundColor: #fed9b7 }
}]; 

Tri des tables

columns 定义中提供 sort: trueReact Bootstrap Table 2 permet le tri des colonnes. Cela se fait via l'attribut

.

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  style: { backgroundColor: #00afb9 }
}, {
  dataField: 'name',
  text: 'Product Name',
  style: { backgroundColor: #fdfcdc },
  sort: true
}, {
  dataField: 'value',
  text: 'Product value',
      style: { backgroundColor: #fed9b7 }
}]; 

Sélectionnez la ligne

selectRowAprès avoir placé les données dans le tableau, vous devrez peut-être sélectionner certaines lignes pour y effectuer certaines opérations. React Bootstrap Table 2 propose diverses options de sélection. Toutes les options sont organisées dans un objet que vous pouvez transmettre au composant en tant qu'attribut

. Voici quelques options de sélection :

Mode radio (bouton radio)
Mode de sélection multiple (case à cocher)
Largeur de sélection de colonne configurable
Sélectionner sur clic de ligne : Par défaut, vous devez cliquer sur le sélecteur (bouton radio ou case à cocher)
Masquer les colonnes de sélection (utile si la sélection est vraie lors du clic sur la ligne)
Modifier la couleur d'arrière-plan sélectionnée
Ligne sélectionnée initiale
Crochet de sélection (sur une seule ligne ou lors de la sélection de toutes les lignes).

Les composants suivants illustrent bon nombre de ces options :

Autres bibliothèques pour les tables de données dans React

Explorons quelques autres bibliothèques de tables React open source.

Virtualisation React

react-virtualized est idéal pour afficher efficacement de grandes quantités de données lors du rendu de grandes listes et de données tabulaires. 🎜

react-virtualized utilise une technologie appelée rendu virtuel pour afficher efficacement de grandes quantités de données. Le rendu virtuel ne restitue que ce qui est visible. Par exemple, si vous avez une grande liste avec un millier d'éléments, React-Virtualized n'affichera qu'une petite partie des données (données qui correspondent à l'écran) à un moment donné jusqu'à ce que l'utilisateur fasse défiler pour afficher plus de données. Les autres fonctionnalités incluent :

• Prend en charge le rendu des grilles, des listes, des tableaux, de la maçonnerie et des collections
• Possibilité d'ajuster automatiquement la taille des composants
• Possibilité d'afficher les éléments dans l'ordre inverse
• Possibilité de personnaliser les classes et les styles CSS

Tableau de réaction

react-table est une bibliothèque open source légère qui permet des grilles de données rapides et évolutives pour React. Il prend également en charge les crochets. Certaines de ses meilleures fonctionnalités incluent :

• Hautement personnalisable
• Prend en charge le tri, les filtres, la sélection de lignes, le tri de colonnes et l'expansion de lignes
• API entièrement contrôlable
• Animé et virtuel
• Redimensionnable

Grille de données React

React Data Grid est une autre bibliothèque open source qui utilise Bootstrap et est idéale pour éditer des tableaux. Il possède également une interface utilisateur étonnante. Les fonctionnalités incluent :

• Tri, recherche, filtrage et regroupement des colonnes
• Possibilité de modifier les colonnes
• Développez les colonnes pour afficher plus de données

Conclusion

Dans ce didacticiel, nous avons créé une application React simple à l'aide de create-react-app, ajouté React-bootstrap-table2, rempli le tableau avec des données, traité les colonnes, stylisé le tableau et sélectionné les lignes.

Dans la partie suivante, nous continuerons ce voyage avec l'extension des lignes, l'ajout de lignes, la suppression de lignes, ainsi que la pagination, l'édition de cellules et la personnalisation avancée. restez à l'écoute.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!