38 lines
2.1 KiB
Markdown
38 lines
2.1 KiB
Markdown
# freeDatas2HTML
|
|
|
|
Affichage et manipulation de listes données côté client en TypeScript/JavaScript.
|
|
|
|
## Le projet
|
|
|
|
Des données sont déjà listées dans une page HTML ou sont accessibles via une API ou encore un fichier présent "localement".
|
|
Ces données peuvent être stockées en CSV, JSON ou autres formats.
|
|
Nous souhaitons pouvoir les afficher, filtrer, classer ou paginer en agissant uniquement côté client, sans nouvel appel à la source des données.
|
|
|
|
L'esprit est proche du projet [DataTables](https://www.datatables.net/), mais sans dépendances à jQuery.
|
|
|
|
Si le code source de freeDatas2HTML est écrit en TypeScript, une version compilée en JavaScript natif ("Vanilla") est disponible.
|
|
|
|
De même l'idée est de rester libre du rendu des données en n'imposant pas de CSS et en proposant les diverses fonctionnalités en options.
|
|
|
|
## La première version
|
|
|
|
La première version se contente de récupérer et parser des données présentes dans un fichier CSV via un appel Ajax.
|
|
Les données trouvées sont affichées dans un tableau. En option, des colonnes peuvent être indiquées pour filtrer les données et/ou les classer.
|
|
Il est possible de fournir des fonctions spécifiques pour classer les données de certaines colonnes.
|
|
Il est également possible de paginer les résultats ou encore de modifier l'affichage des données (par défaut un tableau).
|
|
|
|
Le tout **en options**, le développeur final devant pouvoir adapter le module à son besoin.
|
|
|
|
Il reste à ajouter :
|
|
- la possibilité d'utiliser des sources/formats différents qu'un fichier CSV pour extraire les données.
|
|
|
|
## Tests et exemples
|
|
|
|
L'utilisation de TypeScript élimine déjà pas mal d'erreurs.
|
|
Le code est ensuite testé via [Karma.js](https://karma-runner.github.io) et [Jasmine.js](https://jasmine.github.io/) sur des navigateurs Firefox et Chromium.
|
|
Un premier exemple d'utilisation est présent dans le répertoire "public".
|
|
|
|
## Dépendances en production
|
|
|
|
- [Papa Parse](https://www.papaparse.com/) est utilisé pour parser les données CSV.
|
|
- [natural-orderby](https://yobacca.github.io/natural-orderby/#/) pour classer les données de manière plus naturelle. |