Fab_Blab
/
FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity
Affichage de données pouvant provenir de différentes sources (fichier, API...) avec différents formats (CSV, JSON, HTML...) et possibilité de trier, filtrer ou encore paginer les données. https://freedatas2html.le-fab-lab.com
46 Commits 1 Branch 0 Tags 1.2 MiB
TypeScript 43.2%
JavaScript 40.1%
HTML 16.6%
Go to file
Fabrice PENHOËT 3789606764 Mise à niveau de webpack-dev-server vers 4.1.0 + évolution configuration webpack. 2021-09-03 17:33:00 +02:00
public Ajout fonctionnalité permettant de classer les données via les colonnes + adaptation exemple et nouvelle compilation du code en JS 2021-09-02 18:15:15 +02:00
src Ajout fonctionnalité permettant de classer les données via les colonnes + adaptation exemple et nouvelle compilation du code en JS 2021-09-02 18:15:15 +02:00
tests Ajout fonctionnalité permettant de classer les données via les colonnes + adaptation exemple et nouvelle compilation du code en JS 2021-09-02 18:15:15 +02:00
.gitignore Ajout du fichier .gitignore 2021-08-05 18:22:01 +02:00
LICENSE Initialisation du projet 2021-08-05 11:05:05 +02:00
README.md Mise à jour du texte d'accueil. 2021-09-02 18:26:17 +02:00
karma.conf.js Modification noms fichier, variables, etc. suite modification nom du projet. 2021-08-30 18:06:59 +02:00
package-lock.json Mise à niveau de webpack-dev-server vers 4.1.0 + évolution configuration webpack. 2021-09-03 17:33:00 +02:00
package.json Mise à niveau de webpack-dev-server vers 4.1.0 + évolution configuration webpack. 2021-09-03 17:33:00 +02:00
tsconfig.json Initialisation du projet 2021-08-05 11:05:05 +02:00
webpack.config.js Mise à niveau de webpack-dev-server vers 4.1.0 + évolution configuration webpack. 2021-09-03 17:33:00 +02:00

README.md

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, 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 et/ou les classer.

Il reste à ajouter :

  • la possibilité de fournir des fonctions spécifiques pour classer les données de certaines colonnes.
  • la possibilité de paginer les données.
  • la possibilité d'utiliser des sources/formats différents qu'un fichier CSV pour extraire les données.
  • la possibilité de spécifier un code HTML autre qu'un tableau pour lister les données.

Le tout en options, le développeur final devant pouvoir adapter le module à son besoin.

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 et Jasmine.js 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 est utilisé pour parser les données CSV.
  • natural-orderby pour classer les données de manière plus naturelle.