AppendGrid allows you to input data that is structured row by row like filling out spreadsheets. It allows you to add/remove/insert/delete rows in the grid.
The input/select/text area generated controls are well-named for rendering to server-side applications such as ASP.NET/PHP/JSP. Multiple options and callback events are available to suit different situations.
The new code has been rewritten using ES6. It will be compatible with modern web frameworks like Bootstrap and Bulma natively.
Feature guides
- Easy to use
- Built-in multiple input types include HTML5 input types
- Customizable input types
- Compatible with major web browsers
- Ready for internationalization
Must Read: Angular Handsontable Data Grid with Spreadsheet Component
How to make use of it:
Reference AppendGrid.js in your HTML file with your favorite HTML framework!
<!DOCTYPE html>
<html lang="en">
<head>
<!--Bootstrap meta tags-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Hello AppendGrid!</title>
<!--Bootstrap CSS-->
<link rel="stylesheet" href="bootstrap.min.css"/>
<!--Font Awesome WebFont CSS for icons-->
<link rel="stylesheet" href="fontawesome.css"/>
</head>
<body class="container">
<!--AppendGrid table element-->
<table id="tblAppendGrid"></table>
<!--JS required for Bootstrap-->
<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
<!--AppendGrid library-->
<script src="AppendGrid.js"></script>
<!--Script for initialize AppendGrid-->
<script>
$(function () {
var myAppendGrid = new AppendGrid({
element: "tblAppendGrid",
uiFramework: "bootstrap4",
iconFramework: "fontawesome5",
columns: [...]
});
});
</script>
</body>
</html>An array of column options. Please refer to Column Parameters for more information.
var myAppendGrid = new AppendGrid({
element: "tblAppendGrid",
columns: [{
name: "col-1",
display: "Column 1",
type: "text"
}, {
name: "col-2",
display: "Column 2",
type: "date"
}, {
name: "col-3",
display: "Column 3",
type: "select",
ctrlOptions: ["Option 1", "Option 2", "Option 3"]
}]
});The ID of the target table or the DOM element of the table to initialize the appendGrid.
// Using `id` in string format
var myAppendGrid1 = new AppendGrid({
element: "tblAppendGrid1",
columns: [...]
});
// Using table DOM element
var myAppendGrid2 = new AppendGrid({
element: document.getElementById("tblAppendGrid2"),
columns: [...]
});More details are in the download file…
i18n
Object Default = null
Labels or messages used in the grid.
Must Read: A Modern JavaScript Library for Vanilla Spreadsheets Like Data Table
| Property | Description |
|---|---|
| append | The tooltip on the `append` button at the bottom of the grid. |
| removeLast | The tooltip on the `remove` button at the bottom of the grid. |
| insert | The tooltip on the `insert` button at the end of each row. |
| remove | The tooltip on the `remove` button at the end of each row. |
| moveUp | The tooltip on the `move up` button at the end of each row. |
| moveDown | The tooltip on the `move down button at the end of each row. |
| rowEmpty | The message is to be displayed when no rows in the grid. |
iconFramework
String Default = “default”
The name of the icon framework to be used on buttons. These icon frameworks may have several download formats. AppendGrid is implemented to work with their Webfont format.
| Supported icon frameworks | Description |
|---|---|
| default | Use predefined Unicode symbols as icons. |
| fontawesome5 | Font Awesome 5. The web’s most popular icon set and toolkit. |
| ionicon4 | Ionic 4. Premium-designed icons for use in web, iOS, Android, and desktop apps. |
| materialdesignicons3 | Material Design Icons 3. Material Design Icons have been around for many years and are compatible with many technologies and frameworks. |
| openiconic | Open Iconic. An open-source icon set with 223 marks in SVG, Webfont, and raster formats. |
| typicons2 | Typicons 2. Typicals are free-to-use vector icons embedded in a web font for easy use in any UI, whether it be on the web or in a native app. |
Bootstrap 5
Create and Reorder Lists With Drag-and-Drop | SortableJS
Bootstrap 4
Merge Identical Table Rows jQuery plugin | RowMerge
Basic Bulma
Responsive Cross-platform CSS Grid Columns System | grid.css
No HTML framework
Sort HTML Table Without jQuery Library | sorTable.js
See Also –
Responsive Grid System Based on Bootstrap for Vue
Bootstrap Data Table With Checkbox, Sort, Pagination, Export, DetailView, and More
See Demo And Download
Official Website(hkalbertl): Click Here
This superior jQuery/javascript plugin is developed by hkalbertl. For extra Advanced Usage, please go to the official website.
