Dynamic CRUD table Data Grid Input JavaScript Plugin | appendGrid

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">
    <!--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"/>
<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-->
        $(function () {
            var myAppendGrid = new AppendGrid({
                element: "tblAppendGrid",
                uiFramework: "bootstrap4",
                iconFramework: "fontawesome5",
                columns: [...]

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…


Object Default = null

Labels or messages used in the grid.

Must Read: A Modern JavaScript Library for Vanilla Spreadsheets Like Data Table

appendThe tooltip on the `append` button at the bottom of the grid.
removeLastThe tooltip on the `remove` button at the bottom of the grid.
insertThe tooltip on the `insert` button at the end of each row.
removeThe tooltip on the `remove` button at the end of each row.
moveUpThe tooltip on the `move up` button at the end of each row.
moveDownThe tooltip on the `move down button at the end of each row.
rowEmptyThe message is to be displayed when no rows in the grid.


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 frameworksDescription
defaultUse predefined Unicode symbols as icons.
fontawesome5Font Awesome 5. The web’s most popular icon set and toolkit.
ionicon4Ionic 4. Premium-designed icons for use in web, iOS, Android, and desktop apps.
materialdesignicons3Material Design Icons 3. Material Design Icons have been around for many years and are compatible with many technologies and frameworks.
openiconicOpen Iconic. An open-source icon set with 223 marks in SVG, Webfont, and raster formats.
typicons2Typicons 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.

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…