33 lines
2.0 KiB
Markdown
33 lines
2.0 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 par filtrer les données.
|
|
Pour parser les données CSV, [Papa Parse](https://www.papaparse.com/) est utilisé.
|
|
|
|
Cette première version est fonctionnelle, même s'il reste à revoir le classement par ordre alphabétique des filtres pouvant poser un souci si des colonnes contiennent des nombres, des dates, etc.
|
|
|
|
Ensuite ajouter la possibilité de classement sur certaines colonnes et la pagination, le tout en options, le développeur final devant pouvoir adapter le module à son besoin. Et puis s'attaquer aux autres sources/formats possibles pour les données...
|
|
|
|
Bref, il reste beaucoup de choses à faire !
|
|
|
|
## 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". |