Home > Article > Web Front-end > Create a data grid in JavaScript using Handsontable.js

Create a data grid in JavaScript using Handsontable.js

PHPzforward: 2023-09-02 13:01:02694browse

使用 Handsontable.js 在 JavaScript 中创建数据网格

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.

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 <script> tag and <link> tag, we import the corresponding "js" and "CSS" files from the "node_modules" folder. Now we can use handsontable.js. </script>

index.html

The first step is to create an HTML file; name the file index.html. The final code for the index.html file I created looks like this.

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 use two div classes. In the first one we create a header, in the next one we leave it empty, but that empty div has a class called container which we will Our JavaScript code.

app.js

In the next code snippet, we use the <script> tag to link to the <b>app.js file where we will write the JavaScript code. </script>

Create a file called 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 app.js code above, the first thing we do is create a constant called data where we store different values that fit the data we are Created grid.

In the next step, we select a specific element of HTML from the querySelector and pass that value as the first parameter inside the Handsontable constructor. The second parameter is nothing but the actual data we want to display in the div.

index.html

Here is the complete 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>

Introducing row and column headers

We can even introduce headers to rows and columns. To do this, you simply add two properties within the second parameter of the Handsontable constructor method. Consider the code snippet shown below.

let res = new Handsontable(container, { 
   data: data, 
   rowHeaders: true, 
   colHeaders: true, 
})

After replacing the above code snippet with the one that already exists in the app.js file, you will be able to see the default headers added to the rows and columns. p>

rowHeaders will have numeric values starting from 1 to 9, while column headers will have default values starting from A to the end of the column character.

In our data grid we provide the column headers ourselves, this can also be seen in the data, our first row looks like this -

['sr. no', 'Name', 'Age', 'Role', 'Company Name']

The above values can also be provided within colHeaders. 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 the data constants. The updated data constants are 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'],
]

in conclusion

In this tutorial, we explain what handsontable.js is and how to use it to create a data grid of your choice. We explored different examples where we provided default values for columns and headers.

The above is the detailed content of Create a data grid in JavaScript using Handsontable.js. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html npm angular yarn 常量构造函数 JS excel

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to add spaces between characters in IText using FabricJS?Next article：How to add spaces between characters in IText using FabricJS?

See more

Create a data grid in JavaScript using Handsontable.js

Example

app.js

index.html

Example

Introducing row and column headers

in conclusion

Related articles