 |
| Handsontable CRUD Live Data Grid Library Excel Like |
Handsontable is for building powerful, flexible, feature-rich, Excel-like CRUD data grid table libraries for JavaScript, Angular, React, and Vue.js.
Features
The most popular features of Handsontable:
- Multiple column sorting
- Non-contiguous selection
- Filtering data
- Export to file
- Validating data
- Conditional formatting
- Merging cells
- Freezing rows/columns
- Moving rows/columns
- Resizing rows/columns
- Hiding rows/columns
- Context menu
- Comments
Installation:
# NPM $ npm install handsontable --save
Basic Usage
1. Download and include the Handsontable library 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/dist/handsontable.full.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/dist/handsontable.full.min.css" rel="stylesheet" />
2. Create a placeholder element to place the data grid.
<div id="dataTable"></div>
3. Define the data to be presented in the data grid.
var data = [
["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
["2009", 0, 2941, 4303, 354, 5814],
["2010", 5, 2905, 2867, 412, 5284],
["2011", 4, 2517, 4822, 552, 6127],
["2012", 2, 2422, 5399, 776, 4151]
];
4. Initialize the library and render a basic data grid on the page.
var placeholder = document.getElementById('dataTable');
var myDataGrid = new Handsontable(placeholder, {
data: data,
});
5. Click here to see the full options to customize the data grid.
6. Handsontable provides a fast way to provide configuration options for the entire table, including its columns and particular 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;
}
});
Live Demo
See the Pen Handsontable CRUD Live Data Grid Library Excel Like by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- handsontable-develop.zip
- Size :
- 37.7MB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT