AppendGrid - The dynamic table input JavaScript plugin

Download

Please download the AppendGrid.js file under dist directory at AppendGrid's GitHub Repository. And then copy and reference it in your website.

CDN

Alternatively, you can reference the AppendGrid.js file directly from jsDelivr which is a free, fast, and reliable Open Source CDN.

<!doctype html>
<html lang="en">
<head>
    <!--Required meta tags for Bootstrap-->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <!--Bootstrap CSS for styling-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
    <!--Font Awesome webfont for appendGrid button icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
</head>
<body class="container">
    <!--Table element for appendGrid-->
    <table id="tblAppendGrid"></table>
    <!--jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!--appendGrid JS library-->
    <script src="https://cdn.jsdelivr.net/npm/jquery.appendgrid@2/dist/AppendGrid.js"></script>
    <!--Script for initialize appendGrid-->
    <script>
        // Execute when `DOM ready`
        document.addEventListener("DOMContentLoaded", function () {
            // Initialize appendGrid
            var myAppendGrid = new AppendGrid({
                element: "tblAppendGrid",
                uiFramework: "bootstrap4",
                iconFramework: "fontawesome5",
                columns: [...]
            });
        });
    </script>
</body>
</html>