Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a Data Grid in JavaScript with Handsontable.js
Handsontable is a JavaScript library that is used when we want to create a data grid. It provides a spreadsheet-like experience, pretty similar to Excel. In this tutorial, we will explain how you can use handsontable.js to create a data grid with your own data. In addition, we will see how to use different options available in handsontable.js.
While there might be different spreadsheets like grid creators that you can use, the handsontable.js stands out from most of them because of its ability to work with vanilla JavaScript, React or Angular as well.
Before you can start working with handsontable.js, the first step is to install it on your local machine. There are different approaches to install handsontable.js.
The most basic approach is to use the CDN links in our HTML code. We just need to paste the following HTML code in our <head> tag and we are good to go.
<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 are importing two files via CDN. These are "handsontable.full.min.css" that will be used to import the "handsontable styles" and then we are importing "handsontable.full.min.js" that is used to import JavaScript code.
If you are not interested in using the CDN links, then you can install them with the help of npm or yarn. Consider the command shown below for NPM.
npm install handsontable
Use the following command for Yarn.
yarn add handsontable
Once you use either of these commands, you will be able to start working with handsontable, by just adding these two lines shown below in the <head> 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 both the <script> tag and the <link> tag, we are importing the respective "js" and the "CSS" file from the "node_modules" folder. Now we are all set to use handsontable.js.
index.html
The first step is to create an HTML file; name the file index.html. The final code of the index.html file that I've created is shown below.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Grid using 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">
<style>
.heading-div {
text-align: center;
margin: 0 auto;
margin-left: 0;
max-width: 400px;
}
</style>
</head>
<body>
<div class="heading-div">
<h1>
<center>Creating a data-grid!</center>
</h1>
</div>
<div class="container"></div>
<script src="app.js"></script>
</body>
</html>
In the above HTML code, we are using two div classes. In the first one, we are creating a header and in the next one, we are keeping it empty, but that empty div has a class named container which we will use in our JavaScript code.
app.js
In the next code snippet, we are using the <script> tag where we are linking the app.js file in which we will write our JavaScript code.
Create a file named app.js and paste the following code −
const data = [
['sr. no', 'Name', 'Age', 'Role', 'Company Name'],
[1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'],
[2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'],
[3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'],
[4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'],
[5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'],
[6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'],
[7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'],
[8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'],
[9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'],
[10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'],
]
let container = document.querySelector('.container');
let res = new Handsontable(container, {
data: data,
})
In the above app.js code, the first thing that we did is to create a constant named data in which we stored different values that will fit into the data grid that we are creating.
In the next step, we pick a particular element of the HTML from the querySelector and then we pass that value as the first argument inside the Handsontable constructor. The second argument is nothing but the actual data that we want to be present inside the div.
index.html
Here is the full code with app.js data. Run this code and check how the output appears −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Grid using 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">
<style>
.heading-div {
text-align: center;
margin: 0 auto;
margin-left: 0;
max-width: 400px;
}
</style>
</head>
<body>
<div class="heading-div">
<h1>
<center>Creating a data-grid!</center>
</h1>
</div>
<div class="container"></div>
<script>
const data = [
['sr. no', 'Name', 'Age', 'Role', 'Company Name'],
[1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'],
[2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'],
[3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'],
[4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'],
[5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'],
[6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'],
[7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'],
[8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'],
[9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'],
[10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'],
]
let container = document.querySelector('.container');
let res = new Handsontable(container, {
data: data,
})
</script>
</body>
</html>
Introduce Headers for Rows and Columns
We can even introduce headers to the rows and the columns as well. For that, you just need to add two more properties inside the second argument to the Handsontable constructor method. Consider the code snippet shown below.
let res = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
})
Once you replace the above code snippet with the one that is already present inside the app.js file, you will be able to see default headers added to both the rows and the columns.
The rowHeaders will have the numerical values starting from 1 to 9, while the column headers will have the default values starting from A to the character at which the column ends.
In our data-grid, we were providing the column headers ourselves, as this can be seen in the data as well, we have the first row like −
['sr. no', 'Name', 'Age', 'Role', 'Company Name']
The above values can be provided inside the colHeaders as well. Consider the updated code snippet shown below.
let res = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: ['sr. no', 'Name', 'Age', 'Role','Company Name'],
dropdownMenu: true,
})
We also need to change our data constant. The updated data constant is shown below.
const data = [ [1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'], [2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'], [3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'], [4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'], [5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'], [6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'], [7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'], [8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'], [9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'], [10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'], ]
Conclusion
In this tutorial, we explained what handsontable.js is and how you can use it to create data-grids of your choice. We explored different examples where we provided default values to both the columns and the headers.
285 Views
