Nativetable pour gérer vos tableaux en Javascript

Il y a quelques temps, une collègue/amie m'a mis au défi de (re)developper un système de gestion de tableaux HTML en Javascript.

Pour la petite histoire, elle travaillait sur un projet où un plugin de ce genre est utilisé. Elle avait des problèmes depuis plusieurs jours (6 jours) avec les filtres "complexes". Et je crois que je l'ai un peu agacé à lui dire de réécrire elle-même cette fonctionnalité au lieu de perdre son temps à lire une documentation quasi inexistante pour ce qu'elle cherchait.

Bien-sûr je lui ai répété plusieurs fois la chose et pour bien m'enfoncer moi-même, je lui ai dit que ce serait mieux si elle le faisait sans jQuery. Parce que jQuery c'est nul, c'est beaucoup moins utile qu'avant, tout ça, tout ça...

C'est là qu'elle m'a dit que ce n'était pas possible et que je n'avais qu'à le faire moi-même : elle n'est pas trop rigolote le vendredi soir.

Donnez moi vos datas, j'en fait un tableau

Je vous présente donc Nativetable, le nouveau né. Simple petit plugin de gestion de tableau, il ne fait pas grand chose à part afficher vos données.

Il fait quand même quelques trucs de base comme:

• paginer votre tableau
• trier le tableau par rapport à une colonne de façon ascendante ou descendante
• filtrer les lignes de votre tableau en fonction de critères pré-définis
• afficher ou cacher les colonnes de votre choix

Nativetable a été pensé pour être le plus simple possible, tous les paramètres sont passables dans un objet options du constructeur et modifiables tout au long de la vie du tableau.

Il possède des attributs pour l'accès à la source (les données) à ses différents états lors du traitement :

• nt.sources pour l'accès aux données non modifiées
• nt.filtered pour l'accès aux données filtrées
• nt.sorted pour l'accès aux données triées
• nt.paginated pour l'accès aux données paginées

Et enfin pour rafraichir l'affichage, une méthode est disponible, il suffit d'écrire nt.draw().

Conclusion

Nativetable ne fait pas tout ce que font ses homologues mais il a quand même quelques avantages.

Sa simplicité, sa légèreté font déjà de lui un petit outil sympa à utiliser. En plus il est entièrement natif, pas de dépendance à jQuery ou d'autres libraries tiers.

Nativetable est écrit en ES6, pour ceux qui n'ont plus dormi depuis juin 2015.

nativetable-v1.0.min.js - 9.23 KB

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.