Handsontable is a JavaScript library that we use when we want to create a data grid. It provides a spreadsheet-like experience, very similar to Excel. In this tutorial, we will explain how to create a data grid with your own data using handsontable.js. Additionally, we will see how to use the different options available in handsontable.js.
While you may be able to use different spreadsheets (such as the Grid Creator), handsontable.js stands out from most spreadsheets because it is also able to be used with plain JavaScript, React, or Angular.
Before you start using handsontable.js, the first step is to install it on your local computer. There are different ways to install handsontable.js.
The most basic method is to use a CDN link in the HTML code. We simply paste the following HTML code into the
tag.<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>
In the above code snippet, we import two files via CDN. These are "handsontable.full.min.css" which will be used to import the "handsontable styles" and then we import "handsontable.full.min.js" which will be used to import the JavaScript code.
If you are not interested in using CDN links, you can install them with the help of npm or yarn. Consider using the NPM commands shown below. < /p>
npm install handsontable
Use the following commands for Yarn.
yarn add handsontable
Once you use any of these commands, you can start using
handsontable by simply adding the two lines shown below in the tag.<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">
In the
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
