added jsGrid & updated DataTables demo

- updated DataTables typo in demo files
- added jsGrid to package,json & npm/Plugins.js
- added jsgrid demo

build/npm/Plugins.js

@@ -197,6 +197,15 @@ const Plugins = [
     from: 'node_modules/toastr/build/',
     to  : 'plugins/toastr'
   },
+  // jsGrid
+  {
+    from: 'node_modules/jsgrid/dist',
+    to: 'plugins/jsgrid'
+  },
+  {
+    from: 'node_modules/jsgrid/demos/',
+    to: 'plugins/jsgrid/demos'
+  },
 
 
   // // Doc Assets

index.html

@@ -388,7 +388,13 @@
               <li class="nav-item">
                 <a href="pages/tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="pages/tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

index2.html

@@ -375,7 +375,13 @@
               <li class="nav-item">
                 <a href="pages/tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="pages/tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

index3.html

@@ -385,7 +385,13 @@ to get the desired effect
               <li class="nav-item">
                 <a href="pages/tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="pages/tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-lte",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8142,6 +8142,11 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
+    "jsgrid": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/jsgrid/-/jsgrid-1.5.3.tgz",
+      "integrity": "sha1-sV/EJkgxU77itrVnMS9nXZKDSg0="
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",

package.json

@@ -69,6 +69,7 @@
     "jquery-mousewheel": "^3.1.13",
     "jquery-ui-dist": "^1.12.1",
     "jqvmap": "github:CivilError/jqvmap",
+    "jsgrid": "^1.5.3",
     "moment": "^2.24.0",
     "overlayscrollbars": "^1.7.2",
     "popper.js": "^1.15.0",

pages/UI/buttons.html

@@ -377,7 +377,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/UI/general.html

@@ -411,7 +411,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/UI/icons.html

@@ -377,7 +377,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/UI/modals.html

@@ -381,7 +381,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/UI/navbar.html

@@ -383,7 +383,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/UI/sliders.html

@@ -382,7 +382,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/calendar.html

@@ -383,7 +383,13 @@
               <li class="nav-item">
                 <a href="tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/charts/chartjs.html

@@ -377,7 +377,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/charts/flot.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/charts/inline.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/404.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/500.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/blank.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/contacts.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/e_commerce.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/invoice.html

@@ -377,7 +377,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/legacy-user-menu.html

@@ -406,7 +406,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/profile.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/project_add.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/project_detail.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/project_edit.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/examples/projects.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/forms/advanced.html

@@ -388,7 +388,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/forms/editors.html

@@ -380,7 +380,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/forms/general.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/layout/boxed.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/layout/collapsed-sidebar.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/layout/fixed-footer.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/layout/fixed-topnav.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/layout/fixed.html

@@ -380,7 +380,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/mailbox/compose.html

@@ -380,7 +380,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/mailbox/mailbox.html

@@ -379,7 +379,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/mailbox/read-mail.html

@@ -378,7 +378,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/tables/data.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>AdminLTE 3 | Data Tables</title>
+  <title>AdminLTE 3 | DataTables</title>
   <!-- Tell the browser to be responsive to screen width -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -380,7 +380,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link active">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>
@@ -582,12 +588,12 @@
       <div class="container-fluid">
         <div class="row mb-2">
           <div class="col-sm-6">
-            <h1>Data Tables</h1>
+            <h1>DataTables</h1>
           </div>
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">
               <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item active">Data Tables</li>
+              <li class="breadcrumb-item active">DataTables</li>
             </ol>
           </div>
         </div>
@@ -600,7 +606,7 @@
         <div class="col-12">
           <div class="card">
             <div class="card-header">
-              <h3 class="card-title">Hover Data Table</h3>
+              <h3 class="card-title">DataTable with minimal features & hover style</h3>
             </div>
             <!-- /.card-header -->
             <div class="card-body">
@@ -1040,7 +1046,7 @@
 
           <div class="card">
             <div class="card-header">
-              <h3 class="card-title">Data Table With Full Features</h3>
+              <h3 class="card-title">DataTable with default features</h3>
             </div>
             <!-- /.card-header -->
             <div class="card-body">

pages/tables/jsgrid.html

@@ -0,0 +1,673 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>AdminLTE 3 | jsGrid</title>
+  <!-- Tell the browser to be responsive to screen width -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+  <!-- Ionicons -->
+  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- jsGrid -->
+  <link rel="stylesheet" href="../../plugins/jsgrid/jsgrid.min.css">
+  <link rel="stylesheet" href="../../plugins/jsgrid/jsgrid-theme.min.css">
+  <!-- Theme style -->
+  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
+  <!-- Google Font: Source Sans Pro -->
+  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
+</head>
+<body class="hold-transition sidebar-mini">
+<div class="wrapper">
+  <!-- Navbar -->
+  <nav class="main-header navbar navbar-expand navbar-white navbar-light border-bottom">
+    <!-- Left navbar links -->
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
+      </li>
+      <li class="nav-item d-none d-sm-inline-block">
+        <a href="../../index3.html" class="nav-link">Home</a>
+      </li>
+      <li class="nav-item d-none d-sm-inline-block">
+        <a href="#" class="nav-link">Contact</a>
+      </li>
+    </ul>
+
+    <!-- SEARCH FORM -->
+    <form class="form-inline ml-3">
+      <div class="input-group input-group-sm">
+        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-navbar" type="submit">
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
+      </div>
+    </form>
+
+    <!-- Right navbar links -->
+    <ul class="navbar-nav ml-auto">
+      <!-- Messages Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-comments"></i>
+          <span class="badge badge-danger navbar-badge">3</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  Brad Diesel
+                  <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">Call me whenever you can...</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  John Pierce
+                  <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">I got your message bro</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  Nora Silvester
+                  <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">The subject goes here</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+        </div>
+      </li>
+      <!-- Notifications Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-bell"></i>
+          <span class="badge badge-warning navbar-badge">15</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+          <span class="dropdown-item dropdown-header">15 Notifications</span>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-envelope mr-2"></i> 4 new messages
+            <span class="float-right text-muted text-sm">3 mins</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-users mr-2"></i> 8 friend requests
+            <span class="float-right text-muted text-sm">12 hours</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-file mr-2"></i> 3 new reports
+            <span class="float-right text-muted text-sm">2 days</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+        </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
+          <i class="fas fa-th-large"></i>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- /.navbar -->
+
+  <!-- Main Sidebar Container -->
+  <aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <!-- Brand Logo -->
+    <a href="../../index3.html" class="brand-link">
+      <img src="../../dist/img/AdminLTELogo.png"
+           alt="AdminLTE Logo"
+           class="brand-image img-circle elevation-3"
+           style="opacity: .8">
+      <span class="brand-text font-weight-light">AdminLTE 3</span>
+    </a>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <!-- Sidebar user (optional) -->
+      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+        <div class="image">
+          <img src="../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
+        </div>
+        <div class="info">
+          <a href="#" class="d-block">Alexander Pierce</a>
+        </div>
+      </div>
+
+      <!-- Sidebar Menu -->
+      <nav class="mt-2">
+        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+          <!-- Add icons to the links using the .nav-icon class
+               with font-awesome or any other icon font library -->
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-tachometer-alt"></i>
+              <p>
+                Dashboard
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../../index.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v1</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../../index2.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v2</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../../index3.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v3</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a href="../widgets.html" class="nav-link">
+              <i class="nav-icon fas fa-th"></i>
+              <p>
+                Widgets
+                <span class="right badge badge-danger">New</span>
+              </p>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-copy"></i>
+              <p>
+                Layout Options
+                <i class="fas fa-angle-left right"></i>
+                <span class="badge badge-info right">6</span>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../layout/top-nav.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Top Navigation</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/boxed.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Boxed</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/fixed.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/fixed-topnav.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed Navbar</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/fixed-footer.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed Footer</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/collapsed-sidebar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Collapsed Sidebar</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-chart-pie"></i>
+              <p>
+                Charts
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../charts/chartjs.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>ChartJS</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../charts/flot.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Flot</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../charts/inline.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Inline</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-tree"></i>
+              <p>
+                UI Elements
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../UI/general.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>General</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/icons.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Icons</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/buttons.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Buttons</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/sliders.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Sliders</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/modals.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Modals & Alerts</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-edit"></i>
+              <p>
+                Forms
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../forms/general.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>General Elements</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../forms/advanced.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Advanced Elements</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../forms/editors.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Editors</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview menu-open">
+            <a href="#" class="nav-link active">
+              <i class="nav-icon fas fa-table"></i>
+              <p>
+                Tables
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../tables/simple.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Simple Tables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/data.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link active">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">EXAMPLES</li>
+          <li class="nav-item">
+            <a href="../calendar.html" class="nav-link">
+              <i class="nav-icon far fa-calendar-alt"></i>
+              <p>
+                Calendar
+                <span class="badge badge-info right">2</span>
+              </p>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-envelope"></i>
+              <p>
+                Mailbox
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../mailbox/mailbox.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Inbox</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../mailbox/compose.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Compose</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../mailbox/read-mail.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Read</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-book"></i>
+              <p>
+                Pages
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../examples/invoice.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Invoice</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/profile.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Profile</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/e_commerce.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>E-commerce</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/projects.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Projects</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/project_add.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Project Add</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/project_edit.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Project Edit</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/project_detail.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Project Detail</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/contacts.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Contacts</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-plus-square"></i>
+              <p>
+                Extras
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../examples/login.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Login</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/register.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Register</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/lockscreen.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Lockscreen</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/legacy-user-menu.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Legacy User Menu</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/404.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Error 404</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/500.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Error 500</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/blank.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Blank Page</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../../starter.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Starter Page</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">MISCELLANEOUS</li>
+          <li class="nav-item">
+            <a href="https://adminlte.io/docs" class="nav-link">
+              <i class="nav-icon fas fa-file"></i>
+              <p>Documentation</p>
+            </a>
+          </li>
+          <li class="nav-header">LABELS</li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-danger"></i>
+              <p class="text">Important</p>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-warning"></i>
+              <p>Warning</p>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-info"></i>
+              <p>Informational</p>
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <!-- /.sidebar-menu -->
+    </div>
+    <!-- /.sidebar -->
+  </aside>
+
+  <!-- Content Wrapper. Contains page content -->
+  <div class="content-wrapper">
+    <!-- Content Header (Page header) -->
+    <section class="content-header">
+      <div class="container-fluid">
+        <div class="row mb-2">
+          <div class="col-sm-6">
+            <h1>jsGrid</h1>
+          </div>
+          <div class="col-sm-6">
+            <ol class="breadcrumb float-sm-right">
+              <li class="breadcrumb-item"><a href="#">Home</a></li>
+              <li class="breadcrumb-item active">jsGrid</li>
+            </ol>
+          </div>
+        </div>
+      </div><!-- /.container-fluid -->
+    </section>
+
+    <!-- Main content -->
+    <section class="content">
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">jsGrid</h3>
+        </div>
+        <!-- /.card-header -->
+        <div class="card-body">
+          <div id="jsGrid1"></div>
+        </div>
+        <!-- /.card-body -->
+      </div>
+      <!-- /.card -->
+    </section>
+    <!-- /.content -->
+  </div>
+  <!-- /.content-wrapper -->
+  <footer class="main-footer">
+    <div class="float-right d-none d-sm-block">
+      <b>Version</b> 3.0.0-beta.2
+    </div>
+    <strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights
+    reserved.
+  </footer>
+
+  <!-- Control Sidebar -->
+  <aside class="control-sidebar control-sidebar-dark">
+    <!-- Control sidebar content goes here -->
+  </aside>
+  <!-- /.control-sidebar -->
+</div>
+<!-- ./wrapper -->
+
+<!-- jQuery -->
+<script src="../../plugins/jquery/jquery.min.js"></script>
+<!-- Bootstrap 4 -->
+<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- jsGrid -->
+<script src="../../plugins/jsgrid/demos/db.js"></script>
+<script src="../../plugins/jsgrid/jsgrid.min.js"></script>
+<!-- FastClick -->
+<script src="../../plugins/fastclick/fastclick.js"></script>
+<!-- AdminLTE App -->
+<script src="../../dist/js/adminlte.min.js"></script>
+<!-- AdminLTE for demo purposes -->
+<script src="../../dist/js/demo.js"></script>
+<!-- page script -->
+<script>
+  $(function () {
+    $("#jsGrid1").jsGrid({
+        height: "100%",
+        width: "100%",
+ 
+        sorting: true,
+        paging: true,
+ 
+        data: db.clients,
+ 
+        fields: [
+            { name: "Name", type: "text", width: 150 },
+            { name: "Age", type: "number", width: 50 },
+            { name: "Address", type: "text", width: 200 },
+            { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+            { name: "Married", type: "checkbox", title: "Is Married" }
+        ]
+    });
+  });
+</script>
+</body>
+</html>

pages/tables/simple.html

@@ -377,7 +377,13 @@
               <li class="nav-item">
                 <a href="../tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

pages/widgets.html

@@ -377,7 +377,13 @@
               <li class="nav-item">
                 <a href="tables/data.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Data Tables</p>
+                  <p>DataTables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="tables/jsgrid.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>jsGrid</p>
                 </a>
               </li>
             </ul>

plugins/jsgrid/demos/basic.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Basic Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+</head>
+<body>
+    <h1>Basic Scenario</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                filtering: true,
+                editing: true,
+                inserting: true,
+                sorting: true,
+                paging: true,
+                autoload: true,
+                pageSize: 15,
+                pageButtonCount: 5,
+                deleteConfirm: "Do you really want to delete the client?",
+                controller: db,
+                fields: [
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
+                    { type: "control" }
+                ]
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/batch-delete.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Batch Delete</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+</head>
+<body>
+    <h1>Batch Delete</h1>
+
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "50%",
+                width: "100%",
+                autoload: true,
+                confirmDeleting: false,
+                paging: true,
+                controller: {
+                    loadData: function() {
+                        return db.clients;
+                    }
+                },
+                fields: [
+                    {
+                        headerTemplate: function() {
+                            return $("<button>").attr("type", "button").text("Delete")
+                                    .on("click", function () {
+                                        deleteSelectedItems();
+                                    });
+                        },
+                        itemTemplate: function(_, item) {
+                            return $("<input>").attr("type", "checkbox")
+                                    .prop("checked", $.inArray(item, selectedItems) > -1)
+                                    .on("change", function () {
+                                        $(this).is(":checked") ? selectItem(item) : unselectItem(item);
+                                    });
+                        },
+                        align: "center",
+                        width: 50
+                    },
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 }
+                ]
+            });
+
+
+            var selectedItems = [];
+
+            var selectItem = function(item) {
+                selectedItems.push(item);
+            };
+
+            var unselectItem = function(item) {
+                selectedItems = $.grep(selectedItems, function(i) {
+                    return i !== item;
+                });
+            };
+
+            var deleteSelectedItems = function() {
+                if(!selectedItems.length || !confirm("Are you sure?"))
+                    return;
+
+                deleteClientsFromDb(selectedItems);
+
+                var $grid = $("#jsGrid");
+                $grid.jsGrid("option", "pageIndex", 1);
+                $grid.jsGrid("loadData");
+
+                selectedItems = [];
+            };
+
+            var deleteClientsFromDb = function(deletingClients) {
+                db.clients = $.map(db.clients, function(client) {
+                    return ($.inArray(client, deletingClients) > -1) ? null : client;
+                });
+            };
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/custom-grid-field.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Custom Grid Field Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css' />
+
+    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
+    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+
+    <style>
+        .hasDatepicker {
+            width: 100px;
+            text-align: center;
+        }
+
+        .ui-datepicker * {
+            font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+            font-size: 14px;
+            font-weight: 300 !important;
+        }
+    </style>
+</head>
+<body>
+    <h1>Custom Grid DateField</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            var MyDateField = function(config) {
+                jsGrid.Field.call(this, config);
+            };
+
+            MyDateField.prototype = new jsGrid.Field({
+                sorter: function(date1, date2) {
+                    return new Date(date1) - new Date(date2);
+                },
+
+                itemTemplate: function(value) {
+                    return new Date(value).toDateString();
+                },
+
+                insertTemplate: function(value) {
+                    return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() });
+                },
+
+                editTemplate: function(value) {
+                    return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
+                },
+
+                insertValue: function() {
+                    return this._insertPicker.datepicker("getDate").toISOString();
+                },
+
+                editValue: function() {
+                    return this._editPicker.datepicker("getDate").toISOString();
+                }
+            });
+
+            jsGrid.fields.myDateField = MyDateField;
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                inserting: true,
+                editing: true,
+                sorting: true,
+                paging: true,
+                fields: [
+                    { name: "Account", width: 150, align: "center" },
+                    { name: "Name", type: "text" },
+                    { name: "RegisterDate", type: "myDateField", width: 100, align: "center" },
+                    { type: "control", editButton: false, modeSwitchButton: false }
+                ],
+                data: db.users
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/custom-load-indicator.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Custom Load Indicator</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.1/spin.min.js"></script>
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.textarea.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+
+    <style>
+        .rating {
+            color: #F8CA03;
+        }
+    </style>
+</head>
+<body>
+    <h1>Custom Load Indicator</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "50%",
+                width: "100%",
+                sorting: true,
+                paging: false,
+                autoload: true,
+                controller: {
+                    loadData: function() {
+                        var d = $.Deferred();
+
+                        $.ajax({
+                            url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
+                            dataType: "json"
+                        }).done(function(response) {
+                            setTimeout(function() {
+                                d.resolve(response.value);
+                            }, 2000);
+                        });
+
+                        return d.promise();
+                    }
+                },
+                loadIndicator: function(config) {
+                    var container = config.container[0];
+                    var spinner = new Spinner();
+
+                    return {
+                        show: function() {
+                            spinner.spin(container);
+                        },
+                        hide: function() {
+                            spinner.stop();
+                        }
+                    };
+                },
+                fields: [
+                    { name: "Name", type: "text" },
+                    { name: "Description", type: "textarea", width: 150 },
+                    { name: "Rating", type: "number", width: 50, align: "center",
+                        itemTemplate: function(value) {
+                            return $("<div>").addClass("rating").append(Array(value + 1).join("&#9733;"));
+                        }
+                    },
+                    { name: "Price", type: "number", width: 50,
+                        itemTemplate: function(value) {
+                            return value.toFixed(2) + "$"; }
+                    }
+                ]
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/custom-row-renderer.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Custom Row Renderer</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+
+    <style>
+        .client-photo { float: left; margin: 0 20px 0 10px; }
+        .client-photo img { border-radius: 50%; border: 1px solid #ddd; }
+        .client-info { margin-top: 10px; }
+        .client-info p { line-height: 25px; }
+    </style>
+</head>
+<body>
+    <h1>Custom Row Renderer</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "80%",
+                width: "50%",
+                autoload: true,
+                paging: true,
+                controller: {
+                    loadData: function() {
+                        var deferred = $.Deferred();
+
+                        $.ajax({
+                            url: 'http://api.randomuser.me/?results=40',
+                            dataType: 'jsonp',
+                            success: function(data){
+                                deferred.resolve(data.results);
+                            }
+                        });
+
+                        return deferred.promise();
+                    }
+                },
+                rowRenderer: function(item) {
+                    var user = item;
+                    var $photo = $("<div>").addClass("client-photo").append($("<img>").attr("src", user.picture.large));
+                    var $info = $("<div>").addClass("client-info")
+                        .append($("<p>").append($("<strong>").text(user.name.first.capitalize() + " " + user.name.last.capitalize())))
+                        .append($("<p>").text("Location: " + user.location.city.capitalize() + ", " + user.location.street))
+                        .append($("<p>").text("Email: " + user.email))
+                        .append($("<p>").text("Phone: " + user.phone))
+                        .append($("<p>").text("Cell: " + user.cell));
+
+                    return $("<tr>").append($("<td>").append($photo).append($info));
+                },
+                fields: [
+                    { title: "Clients" }
+                ]
+            });
+
+
+            String.prototype.capitalize = function() {
+                return this.charAt(0).toUpperCase() + this.slice(1);
+            };
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/custom-view.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Custom View Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+
+    <style>
+        .config-panel {
+            padding: 10px;
+            margin: 10px 0;
+            background: #fcfcfc;
+            border: 1px solid #e9e9e9;
+            display: inline-block;
+        }
+
+        .config-panel label {
+            margin-right: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Custom View</h1>
+    <div class="config-panel">
+        <label><input id="heading" type="checkbox" checked /> Heading</label>
+        <label><input id="filtering" type="checkbox" checked /> Filtering</label>
+        <label><input id="inserting" type="checkbox" /> Inserting</label>
+        <label><input id="editing" type="checkbox" checked /> Editing</label>
+        <label><input id="paging" type="checkbox" checked /> Paging</label>
+        <label><input id="sorting" type="checkbox" checked /> Sorting</label>
+        <label><input id="selecting" type="checkbox" checked /> Selecting</label>
+    </div>
+
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                filtering: true,
+                editing: true,
+                sorting: true,
+                paging: true,
+                autoload: true,
+                pageSize: 15,
+                pageButtonCount: 5,
+                controller: db,
+                fields: [
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
+                    { type: "control", modeSwitchButton: false, editButton: false }
+                ]
+            });
+
+            $(".config-panel input[type=checkbox]").on("click", function() {
+                var $cb = $(this);
+                $("#jsGrid").jsGrid("option", $cb.attr("id"), $cb.is(":checked"));
+            });
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/data-manipulation.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Data Manipulation</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
+    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
+    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
+
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+
+    <style>
+        .ui-widget *, .ui-widget input, .ui-widget select, .ui-widget button {
+            font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+            font-size: 14px;
+            font-weight: 300 !important;
+        }
+
+        .details-form-field input,
+        .details-form-field select {
+            width: 250px;
+            float: right;
+        }
+
+        .details-form-field {
+            margin: 30px 0;
+        }
+
+        .details-form-field:first-child {
+            margin-top: 10px;
+        }
+
+        .details-form-field:last-child {
+            margin-bottom: 10px;
+        }
+
+        .details-form-field button {
+            display: block;
+            width: 100px;
+            margin: 0 auto;
+        }
+
+        input.error, select.error {
+            border: 1px solid #ff9999;
+            background: #ffeeee;
+        }
+
+        label.error {
+            float: right;
+            margin-left: 100px;
+            font-size: .8em;
+            color: #ff6666;
+        }
+    </style>
+</head>
+<body>
+    <h1>Data Manipulation</h1>
+    <div id="jsGrid"></div>
+
+    <div id="detailsDialog">
+        <form id="detailsForm">
+            <div class="details-form-field">
+                <label for="name">Name:</label>
+                <input id="name" name="name" type="text" />
+            </div>
+            <div class="details-form-field">
+                <label for="age">Age:</label>
+                <input id="age" name="age" type="number" />
+            </div>
+            <div class="details-form-field">
+                <label for="address">Address:</label>
+                <input id="address" name="address" type="text" />
+            </div>
+            <div class="details-form-field">
+                <label for="country">Country:</label>
+                <select id="country" name="country">
+                    <option value="">(Select)</option>
+                    <option value="1">United States</option>
+                    <option value="2">Canada</option>
+                    <option value="3">United Kingdom</option>
+                    <option value="4">France</option>
+                    <option value="5">Brazil</option>
+                    <option value="6">China</option>
+                    <option value="7">Russia</option>
+                </select>
+            </div>
+            <div class="details-form-field">
+                <label for="married">Is Married</label>
+                <input id="married" name="married" type="checkbox" />
+            </div>
+            <div class="details-form-field">
+                <button type="submit" id="save">Save</button>
+            </div>
+        </form>
+    </div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                editing: true,
+                autoload: true,
+                paging: true,
+                deleteConfirm: function(item) {
+                    return "The client \"" + item.Name + "\" will be removed. Are you sure?";
+                },
+                rowClick: function(args) {
+                    showDetailsDialog("Edit", args.item);
+                },
+                controller: db,
+                fields: [
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
+                    {
+                        type: "control",
+                        modeSwitchButton: false,
+                        editButton: false,
+                        headerTemplate: function() {
+                            return $("<button>").attr("type", "button").text("Add")
+                                .on("click", function () {
+                                    showDetailsDialog("Add", {});
+                                });
+                        }
+                    }
+                ]
+            });
+
+            $("#detailsDialog").dialog({
+                autoOpen: false,
+                width: 400,
+                close: function() {
+                    $("#detailsForm").validate().resetForm();
+                    $("#detailsForm").find(".error").removeClass("error");
+                }
+            });
+
+            $("#detailsForm").validate({
+                rules: {
+                    name: "required",
+                    age: { required: true, range: [18, 150] },
+                    address: { required: true, minlength: 10 },
+                    country: "required"
+                },
+                messages: {
+                    name: "Please enter name",
+                    age: "Please enter valid age",
+                    address: "Please enter address (more than 10 chars)",
+                    country: "Please select country"
+                },
+                submitHandler: function() {
+                    formSubmitHandler();
+                }
+            });
+
+            var formSubmitHandler = $.noop;
+
+            var showDetailsDialog = function(dialogType, client) {
+                $("#name").val(client.Name);
+                $("#age").val(client.Age);
+                $("#address").val(client.Address);
+                $("#country").val(client.Country);
+                $("#married").prop("checked", client.Married);
+
+                formSubmitHandler = function() {
+                    saveClient(client, dialogType === "Add");
+                };
+
+                $("#detailsDialog").dialog("option", "title", dialogType + " Client")
+                    .dialog("open");
+            };
+
+            var saveClient = function(client, isNew) {
+                $.extend(client, {
+                    Name: $("#name").val(),
+                    Age: parseInt($("#age").val(), 10),
+                    Address: $("#address").val(),
+                    Country: parseInt($("#country").val(), 10),
+                    Married: $("#married").is(":checked")
+                });
+
+                $("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", client);
+
+                $("#detailsDialog").dialog("close");
+            };
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/db.js

@@ -0,0 +1,884 @@
+(function() {
+
+    var db = {
+
+        loadData: function(filter) {
+            return $.grep(this.clients, function(client) {
+                return (!filter.Name || client.Name.indexOf(filter.Name) > -1)
+                    && (filter.Age === undefined || client.Age === filter.Age)
+                    && (!filter.Address || client.Address.indexOf(filter.Address) > -1)
+                    && (!filter.Country || client.Country === filter.Country)
+                    && (filter.Married === undefined || client.Married === filter.Married);
+            });
+        },
+
+        insertItem: function(insertingClient) {
+            this.clients.push(insertingClient);
+        },
+
+        updateItem: function(updatingClient) { },
+
+        deleteItem: function(deletingClient) {
+            var clientIndex = $.inArray(deletingClient, this.clients);
+            this.clients.splice(clientIndex, 1);
+        }
+
+    };
+
+    window.db = db;
+
+
+    db.countries = [
+        { Name: "", Id: 0 },
+        { Name: "United States", Id: 1 },
+        { Name: "Canada", Id: 2 },
+        { Name: "United Kingdom", Id: 3 },
+        { Name: "France", Id: 4 },
+        { Name: "Brazil", Id: 5 },
+        { Name: "China", Id: 6 },
+        { Name: "Russia", Id: 7 }
+    ];
+
+    db.clients = [
+        {
+            "Name": "Otto Clay",
+            "Age": 61,
+            "Country": 6,
+            "Address": "Ap #897-1459 Quam Avenue",
+            "Married": false
+        },
+        {
+            "Name": "Connor Johnston",
+            "Age": 73,
+            "Country": 7,
+            "Address": "Ap #370-4647 Dis Av.",
+            "Married": false
+        },
+        {
+            "Name": "Lacey Hess",
+            "Age": 29,
+            "Country": 7,
+            "Address": "Ap #365-8835 Integer St.",
+            "Married": false
+        },
+        {
+            "Name": "Timothy Henson",
+            "Age": 78,
+            "Country": 1,
+            "Address": "911-5143 Luctus Ave",
+            "Married": false
+        },
+        {
+            "Name": "Ramona Benton",
+            "Age": 43,
+            "Country": 5,
+            "Address": "Ap #614-689 Vehicula Street",
+            "Married": true
+        },
+        {
+            "Name": "Ezra Tillman",
+            "Age": 51,
+            "Country": 1,
+            "Address": "P.O. Box 738, 7583 Quisque St.",
+            "Married": true
+        },
+        {
+            "Name": "Dante Carter",
+            "Age": 59,
+            "Country": 1,
+            "Address": "P.O. Box 976, 6316 Lorem, St.",
+            "Married": false
+        },
+        {
+            "Name": "Christopher Mcclure",
+            "Age": 58,
+            "Country": 1,
+            "Address": "847-4303 Dictum Av.",
+            "Married": true
+        },
+        {
+            "Name": "Ruby Rocha",
+            "Age": 62,
+            "Country": 2,
+            "Address": "5212 Sagittis Ave",
+            "Married": false
+        },
+        {
+            "Name": "Imelda Hardin",
+            "Age": 39,
+            "Country": 5,
+            "Address": "719-7009 Auctor Av.",
+            "Married": false
+        },
+        {
+            "Name": "Jonah Johns",
+            "Age": 28,
+            "Country": 5,
+            "Address": "P.O. Box 939, 9310 A Ave",
+            "Married": false
+        },
+        {
+            "Name": "Herman Rosa",
+            "Age": 49,
+            "Country": 7,
+            "Address": "718-7162 Molestie Av.",
+            "Married": true
+        },
+        {
+            "Name": "Arthur Gay",
+            "Age": 20,
+            "Country": 7,
+            "Address": "5497 Neque Street",
+            "Married": false
+        },
+        {
+            "Name": "Xena Wilkerson",
+            "Age": 63,
+            "Country": 1,
+            "Address": "Ap #303-6974 Proin Street",
+            "Married": true
+        },
+        {
+            "Name": "Lilah Atkins",
+            "Age": 33,
+            "Country": 5,
+            "Address": "622-8602 Gravida Ave",
+            "Married": true
+        },
+        {
+            "Name": "Malik Shepard",
+            "Age": 59,
+            "Country": 1,
+            "Address": "967-5176 Tincidunt Av.",
+            "Married": false
+        },
+        {
+            "Name": "Keely Silva",
+            "Age": 24,
+            "Country": 1,
+            "Address": "P.O. Box 153, 8995 Praesent Ave",
+            "Married": false
+        },
+        {
+            "Name": "Hunter Pate",
+            "Age": 73,
+            "Country": 7,
+            "Address": "P.O. Box 771, 7599 Ante, Road",
+            "Married": false
+        },
+        {
+            "Name": "Mikayla Roach",
+            "Age": 55,
+            "Country": 5,
+            "Address": "Ap #438-9886 Donec Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Upton Joseph",
+            "Age": 48,
+            "Country": 4,
+            "Address": "Ap #896-7592 Habitant St.",
+            "Married": true
+        },
+        {
+            "Name": "Jeanette Pate",
+            "Age": 59,
+            "Country": 2,
+            "Address": "P.O. Box 177, 7584 Amet, St.",
+            "Married": false
+        },
+        {
+            "Name": "Kaden Hernandez",
+            "Age": 79,
+            "Country": 3,
+            "Address": "366 Ut St.",
+            "Married": true
+        },
+        {
+            "Name": "Kenyon Stevens",
+            "Age": 20,
+            "Country": 3,
+            "Address": "P.O. Box 704, 4580 Gravida Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Jerome Harper",
+            "Age": 31,
+            "Country": 5,
+            "Address": "2464 Porttitor Road",
+            "Married": false
+        },
+        {
+            "Name": "Jelani Patel",
+            "Age": 36,
+            "Country": 2,
+            "Address": "P.O. Box 541, 5805 Nec Av.",
+            "Married": true
+        },
+        {
+            "Name": "Keaton Oconnor",
+            "Age": 21,
+            "Country": 1,
+            "Address": "Ap #657-1093 Nec, Street",
+            "Married": false
+        },
+        {
+            "Name": "Bree Johnston",
+            "Age": 31,
+            "Country": 2,
+            "Address": "372-5942 Vulputate Avenue",
+            "Married": false
+        },
+        {
+            "Name": "Maisie Hodges",
+            "Age": 70,
+            "Country": 7,
+            "Address": "P.O. Box 445, 3880 Odio, Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Kuame Calhoun",
+            "Age": 39,
+            "Country": 2,
+            "Address": "P.O. Box 609, 4105 Rutrum St.",
+            "Married": true
+        },
+        {
+            "Name": "Carlos Cameron",
+            "Age": 38,
+            "Country": 5,
+            "Address": "Ap #215-5386 A, Avenue",
+            "Married": false
+        },
+        {
+            "Name": "Fulton Parsons",
+            "Age": 25,
+            "Country": 7,
+            "Address": "P.O. Box 523, 3705 Sed Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Wallace Christian",
+            "Age": 43,
+            "Country": 3,
+            "Address": "416-8816 Mauris Avenue",
+            "Married": true
+        },
+        {
+            "Name": "Caryn Maldonado",
+            "Age": 40,
+            "Country": 1,
+            "Address": "108-282 Nonummy Ave",
+            "Married": false
+        },
+        {
+            "Name": "Whilemina Frank",
+            "Age": 20,
+            "Country": 7,
+            "Address": "P.O. Box 681, 3938 Egestas. Av.",
+            "Married": true
+        },
+        {
+            "Name": "Emery Moon",
+            "Age": 41,
+            "Country": 4,
+            "Address": "Ap #717-8556 Non Road",
+            "Married": true
+        },
+        {
+            "Name": "Price Watkins",
+            "Age": 35,
+            "Country": 4,
+            "Address": "832-7810 Nunc Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Lydia Castillo",
+            "Age": 59,
+            "Country": 7,
+            "Address": "5280 Placerat, Ave",
+            "Married": true
+        },
+        {
+            "Name": "Lawrence Conway",
+            "Age": 53,
+            "Country": 1,
+            "Address": "Ap #452-2808 Imperdiet St.",
+            "Married": false
+        },
+        {
+            "Name": "Kalia Nicholson",
+            "Age": 67,
+            "Country": 5,
+            "Address": "P.O. Box 871, 3023 Tellus Road",
+            "Married": true
+        },
+        {
+            "Name": "Brielle Baxter",
+            "Age": 45,
+            "Country": 3,
+            "Address": "Ap #822-9526 Ut, Road",
+            "Married": true
+        },
+        {
+            "Name": "Valentine Brady",
+            "Age": 72,
+            "Country": 7,
+            "Address": "8014 Enim. Road",
+            "Married": true
+        },
+        {
+            "Name": "Rebecca Gardner",
+            "Age": 57,
+            "Country": 4,
+            "Address": "8655 Arcu. Road",
+            "Married": true
+        },
+        {
+            "Name": "Vladimir Tate",
+            "Age": 26,
+            "Country": 1,
+            "Address": "130-1291 Non, Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Vernon Hays",
+            "Age": 56,
+            "Country": 4,
+            "Address": "964-5552 In Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Allegra Hull",
+            "Age": 22,
+            "Country": 4,
+            "Address": "245-8891 Donec St.",
+            "Married": true
+        },
+        {
+            "Name": "Hu Hendrix",
+            "Age": 65,
+            "Country": 7,
+            "Address": "428-5404 Tempus Ave",
+            "Married": true
+        },
+        {
+            "Name": "Kenyon Battle",
+            "Age": 32,
+            "Country": 2,
+            "Address": "921-6804 Lectus St.",
+            "Married": false
+        },
+        {
+            "Name": "Gloria Nielsen",
+            "Age": 24,
+            "Country": 4,
+            "Address": "Ap #275-4345 Lorem, Street",
+            "Married": true
+        },
+        {
+            "Name": "Illiana Kidd",
+            "Age": 59,
+            "Country": 2,
+            "Address": "7618 Lacus. Av.",
+            "Married": false
+        },
+        {
+            "Name": "Adria Todd",
+            "Age": 68,
+            "Country": 6,
+            "Address": "1889 Tincidunt Road",
+            "Married": false
+        },
+        {
+            "Name": "Kirsten Mayo",
+            "Age": 71,
+            "Country": 1,
+            "Address": "100-8640 Orci, Avenue",
+            "Married": false
+        },
+        {
+            "Name": "Willa Hobbs",
+            "Age": 60,
+            "Country": 6,
+            "Address": "P.O. Box 323, 158 Tristique St.",
+            "Married": false
+        },
+        {
+            "Name": "Alexis Clements",
+            "Age": 69,
+            "Country": 5,
+            "Address": "P.O. Box 176, 5107 Proin Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Akeem Conrad",
+            "Age": 60,
+            "Country": 2,
+            "Address": "282-495 Sed Ave",
+            "Married": true
+        },
+        {
+            "Name": "Montana Silva",
+            "Age": 79,
+            "Country": 6,
+            "Address": "P.O. Box 120, 9766 Consectetuer St.",
+            "Married": false
+        },
+        {
+            "Name": "Kaseem Hensley",
+            "Age": 77,
+            "Country": 6,
+            "Address": "Ap #510-8903 Mauris. Av.",
+            "Married": true
+        },
+        {
+            "Name": "Christopher Morton",
+            "Age": 35,
+            "Country": 5,
+            "Address": "P.O. Box 234, 3651 Sodales Avenue",
+            "Married": false
+        },
+        {
+            "Name": "Wade Fernandez",
+            "Age": 49,
+            "Country": 6,
+            "Address": "740-5059 Dolor. Road",
+            "Married": true
+        },
+        {
+            "Name": "Illiana Kirby",
+            "Age": 31,
+            "Country": 2,
+            "Address": "527-3553 Mi Ave",
+            "Married": false
+        },
+        {
+            "Name": "Kimberley Hurley",
+            "Age": 65,
+            "Country": 5,
+            "Address": "P.O. Box 637, 9915 Dictum St.",
+            "Married": false
+        },
+        {
+            "Name": "Arthur Olsen",
+            "Age": 74,
+            "Country": 5,
+            "Address": "887-5080 Eget St.",
+            "Married": false
+        },
+        {
+            "Name": "Brody Potts",
+            "Age": 59,
+            "Country": 2,
+            "Address": "Ap #577-7690 Sem Road",
+            "Married": false
+        },
+        {
+            "Name": "Dillon Ford",
+            "Age": 60,
+            "Country": 1,
+            "Address": "Ap #885-9289 A, Av.",
+            "Married": true
+        },
+        {
+            "Name": "Hannah Juarez",
+            "Age": 61,
+            "Country": 2,
+            "Address": "4744 Sapien, Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Vincent Shaffer",
+            "Age": 25,
+            "Country": 2,
+            "Address": "9203 Nunc St.",
+            "Married": true
+        },
+        {
+            "Name": "George Holt",
+            "Age": 27,
+            "Country": 6,
+            "Address": "4162 Cras Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Tobias Bartlett",
+            "Age": 74,
+            "Country": 4,
+            "Address": "792-6145 Mauris St.",
+            "Married": true
+        },
+        {
+            "Name": "Xavier Hooper",
+            "Age": 35,
+            "Country": 1,
+            "Address": "879-5026 Interdum. Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Declan Dorsey",
+            "Age": 31,
+            "Country": 2,
+            "Address": "Ap #926-4171 Aenean Road",
+            "Married": true
+        },
+        {
+            "Name": "Clementine Tran",
+            "Age": 43,
+            "Country": 4,
+            "Address": "P.O. Box 176, 9865 Eu Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Pamela Moody",
+            "Age": 55,
+            "Country": 6,
+            "Address": "622-6233 Luctus Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Julie Leon",
+            "Age": 43,
+            "Country": 6,
+            "Address": "Ap #915-6782 Sem Av.",
+            "Married": true
+        },
+        {
+            "Name": "Shana Nolan",
+            "Age": 79,
+            "Country": 5,
+            "Address": "P.O. Box 603, 899 Eu St.",
+            "Married": false
+        },
+        {
+            "Name": "Vaughan Moody",
+            "Age": 37,
+            "Country": 5,
+            "Address": "880 Erat Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Randall Reeves",
+            "Age": 44,
+            "Country": 3,
+            "Address": "1819 Non Street",
+            "Married": false
+        },
+        {
+            "Name": "Dominic Raymond",
+            "Age": 68,
+            "Country": 1,
+            "Address": "Ap #689-4874 Nisi Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Lev Pugh",
+            "Age": 69,
+            "Country": 5,
+            "Address": "Ap #433-6844 Auctor Avenue",
+            "Married": true
+        },
+        {
+            "Name": "Desiree Hughes",
+            "Age": 80,
+            "Country": 4,
+            "Address": "605-6645 Fermentum Avenue",
+            "Married": true
+        },
+        {
+            "Name": "Idona Oneill",
+            "Age": 23,
+            "Country": 7,
+            "Address": "751-8148 Aliquam Avenue",
+            "Married": true
+        },
+        {
+            "Name": "Lani Mayo",
+            "Age": 76,
+            "Country": 1,
+            "Address": "635-2704 Tristique St.",
+            "Married": true
+        },
+        {
+            "Name": "Cathleen Bonner",
+            "Age": 40,
+            "Country": 1,
+            "Address": "916-2910 Dolor Av.",
+            "Married": false
+        },
+        {
+            "Name": "Sydney Murray",
+            "Age": 44,
+            "Country": 5,
+            "Address": "835-2330 Fringilla St.",
+            "Married": false
+        },
+        {
+            "Name": "Brenna Rodriguez",
+            "Age": 77,
+            "Country": 6,
+            "Address": "3687 Imperdiet Av.",
+            "Married": true
+        },
+        {
+            "Name": "Alfreda Mcdaniel",
+            "Age": 38,
+            "Country": 7,
+            "Address": "745-8221 Aliquet Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Zachery Atkins",
+            "Age": 30,
+            "Country": 1,
+            "Address": "549-2208 Auctor. Road",
+            "Married": true
+        },
+        {
+            "Name": "Amelia Rich",
+            "Age": 56,
+            "Country": 4,
+            "Address": "P.O. Box 734, 4717 Nunc Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Kiayada Witt",
+            "Age": 62,
+            "Country": 3,
+            "Address": "Ap #735-3421 Malesuada Avenue",
+            "Married": false
+        },
+        {
+            "Name": "Lysandra Pierce",
+            "Age": 36,
+            "Country": 1,
+            "Address": "Ap #146-2835 Curabitur St.",
+            "Married": true
+        },
+        {
+            "Name": "Cara Rios",
+            "Age": 58,
+            "Country": 4,
+            "Address": "Ap #562-7811 Quam. Ave",
+            "Married": true
+        },
+        {
+            "Name": "Austin Andrews",
+            "Age": 55,
+            "Country": 7,
+            "Address": "P.O. Box 274, 5505 Sociis Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Lillian Peterson",
+            "Age": 39,
+            "Country": 2,
+            "Address": "6212 A Avenue",
+            "Married": false
+        },
+        {
+            "Name": "Adria Beach",
+            "Age": 29,
+            "Country": 2,
+            "Address": "P.O. Box 183, 2717 Nunc Avenue",
+            "Married": true
+        },
+        {
+            "Name": "Oleg Durham",
+            "Age": 80,
+            "Country": 4,
+            "Address": "931-3208 Nunc Rd.",
+            "Married": false
+        },
+        {
+            "Name": "Casey Reese",
+            "Age": 60,
+            "Country": 4,
+            "Address": "383-3675 Ultrices, St.",
+            "Married": false
+        },
+        {
+            "Name": "Kane Burnett",
+            "Age": 80,
+            "Country": 1,
+            "Address": "759-8212 Dolor. Ave",
+            "Married": false
+        },
+        {
+            "Name": "Stewart Wilson",
+            "Age": 46,
+            "Country": 7,
+            "Address": "718-7845 Sagittis. Av.",
+            "Married": false
+        },
+        {
+            "Name": "Charity Holcomb",
+            "Age": 31,
+            "Country": 6,
+            "Address": "641-7892 Enim. Ave",
+            "Married": false
+        },
+        {
+            "Name": "Kyra Cummings",
+            "Age": 43,
+            "Country": 4,
+            "Address": "P.O. Box 702, 6621 Mus. Av.",
+            "Married": false
+        },
+        {
+            "Name": "Stuart Wallace",
+            "Age": 25,
+            "Country": 7,
+            "Address": "648-4990 Sed Rd.",
+            "Married": true
+        },
+        {
+            "Name": "Carter Clarke",
+            "Age": 59,
+            "Country": 6,
+            "Address": "Ap #547-2921 A Street",
+            "Married": false
+        }
+    ];
+
+    db.users = [
+        {
+            "ID": "x",
+            "Account": "A758A693-0302-03D1-AE53-EEFE22855556",
+            "Name": "Carson Kelley",
+            "RegisterDate": "2002-04-20T22:55:52-07:00"
+        },
+        {
+            "Account": "D89FF524-1233-0CE7-C9E1-56EFF017A321",
+            "Name": "Prescott Griffin",
+            "RegisterDate": "2011-02-22T05:59:55-08:00"
+        },
+        {
+            "Account": "06FAAD9A-5114-08F6-D60C-961B2528B4F0",
+            "Name": "Amir Saunders",
+            "RegisterDate": "2014-08-13T09:17:49-07:00"
+        },
+        {
+            "Account": "EED7653D-7DD9-A722-64A8-36A55ECDBE77",
+            "Name": "Derek Thornton",
+            "RegisterDate": "2012-02-27T01:31:07-08:00"
+        },
+        {
+            "Account": "2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6",
+            "Name": "Fletcher Romero",
+            "RegisterDate": "2010-06-25T15:49:54-07:00"
+        },
+        {
+            "Account": "3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286",
+            "Name": "Thaddeus Stein",
+            "RegisterDate": "2013-11-10T07:29:41-08:00"
+        },
+        {
+            "Account": "658DBF5A-176E-569A-9273-74FB5F69FA42",
+            "Name": "Nash Knapp",
+            "RegisterDate": "2005-06-24T09:11:19-07:00"
+        },
+        {
+            "Account": "76D2EE4B-7A73-1212-F6F2-957EF8C1F907",
+            "Name": "Quamar Vega",
+            "RegisterDate": "2011-04-13T20:06:29-07:00"
+        },
+        {
+            "Account": "00E46809-A595-CE82-C5B4-D1CAEB7E3E58",
+            "Name": "Philip Galloway",
+            "RegisterDate": "2008-08-21T18:59:38-07:00"
+        },
+        {
+            "Account": "C196781C-DDCC-AF83-DDC2-CA3E851A47A0",
+            "Name": "Mason French",
+            "RegisterDate": "2000-11-15T00:38:37-08:00"
+        },
+        {
+            "Account": "5911F201-818A-B393-5888-13157CE0D63F",
+            "Name": "Ross Cortez",
+            "RegisterDate": "2010-05-27T17:35:32-07:00"
+        },
+        {
+            "Account": "B8BB78F9-E1A1-A956-086F-E12B6FE168B6",
+            "Name": "Logan King",
+            "RegisterDate": "2003-07-08T16:58:06-07:00"
+        },
+        {
+            "Account": "06F636C3-9599-1A2D-5FD5-86B24ADDE626",
+            "Name": "Cedric Leblanc",
+            "RegisterDate": "2011-06-30T14:30:10-07:00"
+        },
+        {
+            "Account": "FE880CDD-F6E7-75CB-743C-64C6DE192412",
+            "Name": "Simon Sullivan",
+            "RegisterDate": "2013-06-11T16:35:07-07:00"
+        },
+        {
+            "Account": "BBEDD673-E2C1-4872-A5D3-C4EBD4BE0A12",
+            "Name": "Jamal West",
+            "RegisterDate": "2001-03-16T20:18:29-08:00"
+        },
+        {
+            "Account": "19BC22FA-C52E-0CC6-9552-10365C755FAC",
+            "Name": "Hector Morales",
+            "RegisterDate": "2012-11-01T01:56:34-07:00"
+        },
+        {
+            "Account": "A8292214-2C13-5989-3419-6B83DD637D6C",
+            "Name": "Herrod Hart",
+            "RegisterDate": "2008-03-13T19:21:04-07:00"
+        },
+        {
+            "Account": "0285564B-F447-0E7F-EAA1-7FB8F9C453C8",
+            "Name": "Clark Maxwell",
+            "RegisterDate": "2004-08-05T08:22:24-07:00"
+        },
+        {
+            "Account": "EA78F076-4F6E-4228-268C-1F51272498AE",
+            "Name": "Reuben Walter",
+            "RegisterDate": "2011-01-23T01:55:59-08:00"
+        },
+        {
+            "Account": "6A88C194-EA21-426F-4FE2-F2AE33F51793",
+            "Name": "Ira Ingram",
+            "RegisterDate": "2008-08-15T05:57:46-07:00"
+        },
+        {
+            "Account": "4275E873-439C-AD26-56B3-8715E336508E",
+            "Name": "Damian Morrow",
+            "RegisterDate": "2015-09-13T01:50:55-07:00"
+        },
+        {
+            "Account": "A0D733C4-9070-B8D6-4387-D44F0BA515BE",
+            "Name": "Macon Farrell",
+            "RegisterDate": "2011-03-14T05:41:40-07:00"
+        },
+        {
+            "Account": "B3683DE8-C2FA-7CA0-A8A6-8FA7E954F90A",
+            "Name": "Joel Galloway",
+            "RegisterDate": "2003-02-03T04:19:01-08:00"
+        },
+        {
+            "Account": "01D95A8E-91BC-2050-F5D0-4437AAFFD11F",
+            "Name": "Rigel Horton",
+            "RegisterDate": "2015-06-20T11:53:11-07:00"
+        },
+        {
+            "Account": "F0D12CC0-31AC-A82E-FD73-EEEFDBD21A36",
+            "Name": "Sylvester Gaines",
+            "RegisterDate": "2004-03-12T09:57:13-08:00"
+        },
+        {
+            "Account": "874FCC49-9A61-71BC-2F4E-2CE88348AD7B",
+            "Name": "Abbot Mckay",
+            "RegisterDate": "2008-12-26T20:42:57-08:00"
+        },
+        {
+            "Account": "B8DA1912-20A0-FB6E-0031-5F88FD63EF90",
+            "Name": "Solomon Green",
+            "RegisterDate": "2013-09-04T01:44:47-07:00"
+        }
+     ];
+
+}());

plugins/jsgrid/demos/demos.css

@@ -0,0 +1,82 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    height: 100%;
+    padding: 10px;
+    color: #262626;
+    font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+    font-size: 14px;
+    font-weight: 300;
+}
+
+h1 {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+    font-weight: 300;
+}
+
+h2 {
+    margin: 16px 0 8px 0;
+    font-size: 18px;
+    font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+    font-weight: 300;
+}
+
+ul {
+    list-style: none;
+}
+
+a {
+    color: #2ba6cb;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+    color: #258faf;
+}
+
+input, button, select {
+    font-family: 'Helvetica Neue Light', 'Open Sans', Helvetica;
+    font-weight: 300;
+    font-size: 14px;
+    padding: 2px;
+}
+
+.navigation {
+    width: 200px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding: 10px;
+    border-right: 1px solid #e9e9e9;
+}
+
+.navigation li {
+    margin: 10px 0;
+}
+
+.demo-frame {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 200px;
+}
+
+iframe[name='demo'] {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+}

plugins/jsgrid/demos/external-pager.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - External Pager Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+
+    <style>
+        .external-pager {
+            margin: 10px 0;
+        }
+
+        .external-pager .jsgrid-pager-current-page {
+            background: #c4e2ff;
+            color: #fff;
+        }
+    </style>
+</head>
+<body>
+    <h1>External Customized Pager</h1>
+    <div id="externalPager" class="external-pager"></div>
+
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                paging: true,
+                pageSize: 15,
+                pageButtonCount: 5,
+                pagerContainer: "#externalPager",
+                pagerFormat: "current page: {pageIndex} &nbsp;&nbsp; {first} {prev} {pages} {next} {last} &nbsp;&nbsp; total pages: {pageCount} total items: {itemCount}",
+                pagePrevText: "<",
+                pageNextText: ">",
+                pageFirstText: "<<",
+                pageLastText: ">>",
+                pageNavigatorNextText: "&#8230;",
+                pageNavigatorPrevText: "&#8230;",
+                fields: [
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", type: "checkbox", title: "Is Married" }
+                ],
+                data: db.clients
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Simple jQuery DataGrid - Demos</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+</head>
+<body>
+    <div class="navigation">
+        <h1>jsGrid Demos</h1>
+        <ul>
+            <li><a href="basic.html" target="demo">Basic Scenario</a></li>
+            <li><a href="static-data.html" target="demo">Static Data</a></li>
+            <li><a href="odata-service.html" target="demo">OData Service</a></li>
+            <li><a href="data-manipulation.html" target="demo">Data Manipulation</a></li>
+            <li><a href="validation.html" target="demo">Validation</a></li>
+            <li><a href="sorting.html" target="demo">Sorting</a></li>
+            <li><a href="loading-by-page.html" target="demo">Loading by Page</a></li>
+            <li><a href="custom-view.html" target="demo">Custom View</a></li>
+            <li><a href="custom-row-renderer.html" target="demo">Custom Row Renderer</a></li>
+            <li><a href="external-pager.html" target="demo">External Pager</a></li>
+            <li><a href="custom-grid-field.html" target="demo">Custom Grid Field</a></li>
+            <li><a href="localization.html" target="demo">Localization</a></li>
+        </ul>
+    </div>
+    <div class="demo-frame">
+        <iframe name="demo" src="basic.html"></iframe>
+    </div>
+</body>
+</html>

plugins/jsgrid/demos/loading-by-page.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Loading Data by Page Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+
+    <style>
+        .pager-panel {
+            padding: 10px;
+            margin: 10px 0;
+            background: #fcfcfc;
+            border: 1px solid #e9e9e9;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <h1>Loading Data by Page</h1>
+    <div class="pager-panel">
+        <label>Page:
+            <select id="pager">
+                <option>1</option>
+                <option selected>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+                <option>6</option>
+                <option>7</option>
+            </select>
+        </label>
+    </div>
+
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                autoload: true,
+                paging: true,
+                pageLoading: true,
+                pageSize: 15,
+                pageIndex: 2,
+                controller: {
+                    loadData: function(filter) {
+                        var startIndex = (filter.pageIndex - 1) * filter.pageSize;
+                        return {
+                            data: db.clients.slice(startIndex, startIndex + filter.pageSize),
+                            itemsCount: db.clients.length
+                        };
+                    }
+                },
+                fields: [
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", type: "checkbox", title: "Is Married" }
+                ]
+            });
+
+            $("#pager").on("change", function() {
+                var page = parseInt($(this).val(), 10);
+                $("#jsGrid").jsGrid("openPage", page);
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/localization.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Localization (FR)</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.validation.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+    <script src="../src/i18n/fr.js"></script>
+</head>
+<body>
+    <h1>Localization (FR)</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            jsGrid.locale("fr");
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                filtering: true,
+                editing: true,
+                inserting: true,
+                sorting: true,
+                paging: true,
+                autoload: true,
+                pageSize: 15,
+                pageButtonCount: 5,
+                controller: db,
+                fields: [
+                    { name: "Name", title: "Nom", type: "text", width: 150, validate: "required" },
+                    { name: "Age", title: "Âge", type: "number", width: 50, validate: { validator: "range", param: [18,80] } },
+                    { name: "Address", title: "Adresse", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } },
+                    { name: "Country", title: "Pays", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", title: "Marié", type: "checkbox", sorting: false },
+                    { type: "control" }
+                ]
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/odata-service.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - OData Service Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.textarea.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+
+    <style>
+        .rating {
+            color: #F8CA03;
+        }
+    </style>
+</head>
+<body>
+    <h1>OData Service</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "auto",
+                width: "auto",
+                sorting: true,
+                paging: false,
+                autoload: true,
+                controller: {
+                    loadData: function() {
+                        var d = $.Deferred();
+
+                        $.ajax({
+                            url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products",
+                            dataType: "json"
+                        }).done(function(response) {
+                            d.resolve(response.value);
+                        });
+
+                        return d.promise();
+                    }
+                },
+                fields: [
+                    { name: "Name", type: "text", width: 100 },
+                    { name: "Description", type: "textarea", width: 200 },
+                    { name: "Rating", type: "number", width: 150, align: "center",
+                        itemTemplate: function(value) {
+                            return $("<div>").addClass("rating").append(Array(value + 1).join("&#9733;"));
+                        }
+                    },
+                    { name: "Price", type: "number", width: 100,
+                        itemTemplate: function(value) {
+                            return value.toFixed(2) + "$"; }
+                    }
+                ]
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/rows-reordering.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Rows Reordering Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
+    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
+    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+</head>
+<body>
+<h1>Rows Reordering Scenario</h1>
+<div id="jsGrid"></div>
+
+<script>
+    $(function() {
+
+        $("#jsGrid").jsGrid({
+            height: "70%",
+            width: "100%",
+            autoload: true,
+
+            rowClass: function(item, itemIndex) {
+                return "client-" + itemIndex;
+            },
+
+            controller: {
+                loadData: function() {
+                    return db.clients.slice(0, 15);
+                }
+            },
+
+            fields: [
+                { name: "Name", type: "text", width: 150 },
+                { name: "Age", type: "number", width: 50 },
+                { name: "Address", type: "text", width: 200 },
+                { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                { name: "Married", type: "checkbox", title: "Is Married", sorting: false }
+            ],
+
+            onRefreshed: function() {
+                var $gridData = $("#jsGrid .jsgrid-grid-body tbody");
+
+                $gridData.sortable({
+                    update: function(e, ui) {
+                        // array of indexes
+                        var clientIndexRegExp = /\s*client-(\d+)\s*/;
+                        var indexes = $.map($gridData.sortable("toArray", { attribute: "class" }), function(classes) {
+                            return clientIndexRegExp.exec(classes)[1];
+                        });
+                        alert("Reordered indexes: " + indexes.join(", "));
+
+                        // arrays of items
+                        var items = $.map($gridData.find("tr"), function(row) {
+                            return $(row).data("JSGridItem");
+                        });
+                        console && console.log("Reordered items", items);
+                    }
+                });
+            }
+        });
+
+    });
+</script>
+</body>
+</html>

plugins/jsgrid/demos/sorting.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Sorting Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+
+    <style>
+        .sort-panel {
+            padding: 10px;
+            margin: 10px 0;
+            background: #fcfcfc;
+            border: 1px solid #e9e9e9;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <h1>Sorting</h1>
+    <div class="sort-panel">
+        <label>Sorting Field:
+            <select id="sortingField">
+                <option>Name</option>
+                <option>Age</option>
+                <option>Address</option>
+                <option>Country</option>
+                <option>Married</option>
+            </select>
+            <button type="button" id="sort">Sort</button>
+        </label>
+    </div>
+
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                autoload: true,
+                selecting: false,
+                controller: db,
+                fields: [
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", type: "checkbox", title: "Is Married" }
+                ]
+            });
+
+            $("#sort").click(function() {
+                var field = $("#sortingField").val();
+                $("#jsGrid").jsGrid("sort", field);
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/static-data.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Static Data Scenario</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+</head>
+<body>
+    <h1>Static Data</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                sorting: true,
+                paging: true,
+                fields: [
+                    { name: "Name", type: "text", width: 150 },
+                    { name: "Age", type: "number", width: 50 },
+                    { name: "Address", type: "text", width: 200 },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+                    { name: "Married", type: "checkbox", title: "Is Married" }
+                ],
+                data: db.clients
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/demos/validation.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>jsGrid - Validation</title>
+    <link rel="stylesheet" type="text/css" href="demos.css" />
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600,400' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" type="text/css" href="../css/jsgrid.css" />
+    <link rel="stylesheet" type="text/css" href="../css/theme.css" />
+
+    <script src="../external/jquery/jquery-1.8.3.js"></script>
+    <script src="db.js"></script>
+
+    <script src="../src/jsgrid.core.js"></script>
+    <script src="../src/jsgrid.load-indicator.js"></script>
+    <script src="../src/jsgrid.load-strategies.js"></script>
+    <script src="../src/jsgrid.sort-strategies.js"></script>
+    <script src="../src/jsgrid.validation.js"></script>
+    <script src="../src/jsgrid.field.js"></script>
+    <script src="../src/fields/jsgrid.field.text.js"></script>
+    <script src="../src/fields/jsgrid.field.number.js"></script>
+    <script src="../src/fields/jsgrid.field.select.js"></script>
+    <script src="../src/fields/jsgrid.field.checkbox.js"></script>
+    <script src="../src/fields/jsgrid.field.control.js"></script>
+</head>
+<body>
+    <h1>Validation</h1>
+    <div id="jsGrid"></div>
+
+    <script>
+        $(function() {
+
+            $("#jsGrid").jsGrid({
+                height: "70%",
+                width: "100%",
+                filtering: true,
+                editing: true,
+                inserting: true,
+                sorting: true,
+                paging: true,
+                autoload: true,
+                pageSize: 15,
+                pageButtonCount: 5,
+                deleteConfirm: "Do you really want to delete the client?",
+                controller: db,
+                fields: [
+                    { name: "Name", type: "text", width: 150, validate: "required" },
+                    { name: "Age", type: "number", width: 50, validate: { validator: "range", param: [18,80] } },
+                    { name: "Address", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } },
+                    { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name",
+                        validate: { message: "Country should be specified", validator: function(value) { return value > 0; } } },
+                    { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
+                    { type: "control" }
+                ]
+            });
+
+        });
+    </script>
+</body>
+</html>

plugins/jsgrid/i18n/jsgrid-de.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales.de = {
+        grid: {
+            noDataContent: "Die Daten konnten nicht gefunden werden",
+            deleteConfirm: "Möchten Sie die Daten unwiederruflich löschen?",
+            pagerFormat: "Seiten: {first} {prev} {pages} {next} {last}    {pageIndex} von {pageCount}",
+            pagePrevText: "<",
+            pageNextText: ">",
+            pageFirstText: "<<",
+            pageLastText: ">>",
+            loadMessage: "Bitte warten...",
+            invalidMessage: "Ihre Eingabe ist nicht zulässig!"
+        },
+
+        loadIndicator: {
+            message: "Lädt..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Suche",
+                insertModeButtonTooltip: "Eintrag hinzufügen",
+                editButtonTooltip: "Bearbeiten",
+                deleteButtonTooltip: "Löschen",
+                searchButtonTooltip: "Eintrag finden",
+                clearFilterButtonTooltip: "Filter zurücksetzen",
+                insertButtonTooltip: "Hinzufügen",
+                updateButtonTooltip: "Speichern",
+                cancelEditButtonTooltip: "Abbrechen"
+            }
+        },
+
+        validators: {
+            required: { message: "Dies ist ein Pflichtfeld" },
+            rangeLength: { message: "Die Länge der Eingabe liegt außerhalb des zulässigen Bereichs" },
+            minLength: { message: "Die Eingabe ist zu kurz" },
+            maxLength: { message: "Die Eingabe ist zu lang" },
+            pattern: { message: "Die Eingabe entspricht nicht dem gewünschten Muster" },
+            range: { message: "Der eingegebene Wert liegt außerhalb des zulässigen Bereichs" },
+            min: { message: "Der eingegebene Wert ist zu niedrig" },
+            max: { message: "Der eingegebene Wert ist zu hoch" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-es.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales.es = {
+        grid: {
+            noDataContent: "No encontrado",
+            deleteConfirm: "¿Está seguro?",
+            pagerFormat: "Paginas: {first} {prev} {pages} {next} {last}    {pageIndex} de {pageCount}",
+            pagePrevText: "Anterior",
+            pageNextText: "Siguiente",
+            pageFirstText: "Primero",
+            pageLastText: "Ultimo",
+            loadMessage: "Por favor, espere...",
+            invalidMessage: "¡Datos no válidos!"
+        },
+
+        loadIndicator: {
+            message: "Cargando..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Cambiar a búsqueda",
+                insertModeButtonTooltip: "Cambiar a inserción",
+                editButtonTooltip: "Editar",
+                deleteButtonTooltip: "Suprimir",
+                searchButtonTooltip: "Buscar",
+                clearFilterButtonTooltip: "Borrar filtro",
+                insertButtonTooltip: "Insertar",
+                updateButtonTooltip: "Actualizar",
+                cancelEditButtonTooltip: "Cancelar edición"
+            }
+        },
+
+        validators: {
+            required: { message: "Campo requerido" },
+            rangeLength: { message: "La longitud del valor está fuera del intervalo definido" },
+            minLength: { message: "La longitud del valor es demasiado corta" },
+            maxLength: { message: "La longitud del valor es demasiado larga" },
+            pattern: { message: "El valor no se ajusta al patrón definido" },
+            range: { message: "Valor fuera del rango definido" },
+            min: { message: "Valor demasiado bajo" },
+            max: { message: "Valor demasiado alto" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-fr.js

@@ -0,0 +1,47 @@
+(function(jsGrid) {
+
+    jsGrid.locales.fr = {
+        grid: {
+            noDataContent: "Pas de données",
+            deleteConfirm: "Êtes-vous sûr ?",
+            pagerFormat: "Pages: {first} {prev} {pages} {next} {last}    {pageIndex} de {pageCount}",
+            pagePrevText: "<",
+            pageNextText: ">",
+            pageFirstText: "<<",
+            pageLastText: ">>",
+            loadMessage: "Chargement en cours...",
+            invalidMessage: "Des données incorrectes sont entrés !"
+        },
+
+        loadIndicator: {
+            message: "Chargement en cours..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Recherche",
+                insertModeButtonTooltip: "Ajouter une entrée",
+                editButtonTooltip: "Changer",
+                deleteButtonTooltip: "Effacer",
+                searchButtonTooltip: "Trouve",
+                clearFilterButtonTooltip: "Effacer",
+                insertButtonTooltip: "Ajouter",
+                updateButtonTooltip: "Sauvegarder",
+                cancelEditButtonTooltip: "Annuler"
+            }
+        },
+
+        validators: {
+            required: { message: "Champ requis" },
+            rangeLength: { message: "Longueur de la valeur du champ est hors de la plage définie" },
+            minLength: { message: "La valeur du champ est trop court" },
+            maxLength: { message: "La valeur du champ est trop long" },
+            pattern: { message: "La valeur du champ ne correspond pas à la configuration définie" },
+            range: { message: "La valeur du champ est hors de la plage définie" },
+            min: { message: "La valeur du champ est trop petit" },
+            max: { message: "La valeur du champ est trop grande" }
+        }
+    };
+
+}(jsGrid, jQuery));
+

plugins/jsgrid/i18n/jsgrid-he.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales.he = {
+        grid: {
+            noDataContent: "לא נמצא",
+            deleteConfirm: "האם אתה בטוח?",
+            pagerFormat: "עמודים: {first} {prev} {pages} {next} {last}    {pageIndex} מתוך {pageCount}",
+            pagePrevText: "הקודם",
+            pageNextText: "הבא",
+            pageFirstText: "ראשון",
+            pageLastText: "אחרון",
+            loadMessage: "אנא המתן ...",
+            invalidMessage: "נתונים לא חוקיים!"
+        },
+
+        loadIndicator: {
+            message: "טוען..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "ביצוע חיפוש",
+                insertModeButtonTooltip: "ביצוע עריכת שורה",
+                editButtonTooltip: "עריכה",
+                deleteButtonTooltip: "מחיקה",
+                searchButtonTooltip: "חיפוש",
+                clearFilterButtonTooltip: "ניקוי מסנן",
+                insertButtonTooltip: "הכנסה",
+                updateButtonTooltip: "עדכון",
+                cancelEditButtonTooltip: "ביטול עריכה"
+            }
+        },
+
+        validators: {
+            required: { message: "שדה נדרש" },
+            rangeLength: { message: "אורכו של הערך הוא מחוץ לטווח המוגדר" },
+            minLength: { message: "אורכו של הערך קצר מדי" },
+            maxLength: { message: "אורכו של הערך ארוך מדי" },
+            pattern: { message: "אורכו של הערך ארוך מדי" },
+            range: { message: "ערך מחוץ לטווח" },
+            min: { message: "ערך נמוך מדי" },
+            max: { message: "גבוה מדי" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-ja.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales.ja = {
+        grid: {
+            noDataContent: "データが見つかりません。",
+            deleteConfirm: "削除しますよろしですか。",
+            pagerFormat: "頁: {first} {prev} {pages} {next} {last}    【{pageIndex}／{pageCount}】",
+            pagePrevText: "前",
+            pageNextText: "次",
+            pageFirstText: "最初",
+            pageLastText: "最後",
+            loadMessage: "しばらくお待ちください…",
+            invalidMessage: "入力されたデータが不正です。"
+        },
+
+        loadIndicator: {
+            message: "処理中…"
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "検索モードへ",
+                insertModeButtonTooltip: "登録モードへ",
+                editButtonTooltip: "編集",
+                deleteButtonTooltip: "削除",
+                searchButtonTooltip: "フィルター",
+                clearFilterButtonTooltip: "クリア",
+                insertButtonTooltip: "登録",
+                updateButtonTooltip: "更新",
+                cancelEditButtonTooltip: "編集戻す"
+            }
+        },
+
+        validators: {
+            required: { message: "項目が必要です。" },
+            rangeLength: { message: "項目の桁数が範囲外です。" },
+            minLength: { message: "項目の桁数が超過しています。" },
+            maxLength: { message: "項目の桁数が不足しています。" },
+            pattern: { message: "項目の値がパターンに一致しません。" },
+            range: { message: "項目の値が範囲外です。" },
+            min: { message: "項目の値が超過しています。" },
+            max: { message: "項目の値が不足しています。" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-ka.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales.ka = {
+        grid: {
+            noDataContent: "მონაცემები ცარიელია.",
+            deleteConfirm: "ნამდვილად გსურთ ჩანაწერის წაშლა?",
+            pagerFormat: "გვერდები: {first} {prev} {pages} {next} {last}    {pageIndex} - {pageCount} დან.",
+            pagePrevText: "<",
+            pageNextText: ">",
+            pageFirstText: "<<",
+            pageLastText: ">>",
+            loadMessage: "გთხოვთ დაიცადოთ...",
+            invalidMessage: "შეყვანილია არასწორი მონაცემები!"
+        },
+
+        loadIndicator: {
+            message: "მიმდინარეობს ჩატვირთვა..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "ძებნა",
+                insertModeButtonTooltip: "ჩანაწერის დამატება",
+                editButtonTooltip: "შესწორება",
+                deleteButtonTooltip: "წაშლა",
+                searchButtonTooltip: "ძებნა",
+                clearFilterButtonTooltip: "ფილტრის გასუფთავება",
+                insertButtonTooltip: "დამატება",
+                updateButtonTooltip: "შენახვა",
+                cancelEditButtonTooltip: "გაუქმება"
+            }
+        },
+
+        validators: {
+            required: { message: "ველი აუცილებელია შესავსებად." },
+            rangeLength: { message: "შეყვანილი ჩანაწერის ზომა არ ექვემდებარება დიაპაზონს." },
+            minLength: { message: "შეყვანილი ჩანაწერის ზომა საკმაოდ პატარა არის." },
+            maxLength: { message: "შეყვანილი ჩანაწერის ზომა საკმაოდ დიდი არის." },
+            pattern: { message: "შეყვანილი მნიშვნელობა არ ემთხვევა მითითებულ შაბლონს." },
+            range: { message: "შეყვანილი ინფორმაცია არ ჯდება დიაპაზონში." },
+            min: { message: "შეყვანილი ინფორმაციის ზომა საკმაოდ პატარა არის." },
+            max: { message: "შეყვანილი ინფორმაციის ზომა საკმაოდ დიდი არის." }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-pl.js

@@ -0,0 +1,62 @@
+(function(jsGrid) {
+
+    jsGrid.locales.pl = {
+        grid: {
+            noDataContent: "Nie znaleziono",
+            deleteConfirm: "Czy jesteś pewien?",
+            pagerFormat: "Strony: {first} {prev} {pages} {next} {last}    {pageIndex} z {pageCount}",
+            pagePrevText: "Poprzednia",
+            pageNextText: "Następna",
+            pageFirstText: "Pierwsza",
+            pageLastText: "Ostatnia",
+            loadMessage: "Proszę czekać...",
+            invalidMessage: "Wprowadzono nieprawidłowe dane!"
+        },
+
+        loadIndicator: {
+            message: "Ładowanie..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Wyszukiwanie",
+                insertModeButtonTooltip: "Dodawanie",
+                editButtonTooltip: "Edytuj",
+                deleteButtonTooltip: "Usuń",
+                searchButtonTooltip: "Szukaj",
+                clearFilterButtonTooltip: "Wyczyść filtr",
+                insertButtonTooltip: "Dodaj",
+                updateButtonTooltip: "Aktualizuj",
+                cancelEditButtonTooltip: "Anuluj edytowanie"
+            }
+        },
+
+        validators: {
+            required: {
+                message: "Pole jest wymagane"
+            },
+            rangeLength: {
+                message: "Długość wartości pola znajduje się poza zdefiniowanym zakresem"
+            },
+            minLength: {
+                message: "Wartość pola jest zbyt krótka"
+            },
+            maxLength: {
+                message: "Wartość pola jest zbyt długa"
+            },
+            pattern: {
+                message: "Wartość pola nie zgadza się ze zdefiniowanym wzorem"
+            },
+            range: {
+                message: "Wartość pola znajduje się poza zdefiniowanym zakresem"
+            },
+            min: {
+                message: "Wartość pola jest zbyt mała"
+            },
+            max: {
+                message: "Wartość pola jest zbyt duża"
+            }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-pt-br.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales["pt-br"] = {
+        grid: {
+            noDataContent: "Não encontrado",
+            deleteConfirm: "Você tem certeza que deseja remover este item?",
+            pagerFormat: "Páginas: {first} {prev} {pages} {next} {last}    {pageIndex} de {pageCount}",
+            pagePrevText: "Anterior",
+            pageNextText: "Seguinte",
+            pageFirstText: "Primeira",
+            pageLastText: "Última",
+            loadMessage: "Por favor, espere...",
+            invalidMessage: "Dados inválidos!"
+        },
+
+        loadIndicator: {
+            message: "Carregando..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Mudar para busca",
+                insertModeButtonTooltip: "Mudar para inserção",
+                editButtonTooltip: "Editar",
+                deleteButtonTooltip: "Remover",
+                searchButtonTooltip: "Buscar",
+                clearFilterButtonTooltip: "Remover filtro",
+                insertButtonTooltip: "Adicionar",
+                updateButtonTooltip: "Atualizar",
+                cancelEditButtonTooltip: "Cancelar Edição"
+            }
+        },
+
+        validators: {
+            required: { message: "Campo obrigatório" },
+            rangeLength: { message: "O valor esta fora do intervaldo definido" },
+            minLength: { message: "O comprimento do valor é muito curto" },
+            maxLength: { message: "O comprimento valor é muito longo" },
+            pattern: { message: "O valor informado não é compatível com o padrão" },
+            range: { message: "O valor informado esta fora do limite definido" },
+            min: { message: "O valor é muito curto" },
+            max: { message: "O valor é muito longo" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-pt.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales.pt = {
+        grid: {
+            noDataContent: "Não encontrado",
+            deleteConfirm: "Você tem certeza que deseja remover este item?",
+            pagerFormat: "Páginas: {first} {prev} {pages} {next} {last}    {pageIndex} de {pageCount}",
+            pagePrevText: "Anterior",
+            pageNextText: "Seguinte",
+            pageFirstText: "Primeira",
+            pageLastText: "Última",
+            loadMessage: "Por favor, espere...",
+            invalidMessage: "Dados inválidos!"
+        },
+
+        loadIndicator: {
+            message: "Carregando..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Mudar para busca",
+                insertModeButtonTooltip: "Mudar para inserção",
+                editButtonTooltip: "Editar",
+                deleteButtonTooltip: "Remover",
+                searchButtonTooltip: "Buscar",
+                clearFilterButtonTooltip: "Remover filtro",
+                insertButtonTooltip: "Adicionar",
+                updateButtonTooltip: "Atualizar",
+                cancelEditButtonTooltip: "Cancelar Edição"
+            }
+        },
+
+        validators: {
+            required: { message: "Campo obrigatório" },
+            rangeLength: { message: "O valor esta fora do intervaldo definido" },
+            minLength: { message: "O comprimento do valor é muito curto" },
+            maxLength: { message: "O comprimento valor é muito longo" },
+            pattern: { message: "O valor informado não é compatível com o padrão" },
+            range: { message: "O valor informado esta fora do limite definido" },
+            min: { message: "O valor é muito curto" },
+            max: { message: "O valor é muito longo" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-ru.js

@@ -0,0 +1,47 @@
+(function(jsGrid) {
+
+    jsGrid.locales.ru = {
+        grid: {
+            noDataContent: "Данных не найдено",
+            deleteConfirm: "Вы действительно хотите удалить запись?",
+            pagerFormat: "Страницы: {first} {prev} {pages} {next} {last}    {pageIndex} из {pageCount}",
+            pagePrevText: "<",
+            pageNextText: ">",
+            pageFirstText: "<<",
+            pageLastText: ">>",
+            loadMessage: "Пожалуйста, подождите...",
+            invalidMessage: "Введены неверные данные!"
+        },
+
+        loadIndicator: {
+            message: "Загрузка..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Поиск",
+                insertModeButtonTooltip: "Добавить запись",
+                editButtonTooltip: "Изменить",
+                deleteButtonTooltip: "Удалить",
+                searchButtonTooltip: "Найти",
+                clearFilterButtonTooltip: "Очистить фильтр",
+                insertButtonTooltip: "Добавить",
+                updateButtonTooltip: "Сохранить",
+                cancelEditButtonTooltip: "Отменить"
+            }
+        },
+
+        validators: {
+            required: { message: "Поле обязательно для заполения" },
+            rangeLength: { message: "Длинна введенного значения вне допустимого диапазона" },
+            minLength: { message: "Введенное значение слишком короткое" },
+            maxLength: { message: "Введенное значение слишком длинное" },
+            pattern: { message: "Введенное значение не соответствует заданному шаблону" },
+            range: { message: "Введенное значение вне допустимого диапазона" },
+            min: { message: "Введенное значение слишком маленькое" },
+            max: { message: "Введенное значение слишком большое" }
+        }
+    };
+
+}(jsGrid, jQuery));
+

plugins/jsgrid/i18n/jsgrid-tr.js

@@ -0,0 +1,47 @@
+(function(jsGrid) {
+
+    jsGrid.locales.tr = {
+        grid: {
+            noDataContent: "Kayıt Bulunamadı",
+            deleteConfirm: "Emin misiniz ?",
+            pagerFormat: "Sayfalar: {first} {prev} {pages} {next} {last}    {pageIndex} / {pageCount}",
+            pagePrevText: "<",
+            pageNextText: ">",
+            pageFirstText: "<<",
+            pageLastText: ">>",
+            loadMessage: "Lütfen bekleyiniz...",
+            invalidMessage: "Geçersiz veri girişi !"
+        },
+
+        loadIndicator: {
+            message: "Yükleniyor..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "Arama moduna geç",
+                insertModeButtonTooltip: "Yeni kayıt moduna geç",
+                editButtonTooltip: "Değiştir",
+                deleteButtonTooltip: "Sil",
+                searchButtonTooltip: "Bul",
+                clearFilterButtonTooltip: "Filtreyi temizle",
+                insertButtonTooltip: "Ekle",
+                updateButtonTooltip: "Güncelle",
+                cancelEditButtonTooltip: "Güncelleme iptali"
+            }
+        },
+
+        validators: {
+            required: { message: "Gerekli alandır" },
+            rangeLength: { message: "Alan değerinin uzunluğu tanımlanan aralık dışındadır" },
+            minLength: { message: "Alan değeri çok kısadır" },
+            maxLength: { message: "Alan değeri çok uzundur" },
+            pattern: { message: "Alan değeri tanımlanan şablon ile eşleşmiyor" },
+            range: { message: "Alan değeri tanımlı aralığın dışındadır" },
+            min: { message: "Alan değeri çok küçüktür" },
+            max: { message: "Alan değeri çok büyüktür" }
+        }
+    };
+
+}(jsGrid, jQuery));
+

plugins/jsgrid/i18n/jsgrid-zh-cn.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales["zh-cn"] = {
+        grid: {
+            noDataContent: "暂无数据",
+            deleteConfirm: "确认删除？",
+            pagerFormat: "页码: {first} {prev} {pages} {next} {last}    {pageIndex} / {pageCount}",
+            pagePrevText: "上一页",
+            pageNextText: "下一页",
+            pageFirstText: "第一页",
+            pageLastText: "最后页",
+            loadMessage: "请稍后...",
+            invalidMessage: "数据有误！"
+        },
+
+        loadIndicator: {
+            message: "载入中..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "切换为搜索",
+                insertModeButtonTooltip: "切换为新增",
+                editButtonTooltip: "编辑",
+                deleteButtonTooltip: "删除",
+                searchButtonTooltip: "搜索",
+                clearFilterButtonTooltip: "清空过滤",
+                insertButtonTooltip: "插入",
+                updateButtonTooltip: "更新",
+                cancelEditButtonTooltip: "取消编辑"
+            }
+        },
+
+        validators: {
+            required: { message: "字段必填" },
+            rangeLength: { message: "字段值长度超过定义范围" },
+            minLength: { message: "字段长度过短" },
+            maxLength: { message: "字段长度过长" },
+            pattern: { message: "字段值不符合定义规则" },
+            range: { message: "字段值超过定义范围" },
+            min: { message: "字段值太小" },
+            max: { message: "字段值太大" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/i18n/jsgrid-zh-tw.js

@@ -0,0 +1,46 @@
+(function(jsGrid) {
+
+    jsGrid.locales["zh-tw"] = {
+        grid: {
+            noDataContent: "暫無資料",
+            deleteConfirm: "確認刪除？",
+            pagerFormat: "頁碼: {first} {prev} {pages} {next} {last}    {pageIndex} / {pageCount}",
+            pagePrevText: "上一頁",
+            pageNextText: "下一頁",
+            pageFirstText: "第一頁",
+            pageLastText: "最後一頁",
+            loadMessage: "請稍候...",
+            invalidMessage: "輸入資料不正確"
+        },
+
+        loadIndicator: {
+            message: "載入中..."
+        },
+
+        fields: {
+            control: {
+                searchModeButtonTooltip: "切換為搜尋",
+                insertModeButtonTooltip: "切換為新增",
+                editButtonTooltip: "編輯",
+                deleteButtonTooltip: "刪除",
+                searchButtonTooltip: "搜尋",
+                clearFilterButtonTooltip: "清除搜尋條件",
+                insertButtonTooltip: "新增",
+                updateButtonTooltip: "修改",
+                cancelEditButtonTooltip: "取消編輯"
+            }
+        },
+
+        validators: {
+            required: { message: "欄位必填" },
+            rangeLength: { message: "欄位字串長度超出範圍" },
+            minLength: { message: "欄位字串長度太短" },
+            maxLength: { message: "欄位字串長度太長" },
+            pattern: { message: "欄位字串不符合規則" },
+            range: { message: "欄位數值超出範圍" },
+            min: { message: "欄位數值太小" },
+            max: { message: "欄位數值太大" }
+        }
+    };
+
+}(jsGrid, jQuery));

plugins/jsgrid/jsgrid.css

@@ -0,0 +1,126 @@
+/*
+ * jsGrid v1.5.3 (http://js-grid.com)
+ * (c) 2016 Artem Tabalin
+ * Licensed under MIT (https://github.com/tabalinas/jsgrid/blob/master/LICENSE)
+ */
+
+.jsgrid {
+    position: relative;
+    overflow: hidden;
+    font-size: 1em;
+}
+
+.jsgrid, .jsgrid *, .jsgrid *:before, .jsgrid *:after {
+    box-sizing: border-box;
+}
+
+.jsgrid input,
+.jsgrid textarea,
+.jsgrid select {
+    font-size: 1em;
+}
+
+.jsgrid-grid-header {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.jsgrid-grid-body {
+    overflow-x: auto;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+.jsgrid-table {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.jsgrid-cell {
+    padding: 0.5em 0.5em;
+}
+
+.jsgrid-сell,
+.jsgrid-header-cell {
+    box-sizing: border-box;
+}
+
+.jsgrid-align-left {
+    text-align: left;
+}
+
+.jsgrid-align-center,
+.jsgrid-align-center input,
+.jsgrid-align-center textarea,
+.jsgrid-align-center select {
+    text-align: center;
+}
+
+.jsgrid-align-right,
+.jsgrid-align-right input,
+.jsgrid-align-right textarea,
+.jsgrid-align-right select {
+    text-align: right;
+}
+
+.jsgrid-header-cell {
+    padding: .5em .5em;
+}
+
+.jsgrid-filter-row input,
+.jsgrid-filter-row textarea,
+.jsgrid-filter-row select,
+.jsgrid-edit-row input,
+.jsgrid-edit-row textarea,
+.jsgrid-edit-row select,
+.jsgrid-insert-row input,
+.jsgrid-insert-row textarea,
+.jsgrid-insert-row select {
+    width: 100%;
+    padding: .3em .5em;
+}
+
+.jsgrid-filter-row input[type='checkbox'],
+.jsgrid-edit-row input[type='checkbox'],
+.jsgrid-insert-row input[type='checkbox'] {
+    width: auto;
+}
+
+
+.jsgrid-selected-row .jsgrid-cell {
+    cursor: pointer;
+}
+
+.jsgrid-nodata-row .jsgrid-cell {
+    padding: .5em 0;
+    text-align: center;
+}
+
+.jsgrid-header-sort {
+    cursor: pointer;
+}
+
+.jsgrid-pager {
+    padding: .5em 0;
+}
+
+.jsgrid-pager-nav-button {
+    padding: .2em .6em;
+}
+
+.jsgrid-pager-nav-inactive-button {
+    display: none;
+    pointer-events: none;
+}
+
+.jsgrid-pager-page {
+    padding: .2em .6em;
+}