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/[email protected]/dist/handsontable.full.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/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.