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

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