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.