Data Table Row Animation
Vrai tableau HTML dont les lignes modifiées glissent en place puis s'illuminent une à une ; surlignage au survol.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le composant habille un <table class="dtr-table"> ordinaire : légende <caption>, en-têtes <th scope="col">, lignes dans le <tbody>. Les lignes sont séparées de 3 px (border-spacing), chaque cellule a un fond très léger, la première est en gras et la dernière alignée à droite. Les classes dtr-up et dtr-down posées sur une cellule la colorent en vert ou en rouge.
Un MutationObserver surveille le <tbody> : texte d'une cellule réécrit, ligne ajoutée ou contenu remplacé. Les lignes touchées dans un même bloc de code sont regroupées, puis elles rejouent ensemble l'animation dtr-slide (arrivée depuis 20 px à gauche, 0,5 s) et une lueur indigo passe sur leurs cellules (dtr-glow, 0,6 s) de ligne en ligne, avec 100 ms d'écart, dans l'ordre du tableau.
Le tableau n'a donc besoin d'aucune fonction : vous mettez à jour vos cellules comme d'habitude (td.textContent = …, tbody.innerHTML = …, insertRow) et seules les lignes modifiées s'animent. Le script ne trie pas et ne déplace pas les lignes.
À la première apparition à l'écran, toutes les lignes glissent en place et la lueur les parcourt ; avant cela elles sont masquées pour que l'arrivée se voie.
Accessibilité
- Un vrai tableau : légende, en-têtes de colonnes et cellules sont de vraies balises ; un lecteur d'écran annonce le nom du tableau, le nombre de lignes et l'en-tête de chaque cellule.
- Vert et rouge doublés d'un signe :
dtr-upetdtr-downne changent que la couleur ; écrivez toujours « + » ou « − » dans la cellule pour les personnes qui ne distinguent pas ces teintes. - Mouvement réduit : sous
prefers-reduced-motion: reduce, aucune ligne ne glisse ni ne s'illumine ; elles sont visibles dès le départ et les nouvelles valeurs s'affichent simplement. - Survol seulement décoratif : le fond indigo au survol aide l'œil à suivre une ligne, il ne déclenche rien ; les lignes ne prennent pas le focus.
Compatibilité navigateur
Tableau HTML, animations CSS, MutationObserver, IntersectionObserver. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : à 150 ms d'une modification, la ligne touchée est à mi-chemin (opacité vers 0,5, décalage vers −10 px) ; deux tableaux indépendants dans la même page, 390 px, fond blanc, aucune erreur JS.
Sans JavaScript, le tableau s'affiche entièrement, sans animation. Sans IntersectionObserver, les lignes sont visibles d'emblée et seules les mises à jour s'animent.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0249-root">
<table class="dtr-table">
<caption class="dtr-caption">Points de la semaine</caption>
<thead>
<tr>
<th scope="col">Équipe</th>
<th scope="col">Points</th>
<th scope="col">Évolution</th>
</tr>
</thead>
<tbody>
<tr><td>Ambre</td><td>1 284</td><td class="dtr-up">+2,4 %</td></tr>
<tr><td>Cobalt</td><td>1 156</td><td class="dtr-up">+1,8 %</td></tr>
<tr><td>Corail</td><td>982</td><td class="dtr-down">−0,5 %</td></tr>
<tr><td>Lagon</td><td>874</td><td class="dtr-up">+3,1 %</td></tr>
<tr><td>Lilas</td><td>761</td><td class="dtr-down">−1,2 %</td></tr>
</tbody>
</table>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Contenu du tableau (HTML) | 5 équipes fictives, 3 colonnes | Mettez vos propres en-têtes et lignes ; le nombre de colonnes est libre, la dernière est alignée à droite. |
Classes dtr-up / dtr-down (HTML, sur une cellule) |
— | Colore la cellule avec --dtr-up ou --dtr-down. |
--dtr-flash, --dtr-hover (CSS) |
indigo 20 %, indigo 12 % | Couleur de la lueur après une mise à jour et du surlignage au survol. |
--dtr-stagger (CSS) |
.1s | Écart entre deux lignes qui s'animent ensemble. |
--dtr-cell, --dtr-text, --dtr-head (CSS) |
blanc 3 %, blanc 80 %, blanc 40 % | Fond des cellules, texte et en-têtes ; à remplacer sur fond clair. |
--dtr-up, --dtr-down (CSS) |
#10b981, #ef4444 | Couleurs des hausses et des baisses. |
--dtr-max-width (CSS) |
420px | Largeur maximale du tableau ; none pour occuper tout le conteneur. |
--dtr-bg, --dtr-min-height (CSS) |
#0a0a0f, 300px | Fond et hauteur minimale de la racine. |
FAQ
ligne.cells[1].textContent = '1 302') ou remplacez le contenu du <tbody>. Le script repère les lignes modifiées et les anime ; il n'y a rien d'autre à appeler. Une ligne dont le texte reste identique n'est pas animée si vous ne la touchez pas.<tbody> dans le nouvel ordre ; chaque ligne rejouera son arrivée.Intl.NumberFormat dans la langue de la page) ; les chiffres ont tous la même largeur (tabular-nums), les colonnes ne bougent donc pas quand ils changent.
