Handsontable est une bibliothèque JavaScript que nous utilisons lorsque nous voulons créer une grille de données. Il offre une expérience semblable à celle d’une feuille de calcul, très similaire à Excel. Dans ce tutoriel, nous expliquerons comment créer une grille de données avec vos propres données à l'aide de handontable.js. De plus, nous verrons comment utiliser les différentes options disponibles dans handontable.js.
Bien que vous puissiez utiliser différentes feuilles de calcul (telles que Grid Creator), handontable.js se démarque de la plupart des feuilles de calcul car il peut également être utilisé avec du JavaScript simple, React ou Angular.
Avant de commencer à utiliser handontable.js, la première étape consiste à l'installer sur votre ordinateur local. Il existe différentes manières d’installer handontable.js.
La méthode la plus basique consiste à utiliser un lien CDN dans le code HTML. Nous collons simplement le code HTML suivant dans la balise
.<link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen"> <script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js"></script>
Dans l'extrait de code ci-dessus, nous importons deux fichiers via CDN. Ce sont "handsontable.full.min.css" qui servira à importer les "styles handsontable" puis on importe "handsontable.full.min.js" qui servira à importer le code JavaScript.
Si vous n'êtes pas intéressé par l'utilisation des liens CDN, vous pouvez les installer à l'aide de npm ou yarn. Envisagez d'utiliser les commandes NPM indiquées ci-dessous. < /p>
npm install handsontable
Utilisez la commande suivante pour Yarn.
yarn add handsontable
Une fois que vous utilisez l'une de ces commandes, vous pouvez simplement ajouter ces deux lignes comme indiqué ci-dessous dans la balise
pour commencer à utiliser handsontable.<script src="node_modules/handsontable/dist/handsontable.full.min.js"></script> <link href="node_modules/handsontable/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
Dans la balise