Introduction to Handsontable.js

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.

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'],
]

Grab the div element
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.

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.

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions