Introduction to Handsontable.js

22 Feb, 2021
What is handsontable.js ?
Handsontable.js is a JavaScript data-grid component that can be used to build excel like web apps. Its basically a JavaScript library. One good thing about handsontable.js is that you can use it with vanilla JavaScript or React or Vue or Angular.
Installation:
You have two options to work with handsontable.js. You can either install by npm or you can use CDN. To install handsontable you need to run the following command on your node terminal:
npm install handsontable
If you have yarn instead of node then you have to run the following command:
yarn add handsontable
After installing it you have to include the below code in your html file:
<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”>
As an alternative you can use CDN. In that case embed the following code in the html file. There is no need of installation:
<script src=”https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js”></script><link href=”https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css”rel=”stylesheet” media=”screen”>
How to  use handsontable.js ?
Building a basic spreadsheet is quite easy. Follow  these steps to build a basic data-grid –
First make an empty div element in the html file. This will be the container of the spreadsheet.HTMLHTML<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <title>Introduction to Handsontable.js</title>    <script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js">    </script>          <link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css"        rel="stylesheet" media="screen"> </head>  <body>    <h1>        <center>Create your first data-grid</center>    </h1>      <!-- container to wrap the data-grid -->    <div class="handsontable-container"></div>          <script src="index.js"></script></body>  </html>
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <title>Introduction to Handsontable.js</title>    <script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js">    </script>          <link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css"        rel="stylesheet" media="screen"> </head>  <body>    <h1>        <center>Create your first data-grid</center>    </h1>      <!-- container to wrap the data-grid -->    <div class="handsontable-container"></div>          <script src="index.js"></script></body>  </html>
Now in the index.js file (or you can use script tags in html file), create a 2D array that will work as initial data on the data-grid. Each row of the 2D array represents each row of the handsontable. For example, if the following array is used as data source for handsontable object then the generated spread sheet will contain 13 rows and 5 columns. Note that you can also use objects as data source instead of 2D array.const data = [
    ['roll','name','stream','semester','email id'],
    [1,'Raj','IT',8,'Xyz@email.com'],
    [2,'Timir','CSE',4,'Xyz@email.com'],
    [4,'Arjesh','IT',2,'Xyz@email.com'],
    [5,'Haris ali','IT',6,'Xyz@email.com'],
    [6,'Deepak','CSE',4,'Xyz@email.com'],
    [7,'Dibyendu','ECE',4,'Xyz@email.com'],
    [8,'Aman','IT',4,'Xyz@email.com'],
    [9,'Binayak','CSE',6,'Xyz@email.com'],
    [10,'Harshad','ECE',6,'Xyz@email.com'],
    [11,'Abhra','IT',4,'Xyz@email.com'],
    [12,'Sayan','IT',4,'Xyz@email.com'],
]
const data = [
    ['roll','name','stream','semester','email id'],
    [1,'Raj','IT',8,'Xyz@email.com'],
    [2,'Timir','CSE',4,'Xyz@email.com'],
    [4,'Arjesh','IT',2,'Xyz@email.com'],
    [5,'Haris ali','IT',6,'Xyz@email.com'],
    [6,'Deepak','CSE',4,'Xyz@email.com'],
    [7,'Dibyendu','ECE',4,'Xyz@email.com'],
    [8,'Aman','IT',4,'Xyz@email.com'],
    [9,'Binayak','CSE',6,'Xyz@email.com'],
    [10,'Harshad','ECE',6,'Xyz@email.com'],
    [11,'Abhra','IT',4,'Xyz@email.com'],
    [12,'Sayan','IT',4,'Xyz@email.com'],
]
Grab the div elementlet container = document.querySelector(‘.handsontable-container’);
let container = document.querySelector(‘.handsontable-container’);
Create a handsontable object. Here Handontable constructor creates a spread sheet. It takes a DOM element as first argument which will contain the handsontable data grid. The second argument is an object that contains the properties of the data grid. For example, in the below code a handsontable object has defined with two arguments – container element and an object containing the data source for data grid.JavascriptJavascriptconst data = [    ['roll','name','stream','semester','email id'],    [1,'Raj','IT',8,'Xyz@email.com'],    [2,'Timir','CSE',4,'Xyz@email.com'],    [4,'Arjesh','IT',2,'Xyz@email.com'],    [5,'Haris ali','IT',6,'Xyz@email.com'],    [6,'Deepak','CSE',4,'Xyz@email.com'],    [7,'Dibyendu','ECE',4,'Xyz@email.com'],    [8,'Aman','IT',4,'Xyz@email.com'],    [9,'Binayak','CSE',6,'Xyz@email.com'],    [10,'Harshad','ECE',6,'Xyz@email.com'],    [11,'Abhra','IT',4,'Xyz@email.com'],    [12,'Sayan','IT',4,'Xyz@email.com'],]  let container = document.querySelector('.handsontable-container');  let hot = new Handsontable(container,{    data: data       // Initiating handsontable object })
Javascript
const data = [    ['roll','name','stream','semester','email id'],    [1,'Raj','IT',8,'Xyz@email.com'],    [2,'Timir','CSE',4,'Xyz@email.com'],    [4,'Arjesh','IT',2,'Xyz@email.com'],    [5,'Haris ali','IT',6,'Xyz@email.com'],    [6,'Deepak','CSE',4,'Xyz@email.com'],    [7,'Dibyendu','ECE',4,'Xyz@email.com'],    [8,'Aman','IT',4,'Xyz@email.com'],    [9,'Binayak','CSE',6,'Xyz@email.com'],    [10,'Harshad','ECE',6,'Xyz@email.com'],    [11,'Abhra','IT',4,'Xyz@email.com'],    [12,'Sayan','IT',4,'Xyz@email.com'],]  let container = document.querySelector('.handsontable-container');  let hot = new Handsontable(container,{    data: data       // Initiating handsontable object })
Output:
As shown in the above image, we have build  an excel like spread sheet. Similar to excel, you can change the data of each column. This a basic data grid. However, you can customize it by adding lot of features.
For example, If we want to add headers with several options , we can do it easily by adding additional key-value pairs to the object –
Javascript
let hot = new Handsontable(container, {    data: data,      // Added additional features    // For adding headers on each row    rowHeaders: true,      // For adding headers on each column    colHeaders: true,       // For adding dropdown menu to each headers    dropdownMenu: true,})
Output:
If you want to give custom names to headers instead of A, B, C, D... you can do it by giving colHeaders attribute an array instead of true –
let hot = new Handsontable(container,{
    data: data,

    rowHeaders: true, 

    // For giving custom names to headers
    colHeaders: ['roll', 'name', 'stream', 'semester', 'email'],
    dropdownMenu: true,

    // To add filter feature in table
    filters: true,
}
)
And then omit the first element of the data array –
const data = [
    [1,'Raj','IT',8,'Xyz@email.com'],

    // The first array element deleted
    [2,'Timir','CSE',4,'Xyz@email.com'],
    [4,'Arjesh','IT',2,'Xyz@email.com'],
    [5,'Haris ali','IT',6,'Xyz@email.com'],
    [6,'Deepak','CSE',4,'Xyz@email.com'],
    [7,'Dibyendu','ECE',4,'Xyz@email.com'],
    [8,'Aman','IT',4,'Xyz@email.com'],
    [9,'Binayak','CSE',6,'Xyz@email.com'],
    [10,'Harshad','ECE',6,'Xyz@email.com'],
    [11,'Abhra','IT',4,'Xyz@email.com'],
    [12,'Sayan','IT',4,'Xyz@email.com'],
]
Output:
This article shows the basic of Handsontable. However handsontable.js has many other features than this. You can define functions to specific columns or cells, export it to excel, merge multiple rows or columns etc. Possibilities are endless! See the docs here to explore it.
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?