Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Creating a Data Grid in JavaScript with Handsontable.js

Javascript Web Development Front End Technology

Handsontable is a JavaScript library that provides a spreadsheet-like data grid experience, similar to Excel. It works with vanilla JavaScript, React, and Angular, making it versatile for different project types. In this tutorial, we will create a data grid using Handsontable.js and explore its configuration options.

Installation

There are several ways to include Handsontable in your project. The simplest approach is using CDN links in your HTML <head> 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>

For npm installations, use:

npm install handsontable

Or with Yarn:

yarn add handsontable

Then include the files from node_modules:

<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">

Basic Data Grid Example

Let's create a complete example with employee data. Here's the HTML structure:

<!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: 20px 0;
      }
      .container {
         max-width: 1000px;
         margin: 0 auto;
         padding: 20px;
      }
   </style>
</head>
<body>
   <div class="heading-div">
      <h1>Employee Data Grid</h1>
   </div>
   <div class="container"></div>
   <script>
      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']
      ];

      let container = document.querySelector('.container');
      let hot = new Handsontable(container, {
         data: data,
         rowHeaders: true,
         colHeaders: ['ID', 'Name', 'Age', 'Role', 'Company'],
         columnSorting: true,
         filters: true,
         dropdownMenu: true,
         contextMenu: true,
         width: '100%',
         height: 400,
         licenseKey: 'non-commercial-and-evaluation'
      });
   </script>
</body>
</html>

Configuration Options

The Handsontable constructor accepts various configuration options:

let hot = new Handsontable(container, {
   data: data,                    // Your data array
   rowHeaders: true,              // Show row numbers
   colHeaders: ['ID', 'Name'],    // Custom column headers
   columnSorting: true,           // Enable sorting
   filters: true,                 // Enable filtering
   dropdownMenu: true,            // Context menu on headers
   contextMenu: true,             // Right-click menu
   width: '100%',                 // Table width
   height: 400,                   // Table height
   readOnly: false,               // Allow editing
   stretchH: 'all'               // Stretch columns to fit
});

Advanced Features Example

Here's an example with additional features like data validation and custom cell types:

<!DOCTYPE html>
<html>
<head>
   <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">
</head>
<body>
   <div id="grid"></div>
   <script>
      const gridData = [
         ['John Doe', 'john@email.com', 30, true, '2023-01-15'],
         ['Jane Smith', 'jane@email.com', 25, false, '2023-02-20'],
         ['Bob Johnson', 'bob@email.com', 35, true, '2023-03-10']
      ];

      new Handsontable(document.getElementById('grid'), {
         data: gridData,
         colHeaders: ['Name', 'Email', 'Age', 'Active', 'Join Date'],
         columns: [
            { type: 'text' },
            { type: 'text', validator: 'email' },
            { type: 'numeric', numericFormat: { pattern: '0' } },
            { type: 'checkbox' },
            { type: 'date', dateFormat: 'YYYY-MM-DD' }
         ],
         rowHeaders: true,
         width: '100%',
         height: 300,
         licenseKey: 'non-commercial-and-evaluation'
      });
   </script>
</body>
</html>

Key Features

  • Column Types: text, numeric, date, checkbox, dropdown, and more
  • Data Validation: Built-in validators for email, numeric ranges, etc.
  • Sorting & Filtering: Interactive column sorting and data filtering
  • Context Menus: Right-click menus for common operations
  • Export Options: Export data to CSV, PDF, or other formats

Conclusion

Handsontable.js provides a powerful and flexible solution for creating Excel-like data grids in web applications. With its extensive configuration options and built-in features like sorting, filtering, and data validation, it's an excellent choice for data-intensive applications.

Updated on: 2026-03-15T23:19:00+05:30

907 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements