{"id":11504,"date":"2026-01-06T09:58:54","date_gmt":"2026-01-06T08:58:54","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=11504"},"modified":"2026-01-06T11:41:16","modified_gmt":"2026-01-06T10:41:16","slug":"librairie-handsontable","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=11504","title":{"rendered":"Librairie handsontable"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Librairie Handsontable :  <a href=\"https:\/\/handsontable.com\/\">site commercial<\/a><\/h2>\n\n\n\n<p>Retour d&#8217;exp\u00e9rience sur l&#8217;utilisation et la manipulation de la librairie Handsontable dans deux projets : <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PASSY pour l&#8217;exploration et l&#8217;analyse des segments<\/li>\n\n\n\n<li>SIGraphLab pour l&#8217;exploitation et la s\u00e9lection des colonnes repr\u00e9sentant les variables \u00e0 traiter. <\/li>\n<\/ul>\n\n\n\n<p>Cette page va d\u00e9crire l&#8217;utilisation et la configuration des objets pour permettre de r\u00e9pondre aux besoins fonctionnels des applications. <\/p>\n\n\n\n<p class=\"has-vivid-cyan-blue-color has-text-color has-link-color has-medium-font-size wp-elements-dab1f5eb2082de22261574547bb4c688\">PASSY &#8211; DPFV :<\/p>\n\n\n\n<p>Objectif de la mise en place de cette librairie : permettre de visualiser sous forme de feuille Excel un ensemble d&#8217;informations li\u00e9es aux segments s\u00e9lectionn\u00e9es par l&#8217;utilisateur. Dans cette visualisation plusieurs fonctionnalit\u00e9s recherch\u00e9es sont : possibilit\u00e9 de trier les colonnes dans l&#8217;ordre croissante ou d\u00e9croissant, possibilit\u00e9 de rechercher et de mettre des filtres sur une colonne quelconque, possibilit\u00e9 de d\u00e9clencher des actions \u00e0 partir d&#8217;une cellule contenant des attributs HTML (comme bouton ou autre \u00e9l\u00e9ments).<\/p>\n\n\n\n<p>Illustration : <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"528\" src=\"https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-10-06-25.png\" alt=\"\" class=\"wp-image-11512\" srcset=\"https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-10-06-25.png 701w, https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-10-06-25-300x226.png 300w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/figure>\n<\/div>\n\n\n<p>Insertion des librairies Javascript sp\u00e9cifiques : indication dans les attributs de cr\u00e9ation de l&#8217;objet <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"\/handsontable\/handsontable.full.min.js\"&gt;&lt;\/script&gt;\n&lt;link rel=\"stylesheet\" href=\"\/handsontable\/handsontable.min.css\"&gt;\n&lt;link rel=\"stylesheet\" href=\"\/handsontable\/ht-theme-main.min.css\"&gt; <\/code><\/pre>\n\n\n\n<p>Cr\u00e9ation des fonctions de constructions de l&#8217;objet graphique : Handsontable<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const construction_tableau=function(zone_, liste_noms,contenu ) {\n  const container = document.querySelector('#'+zone_);\n  container.innerHTML=\"\";\n  \/\/ theme name with obligatory ht-theme-* prefix \/\/ 'ht-theme-main' ,\n  hot = new Handsontable(container, {\n    themeName: 'ht-theme-main-dark',\t  \n    height: 400,\n    data: contenu,\n    colHeaders:liste_noms,\n    columns: &#91;\n\t  {data: \"action\", renderer: buttonRenderer, readOnly:true},\n\t  {data: \"exp1\", type: 'text',className:'stylecellule'},\n\t  {data: \"exp2\", type: 'text'},\n\t  {data: \"mot\", type: 'text'},\n\t  {data: \"exp3\", type: 'text'},\n\t  {data: \"exp4\", type: 'text'},\n\t  {data: \"info\", type: 'text'},\t\n\t  {data: \"locuteur\", type: 'text'},\t\n\t  {data: \"sexe\", type: 'text'},\t\n\t  {data: \"tranche\", type: 'text'},\n    ],  \n    rowHeaders: true,\n    columnSorting: true,\n    hiddenColumns: {\n      columns: &#91;6],\n      indicators: true\n    },\n    \/\/outsideClickDeselects: false,\n    contextMenu: true,\n    manualColumnResize:true,\n    dropdownMenu: true,\n    autoWrapRow: true,\n    \/\/autoWrapCol: true,\n    \/\/readOnly : true,\n    stretchH: 'all',\n    filters: true,\n    licenseKey: 'non-commercial-and-evaluation'\t  \/\/ for non-commercial use only\n  });\n  \n}\n\n\n\/\/ ----------------------------------------------------------------------------------------------------------\n\/\/ Gestion et interpr\u00e9tation des donn\u00e9es d\u00e9pos\u00e9es dans la zone de texte sous format csv \n\/\/ ----------------------------------------------------------------------------------------------------------\nfunction processData(zone_table, tab_elem) {\n  let lines = &#91;];\n  tab_elem.forEach( element=&gt;{\n      lines.push(element);\n  });\n  construction_tableau(zone_table, &#91;\"Action\",\"exp1\",\"exp2\",\"mot\",\"exp3\",\"exp4\",\"info\",\"locuteur\",\"sexe\",\"tranche\"],lines);\n} \n \n\/\/ ------------------------------------------------\n\/\/ Renderer personnalis\u00e9 pour le bouton\n\/\/ ------------------------------------------------\nfunction buttonRenderer(instance, td, row, col, prop, value, cellProperties) {\n        td.innerHTML = '';\n        const button = document.createElement('button');\n       \tbutton.innerHTML=\"Analyser\";\n        button.style.cssText = `\n           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n           color: white;\n           border: none;\n           padding: 8px 15px;\n           border-radius: 5px;\n           cursor: pointer;\n           font-weight: bold;\n           font-size: 12px;\n           transition: all 0.3s;\n        `;\n         \/\/ partie \u00e9v\u00e9nementielle   \n         button.onmouseover = function() {\n                this.style.transform = 'scale(1.1)';\n                this.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.4)';\n         }; \n         button.onmouseout = function() {\n                this.style.transform = 'scale(1)';\n                this.style.boxShadow = 'none';\n         };\n         button.onclick = function(e) {\n                e.stopPropagation();\n\t\tconst cellProperties = instance.getCellMeta(row, col);\n\t  \tconst rowData = instance.getSourceDataAtRow(cellProperties.row);\n\t\tdocument.getElementById(\"mydivSonore\").style.display=\"block\";\n\t\tchargement_segment_pour_ecoute(&#91;rowData&#91;\"info\"]], liste_entrees_current);\t\t\t\t\n         };\n            \n         td.appendChild(button);\n         return td;\n }<\/code><\/pre>\n\n\n\n<p>Principe du renderer : redirige vers une fonction type avec les param\u00e8tres d\u00e9finis instance, td, row, col, prop, value, cellProperties permettant de passer les diff\u00e9rents param\u00e8tres associ\u00e9s \u00e0 la cellule. Le param\u00e8tre td va permettre d&#8217;avoir le descripteur de la cellule du tableau. Il suffit de recr\u00e9er un nouvel objet au sens HTML (button, select, input &#8230;.) de lui affecter les propri\u00e9t\u00e9s visuels sp\u00e9cifiques et une gestion \u00e9v\u00e9nementielle. Ensuite \u00e0 l&#8217;aide de la m\u00e9thode appendChild de le greffer dans la cellule correspondante.<\/p>\n\n\n\n<p>Commentaires : sur les diff\u00e9rents attributs attention \u00e0 la manipulation de l&#8217;attribut columns qui doit d\u00e9finir tous les attributs des colonnes, de plus la licenseKey est important pour d\u00e9finir le fait que le site n&#8217;a pas une vocation commerciale si c&#8217;est le cas il faut souscrire \u00e0 une licence. Dans la constitution du tableau il faut penser \u00e0 ins\u00e9rer les ent\u00eates \u00e9galement afin que handsontable puisse r\u00e9partir les donn\u00e9es au bon endroit.<\/p>\n\n\n\n<p>Exemple du tableau transmis \u00e0 la fonction processData <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"866\" height=\"533\" src=\"https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-10-49-09.png\" alt=\"\" class=\"wp-image-11536\" srcset=\"https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-10-49-09.png 866w, https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-10-49-09-300x185.png 300w, https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-10-49-09-768x473.png 768w\" sizes=\"auto, (max-width: 866px) 100vw, 866px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-vivid-cyan-blue-color has-text-color has-link-color has-medium-font-size wp-elements-ac9cf4a8310a638c473b39ed54f201a2\">SIGraphLab : <\/p>\n\n\n\n<p>L&#8217;objectif dans cette application est de permettre lors du chargement du fichier csv de permettre \u00e0 l&#8217;utilisateur de s\u00e9lectionner les variables qu&#8217;il souhaite charger dans son contexte d&#8217;analyse. Les fonctionnalit\u00e9s d&#8217;Handsontable permettent \u00e0 l&#8217;utilisateur de visualiser et de s\u00e9lectionner les colonnes de fa\u00e7on continue ou discontinue pour ensuite les charger dans son contexte. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"466\" src=\"https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-11-03-07.png\" alt=\"\" class=\"wp-image-11547\" srcset=\"https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-11-03-07.png 944w, https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-11-03-07-300x148.png 300w, https:\/\/spgoo.org\/wp-content\/uploads\/2026\/01\/Capture-du-2026-01-06-11-03-07-768x379.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/figure>\n<\/div>\n\n\n<p>Partie impl\u00e9mentation de la librarie dans cette application : <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var hot=null;\n\/\/ Fonction de g\u00e9n\u00e9ration du tableau \nconst construction_tableau=function(zone_, name_tab,liste_noms,contenu ) {\n  const container = document.querySelector('#'+zone_);\n  \/\/ theme name with obligatory ht-theme-* prefix \/\/ 'ht-theme-main' ,\n  hot = new Handsontable(container, {\n    themeName: 'ht-theme-main-dark-auto',\n    height: 400,\n    width: \"95%\",\n    \/\/ other options\n    data: contenu,\n    colHeaders:liste_noms,\n    rowHeaders: true,\n    hiddenColumns: {\n      indicators: true\n    },\n    outsideClickDeselects: false,\n    contextMenu: true,\n    dropdownMenu: true,\n    autoWrapRow: true,\n    autoWrapCol: true,\n    filters: true,\n    licenseKey: 'non-commercial-and-evaluation' \/\/ for non-commercial use only\n  });\n}\n\n\/\/ ----------------------------------------------------------------------------------------------------------\n\/\/ Gestion et interpr\u00e9tation des donn\u00e9es d\u00e9pos\u00e9es dans la zone de texte sous format csv avec le s\u00e9parateur #\n\/\/ ----------------------------------------------------------------------------------------------------------\nfunction processData(allText) {\n  let allTextLines = allText.split(\/\\r\\n|\\n\/);\n  let headers = allTextLines&#91;0].split(separateur);\n  let lines = &#91;];\n  for (var i=1; i&lt;allTextLines.length; i++) {\n    if (allTextLines&#91;i]!=\"\") {\n      \/\/ il faut nettoyer les lignes surtout avec les nombres r\u00e9els \u00e0 mettre 2 digits derriere la virgule\n      let tab=allTextLines&#91;i].split(separateur);\n      let new_tab=&#91;];\n      for (let elem of tab) {\n        if (elem.indexOf(\",\")!=-1) {\n          new_tab.push(parseFloat(elem.replace(\",\",\".\")).toFixed(2));\n        } else {\n          new_tab.push(elem);\n        }\n      }\n      lines.push(new_tab);\n    }\n  }\n  table=construction_tableau(\"zone_table\",\"tab_mots\",headers , lines);\n}\n<\/code><\/pre>\n\n\n\n<p>D&#8217;autres librairies ont \u00e9t\u00e9 \u00e9tudi\u00e9es au pr\u00e9alable de type Datatable, spreadsheet et cr\u00e9ation manuelle , mais avec une impl\u00e9mentation plus difficile et des fonctionnalit\u00e9s moins int\u00e9ressantes que handsontable dans sa version non commerciale. Ce qui nous a conduit \u00e0 opter pour cette librairie.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Librairie Handsontable : site commercial Retour d&#8217;exp\u00e9rience sur l&#8217;utilisation et la manipulation de la librairie Handsontable dans deux projets : Cette page va d\u00e9crire l&#8217;utilisation et la configuration des objets pour permettre de r\u00e9pondre aux besoins fonctionnels des applications. PASSY &#8211; DPFV : Objectif de la mise en place de cette librairie : permettre de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11504","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11504"}],"version-history":[{"count":34,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11504\/revisions"}],"predecessor-version":[{"id":11560,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11504\/revisions\/11560"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}