Composant Table avec RiotJS

Cet article traite de la création d'un composant Table avec RiotJS, en utilisant BeerCSS. Avant de commencer, assurez-vous d'avoir une application de base RiotJS, ou lisez mes articles précédents. n'hésitez pas à consulter la documentation de Riot si nécessaire : https://riot.js.org/documentation/ Une Table est un élément complexe et riche avec de nombreux styles et actions. L'article vise à créer un composant Table avec un design BeerCSS, affichant une liste d'objets. Ensuite, personnalisez les cellules avec des éléments spéciaux (chips, cases à cocher, etc.). Base du composant Table Tout d'abord, créez un nouveau fichier nommé c-table.riot dans le dossier des composants. Le préfixe c- signifie "composant", une convention de nommage utile et une bonne pratique. Écrivez le code HTML suivant dans ./components/c-table.riot (le CSS a été trouvé dans la documentation BeerCSS): { col } { val } { header } thead, tfoot > tr > th::first-letter { text-transform:capitalize; } Décomposons le code : Les balises et définissent une balise racine personnalisée, portant le même nom que le fichier. Vous devez l'écrire ; sinon, cela pourrait créer des résultats inattendus. Utiliser la balise comme balise racine ou redéfinir des balises HTML natives est une mauvaise pratique, donc commencer par c- est un bon nommage. Le composant peut recevoir une liste d'objets items en tant qu'attribut, et peut être utilisé dans le composant avec props?.items. Pour créer des cellules, l'expression Riot each est utilisée pour parcourir les éléments : Une première boucle est utilisée pour chaque balise de ligne de tableau avec . L'item est un objet de la liste. Une deuxième boucle enfant est utilisée pour chaque cellule de tableau avec { val }. L'expression Object.values() renvoie un tableau des valeurs d'un objet donné. Pour l'en-tête du tableau, il utilise les noms de key du premier élément de la liste props.items : La fonction Object.keys est utilisée pour renvoyer un tableau de toutes les clés d'objet de l'élément donné, comme { col }. BeerCSS permet la création d'un pied de page, qui suit la même logique que l'en-tête : accéder au premier élément de la liste, obtenir une liste de clés avec Object.keys et créer une boucle avec l'expression Riot each. Le pied de page est affiché conditionnellement si la propriété props.footer existe. La première lettre de chaque en-tête est capitalisée grâce à l'expression CSS : th::first-letter { text-transform:capitalize; }. Enfin, BeerCSS fournit des classes utiles pour changer le style du tableau, par exemple, ajouter des rayures ou des bordures ou changer l'alignement. Les classes sont injectées conditionnellement avec l'expression Riot : { props?.stripes ? 'stripes ' : null } signifiant que si la propriété props.stripes existe, la classe stripes est ajoutée. Enfin, chargez et instanciez le c-table.riot dans une page nommée index.riot : Riot + BeerCSS import cTable from "./components/c-table-full.riot" export default { components: { cTable }, state: { animals: [ { id: 1, name: 'African Elephant', species: 'Loxodonta africana', diet: 'Herbivore', habitat: 'Savanna, Forests', enabled: false }, { id: 2, name: 'Lion', species: 'Panthera leo', diet: 'Carnivore', habitat: 'Savanna, Grassland', enabled: true }, { id: 3, name: 'Hippopotamus', species: 'Hippopotamus amphibius', diet: 'Herbivore', habitat: 'Riverbanks, Lakes', enabled: false } ] } } Détails du code : Les composants sont importés avec import cTable from "./components/c-table.riot"; puis chargés dans l'objet Riot components:{}. Le tableau est instancié avec dans le HTML. Une liste d'animaux est fournie au tableau, grâce à l'attribut items : items={ state.animals } ; le tableau créera automatiquement les en-têtes, les lignes et les cellules ! ✅ Voici le HTML généré : Composant Table avec cellules personnalisées Afficher des composants personnalisés dans les cellules est souvent nécessaire pour les applications de producti

     class="
                { props?.leftAlign ? 'left-align ' : null }
                { props?.centerAlign ? 'center-align ' : null }
                { props?.rightAlign ? 'right-align ' : null }
                { props?.stripes ? 'stripes ' : null }
                { props?.outlined ? 'border ' : null }
                { props?.scroll ? 'scroll' : null }"
        >
         class="{props?.scroll ? ' fixed' : null }">
            
                 each={ col in Object.keys(props?.items?.[0])}>{ col }
            
        
        
             each={ item in props?.items}>
                 if={ item } each={ val in Object.values(item) }>
                    { val }
                
            
        
         if={ props?.footer === true } class="{props?.scroll ? ' fixed' : null }">
            
                 each={ header in Object.keys(props?.items?.[0])}>{ header }
            
         
    
    

     style="width:800px;padding:20px;">
         style="margin-bottom:20px">Riot + BeerCSS
         items={ state.animals } />
    

Détails du code :

• Les composants sont importés avec import cTable from "./components/c-table.riot"; puis chargés dans l'objet Riot components:{}.
• Le tableau est instancié avec dans le HTML.
• Une liste d'animaux est fournie au tableau, grâce à l'attribut items : items={ state.animals } ; le tableau créera automatiquement les en-têtes, les lignes et les cellules ! ✅

Voici le HTML généré :

Composant Table avec cellules personnalisées

Afficher des composants personnalisés dans les cellules est souvent nécessaire pour les applications de production, comme des cases à cocher, ou même des boutons.

Cette capacité est activée grâce aux Slots: La balise injecte des modèles HTML personnalisés dans un composant enfant depuis son parent. Modifions la boucle suivante dans c-table.riot:

 each={ val in Object.values(item) }>
  { val }

Remplacez-la par l'expression suivante :

 each={ el in Object.entries(item) }>
    name="item" item={ item } column={ el?.[0] } value={ el?.[1] }>
    if={ slots.length === 0 }>
      { el?.[1] }
   

Expliquons ce qui se passe ici :

• Au lieu d'utiliser Object.values, on utilise Object.entries pour convertir un objet en une liste de [key, value]. Par exemple, [{key: 1, name: "blue"}] renvoie [["key", 1], ["name", "blue"]].
• Un slot est créé pour chaque cellule : .
• Passer des valeurs dynamiques aux slots s'appelle des Higher Order Components: Tous les attributs définis sur les balises de slot seront disponibles dans leurs modèles HTML injectés. Dans notre cas, quatre attributs sont créés :
  • Le slot a un nom optionnel, une convention de nommage Riot, sans le définir, il aurait le nom default. Il n'est pas possible de définir le nom dynamiquement.
  • L'objet item de la boucle de ligne est passé dans l'attribut item du slot : Il sera accessible sur le composant passé en tant que slots !.
  • La clé de l'élément est passée à l'attribut column du slot grâce à column={ el?.[0] }.
  • La valeur de l'élément est passée à l'attribut value du slot grâce à value={ el?.[1] }.
• Si le slot n'existe pas, la valeur de la cellule est imprimée avec . Les directives if peuvent être utilisées avec une balise