victor-auffret / oc-14-hrnet-plugin-react-table Goto Github PK

Dans le cadre d'un projet, on m'a demandé de transformer un plugin jquery en plugin react dans le but de pouvoir retirer la dépendance vers jquery. De plus, on m'a demandé de faire en sorte que le code soit réutilisable alors je rend ce plugin disponible pour tous.

Avantages du plugin:

• Vous avez le même visuel que dans jquery mais avec un framework moderne
• Vous pouvez ajouter ce plugin en dépendance de votre projet et l'utiliser comme n'importe quel composant react que vous importez
• Vous avec une documentation en français

Il n'y a cependant pas d'ambition de pousser ce projet plus loin. N'hésitez donc pas à regarder du côté des forks du projet (si il y en a) pour voir si quelqu'un aurait poussé ce projet plus loin.

Vous pouvez consulter le NOTE_VERSION.md pour voir ce qui a été fait.

(haut de page)

Cette section parle de dépendances du projet

(haut de page)

Pour utiliser ce plugin vous devez dans un premier temps l'installer en tant que dépendance via npm.

Vous devez disposer de nodejs avant d'installer le projet.

Un fois nodejs d'installé, vous pouvez utiliser npm pour installer la dépendance. Voici comment installer via npm (adaptez votre commande si vous utilisez pnpm ou yarn):

• npm

  npm install --save git+https://github.com/victor-auffret/oc-14-hrnet-plugin-react-table.git#main

(haut de page)

Afin de respecter les fonctionnalités du plugin jquery de base, j'ai choisi d'implémenter le strict nécessaire pour faire fonctionner le projet. Il y a 3 props à passer en paramètre de la data-table, mais seulement 2 obligatoires.

• data : les données brut à afficher sous forme de tableau
• columns : le nom des colones à afficher (parfois on ne veut pas tout les éléments du tableau de donnée)
• nbElemPerPage : le nombre d'élément à afficher par page, par défaut on a 10, 25, 50 et 100 mais il faut quand même passer un tableau vide en paramètre pour utiliser les valeurs par défaut.

import { useMemo } from 'react';
// import du composant
import { DataTableComponent } from 'oc-14-hrnet-plugin-react-table';
// import moche du css 
import "../../node_modules/oc-14-hrnet-plugin-react-table/dist/style.css";
// la syntaxe classique comporte un bug, ainsi on en peut pas encore utiliser : 
// import 'oc-14-hrnet-plugin-react-table/dist/style.css'
// ça aurait été joli mais pour le moment cette syntaxe ne fonctionne pas.

const ComposantReact = () => {

 // attention de bien reprendre le nom exact des propriétés dans columns
 const data = useMemo(() => {
  return [
   { firstName: "toto", lastName: "dupond", age: 52 },
   { firstName: "titi", lastName: "ronron", age: 41 },
   { firstName: "toto", lastName: "dupont", age: 14 }
  ]
 }, [])

 // Ici, on a choisi de ne pas prendre la colonne "age" donc le tableau aura 2 colonnes et non 3
 const columns = useMemo(() => {
  return [
   { title: 'Prénom', data: 'firstName' },
   { title: 'Nom de famille', data: 'lastName' },
  ]
 }, [])

 // on change le système de pagination pour mettre 5, 10, 20 au lieu de 10, 25, 50 et 100.
 const nbElementsPerPage = useMemo(() => [5, 10, 20], [])

 // on ajoute les 3 props au composant
 return (<div>
  <DataTableComponent data={data} columns={columns} listNbPerPage={nbElementsPerPage} />
 </div>);
}

export { ComposantReact }

Pour plus d'information, vous pouvez regarder le fonctionnement du plugin jquery Documentation Plugin JQuery DataTables

(haut de page)

Pour ce projet, j'aurai pu choisir d'utiliser redux mais j'ai choisi d'utiliser les hook de react et de me passer de nouvelle dépendance pour le projet afin de réduire la dette technique.

J'ai utilisé typescript afin d'avoir des erreurs plus visibles dans le code

J'ai repris le css du plugin jquery afin d'adapter le code jquery en code react sans toucher au css ce qui offre un visuel identique à la version jquery

J'utilise vitejs pour build ce projet ce qui m'a permi de gagner du temps lors du développement. L'une des alternatives possible pour build ce type de composant react est rollup

J'ai utilisé les images de flèche fourni par le plugin jquery, elles se trouvent dans le dossier src/images.

(haut de page)

• ajouter des exemples d'utilisation dans le readme
• gérer le build du css pour importer le css plus facilement sans avoir le "node_module" dans le lien.
• ajouter les notes de version

Si vous voyez des problèmes, consulter les open issues.

(haut de page)

...

(haut de page)

Distributed under the MIT License. See LICENSE for more information.

(haut de page)

Lien du projet: https://github.com/victor-auffret/oc-14-hrnet-plugin-react-table

(haut de page)

Même si j'ai codé seul, il y a beaucoup de documentation qui m'a aidé pour réaliser ce projet.

• Comment faire un bon README
• GitHub
• Comment installer un packet nodejs depuis un repos git plutôt qu npmjs.org

(haut de page)