Free jqGrid demo

The demo "The grid, which uses predefined formatters and templates" used on http://free-jqgrid.github.io/getting-started/index.html#the_first_grid

by ysuper

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.1/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.1/jquery.jqgrid.min.js"></script>
<div style="margin:5px;">
    <table id="list"></table>
</div>

JavaScript

$(function () {
    "use strict";
    var mydata = [
        { id: "10",	 name: "test",	ship_via: "2", total: "" },
        { id: "20",	 invdate: 1493411432, name: "test2",  note: "note2", 
        amount: "300.00", tax: "20.00", closed: false, ship_via: "0", total: "320.00" },
        { id: "30",	 invdate: 1489449600, name: "test3",  note: "note3",
        amount: "400.00", tax: "30.00", closed: false, ship_via: "0", total: "430.00" },
        { id: "40",	 invdate: 1489449600, name: "test4's",  note: "note4",
        amount: "200.00", tax: "10.00", closed: true,  ship_via: "1", total: "210.00" },
        { id: "50",	 invdate: 1489449600, name: "test5",  note: "note5",
        amount: "300.00", tax: "20.00", closed: false, ship_via: "0", total: "320.00" },
        { id: "60",	 invdate: 1489449600, name: "test6",  note: "note6",
        amount: "400.00", tax: "30.00", closed: false, ship_via: "0", total: "430.00" },
        { id: "70",	 invdate: 1489449600, name: "test7",  note: "note7",
        amount: "200.00", tax: "10.00", closed: true,  ship_via: "2", total: "210.00" },
        { id: "80",	 invdate: 1489449600, name: "test8",  note: "note8",
        amount: "300.00", tax: "20.00", closed: false, ship_via: "0", total: "320.00" },
        { id: "90",	 invdate: 1489449600, name: "test9",  note: "note9",
        amount: "400.00", tax: "30.00", closed: false, ship_via: "2", total: "430.00" },
        { id: "100", invdate: 1489449600, name: "test10", note: "note10",
        amount: "500.00", tax: "30.00", closed: true,  ship_via: "1", total: "530.00" },
        { id: "110", invdate: 1489449600, name: "test11", note: "note11",
        amount: "500.00", tax: "30.00", closed: false, ship_via: "0", total: "530.00" },
        { id: "120", invdate: 1489449600, name: "test12", note: "note12",
        amount: "500.00", tax: "30.00", closed: false, ship_via: "0", total: "530.00" }
    ],
        $grid = $("#list"),
        initDatepicker = function (elem, options) {
       ...