Press "Enter" to skip to content

[CRUD] Data Grid Component With A Spreadsheet In JavaScript/HTML5 | Handsontable

Handsontable is a JavaScript / HTML5 data grid component with a spreadsheet look and feel. It provides easy data linking, data validation, filtering, sorting, and CRUD operations.

Handsontable works with Vue, React, and Angular.

Features:

List some of the most popular features:

  • Multi-column sorting
  • Non-contiguous selection
  • Data filtering
  • Export to a file
  • Data validation
  • Conditional formatting
  • Merge Cells
  • Custom cell types
  • Freeze rows / columns
  • Moving rows / columns
  • Resize rows / columns
  • Hide rows / columns
  • Context menu
  • Comments
  • Autofill option

How to make use of it:

Installations:

# NPM
$ npm install handsontable --save

1. Download the Handsontable Library and include it on the page.

<!-- from local -->
<script src="dist/handsontable.full.min.js"></script>
<link href="dist/handsontable.full.min.css" rel="stylesheet" />
<!-- from cdn -->
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css" rel="stylesheet" />

2. Create a placeholder for placing the data grid.

<div id="dataTable"></div>

3. Determine the data to be presented in the data network.

const data = [
      ["", "Kia", "Nissan", "Toyota", "Honda"],
      ["2008", 10, 11, 12, 13],
      ["2009", 20, 11, 14, 13],
      ["2010", 30, 15, 12, 13]
];

4. Create the library and present a basic data network on the page.

var placeholder = document.getElementById('dataTable');
var myDataGrid = new Handsontable(placeholder, {
    data: data,
});

5. Handsontable provides a quick way to provide configuration options for an entire table, including its columns and specific cells.

var placeholder = document.getElementById('dataTable');
var myDataGrid = new Handsontable(placeholder, {
    columns: [
      {readOnly: false},
      {},
      {}
    ],
    cells: function(row, col, prop) {
      var cellProperties = {};

      if (row === 0 && col === 0) {
        cellProperties.readOnly = true;
      }

      return cellProperties;
    }
});

Excel-like CRUD Data Grid Library, Handsontable Plugin/Github


See Demo And Download

Official Website(handsontable): Click Here

This superior jQuery/javascript plugin is developed by handsontable. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *