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;
+}

plugins/jsgrid/jsgrid.js

@@ -0,0 +1,2516 @@
+/*
+ * jsGrid v1.5.3 (http://js-grid.com)
+ * (c) 2016 Artem Tabalin
+ * Licensed under MIT (https://github.com/tabalinas/jsgrid/blob/master/LICENSE)
+ */
+
+(function(window, $, undefined) {
+
+    var JSGRID = "JSGrid",
+        JSGRID_DATA_KEY = JSGRID,
+        JSGRID_ROW_DATA_KEY = "JSGridItem",
+        JSGRID_EDIT_ROW_DATA_KEY = "JSGridEditRow",
+
+        SORT_ORDER_ASC = "asc",
+        SORT_ORDER_DESC = "desc",
+
+        FIRST_PAGE_PLACEHOLDER = "{first}",
+        PAGES_PLACEHOLDER = "{pages}",
+        PREV_PAGE_PLACEHOLDER = "{prev}",
+        NEXT_PAGE_PLACEHOLDER = "{next}",
+        LAST_PAGE_PLACEHOLDER = "{last}",
+        PAGE_INDEX_PLACEHOLDER = "{pageIndex}",
+        PAGE_COUNT_PLACEHOLDER = "{pageCount}",
+        ITEM_COUNT_PLACEHOLDER = "{itemCount}",
+
+        EMPTY_HREF = "javascript:void(0);";
+
+    var getOrApply = function(value, context) {
+        if($.isFunction(value)) {
+            return value.apply(context, $.makeArray(arguments).slice(2));
+        }
+        return value;
+    };
+
+    var normalizePromise = function(promise) {
+        var d = $.Deferred();
+
+        if(promise && promise.then) {
+            promise.then(function() {
+                d.resolve.apply(d, arguments);
+            }, function() {
+                d.reject.apply(d, arguments);
+            });
+        } else {
+            d.resolve(promise);
+        }
+
+        return d.promise();
+    };
+
+    var defaultController = {
+        loadData: $.noop,
+        insertItem: $.noop,
+        updateItem: $.noop,
+        deleteItem: $.noop
+    };
+
+
+    function Grid(element, config) {
+        var $element = $(element);
+
+        $element.data(JSGRID_DATA_KEY, this);
+
+        this._container = $element;
+
+        this.data = [];
+        this.fields = [];
+
+        this._editingRow = null;
+        this._sortField = null;
+        this._sortOrder = SORT_ORDER_ASC;
+        this._firstDisplayingPage = 1;
+
+        this._init(config);
+        this.render();
+    }
+
+    Grid.prototype = {
+        width: "auto",
+        height: "auto",
+        updateOnResize: true,
+
+        rowClass: $.noop,
+        rowRenderer: null,
+
+        rowClick: function(args) {
+            if(this.editing) {
+                this.editItem($(args.event.target).closest("tr"));
+            }
+        },
+        rowDoubleClick: $.noop,
+
+        noDataContent: "Not found",
+        noDataRowClass: "jsgrid-nodata-row",
+
+        heading: true,
+        headerRowRenderer: null,
+        headerRowClass: "jsgrid-header-row",
+        headerCellClass: "jsgrid-header-cell",
+
+        filtering: false,
+        filterRowRenderer: null,
+        filterRowClass: "jsgrid-filter-row",
+
+        inserting: false,
+        insertRowRenderer: null,
+        insertRowClass: "jsgrid-insert-row",
+
+        editing: false,
+        editRowRenderer: null,
+        editRowClass: "jsgrid-edit-row",
+
+        confirmDeleting: true,
+        deleteConfirm: "Are you sure?",
+
+        selecting: true,
+        selectedRowClass: "jsgrid-selected-row",
+        oddRowClass: "jsgrid-row",
+        evenRowClass: "jsgrid-alt-row",
+        cellClass: "jsgrid-cell",
+
+        sorting: false,
+        sortableClass: "jsgrid-header-sortable",
+        sortAscClass: "jsgrid-header-sort jsgrid-header-sort-asc",
+        sortDescClass: "jsgrid-header-sort jsgrid-header-sort-desc",
+
+        paging: false,
+        pagerContainer: null,
+        pageIndex: 1,
+        pageSize: 20,
+        pageButtonCount: 15,
+        pagerFormat: "Pages: {first} {prev} {pages} {next} {last}    {pageIndex} of {pageCount}",
+        pagePrevText: "Prev",
+        pageNextText: "Next",
+        pageFirstText: "First",
+        pageLastText: "Last",
+        pageNavigatorNextText: "...",
+        pageNavigatorPrevText: "...",
+        pagerContainerClass: "jsgrid-pager-container",
+        pagerClass: "jsgrid-pager",
+        pagerNavButtonClass: "jsgrid-pager-nav-button",
+        pagerNavButtonInactiveClass: "jsgrid-pager-nav-inactive-button",
+        pageClass: "jsgrid-pager-page",
+        currentPageClass: "jsgrid-pager-current-page",
+
+        customLoading: false,
+        pageLoading: false,
+
+        autoload: false,
+        controller: defaultController,
+
+        loadIndication: true,
+        loadIndicationDelay: 500,
+        loadMessage: "Please, wait...",
+        loadShading: true,
+
+        invalidMessage: "Invalid data entered!",
+
+        invalidNotify: function(args) {
+            var messages = $.map(args.errors, function(error) {
+                return error.message || null;
+            });
+
+            window.alert([this.invalidMessage].concat(messages).join("\n"));
+        },
+
+        onInit: $.noop,
+        onRefreshing: $.noop,
+        onRefreshed: $.noop,
+        onPageChanged: $.noop,
+        onItemDeleting: $.noop,
+        onItemDeleted: $.noop,
+        onItemInserting: $.noop,
+        onItemInserted: $.noop,
+        onItemEditing: $.noop,
+        onItemUpdating: $.noop,
+        onItemUpdated: $.noop,
+        onItemInvalid: $.noop,
+        onDataLoading: $.noop,
+        onDataLoaded: $.noop,
+        onOptionChanging: $.noop,
+        onOptionChanged: $.noop,
+        onError: $.noop,
+
+        invalidClass: "jsgrid-invalid",
+
+        containerClass: "jsgrid",
+        tableClass: "jsgrid-table",
+        gridHeaderClass: "jsgrid-grid-header",
+        gridBodyClass: "jsgrid-grid-body",
+
+        _init: function(config) {
+            $.extend(this, config);
+            this._initLoadStrategy();
+            this._initController();
+            this._initFields();
+            this._attachWindowLoadResize();
+            this._attachWindowResizeCallback();
+            this._callEventHandler(this.onInit)
+        },
+
+        loadStrategy: function() {
+            return this.pageLoading
+                ? new jsGrid.loadStrategies.PageLoadingStrategy(this)
+                : new jsGrid.loadStrategies.DirectLoadingStrategy(this);
+        },
+
+        _initLoadStrategy: function() {
+            this._loadStrategy = getOrApply(this.loadStrategy, this);
+        },
+
+        _initController: function() {
+            this._controller = $.extend({}, defaultController, getOrApply(this.controller, this));
+        },
+
+        renderTemplate: function(source, context, config) {
+            args = [];
+            for(var key in config) {
+                args.push(config[key]);
+            }
+
+            args.unshift(source, context);
+
+            source = getOrApply.apply(null, args);
+            return (source === undefined || source === null) ? "" : source;
+        },
+
+        loadIndicator: function(config) {
+            return new jsGrid.LoadIndicator(config);
+        },
+
+        validation: function(config) {
+            return jsGrid.Validation && new jsGrid.Validation(config);
+        },
+
+        _initFields: function() {
+            var self = this;
+            self.fields = $.map(self.fields, function(field) {
+                if($.isPlainObject(field)) {
+                    var fieldConstructor = (field.type && jsGrid.fields[field.type]) || jsGrid.Field;
+                    field = new fieldConstructor(field);
+                }
+                field._grid = self;
+                return field;
+            });
+        },
+
+        _attachWindowLoadResize: function() {
+            $(window).on("load", $.proxy(this._refreshSize, this));
+        },
+
+        _attachWindowResizeCallback: function() {
+            if(this.updateOnResize) {
+                $(window).on("resize", $.proxy(this._refreshSize, this));
+            }
+        },
+
+        _detachWindowResizeCallback: function() {
+            $(window).off("resize", this._refreshSize);
+        },
+
+        option: function(key, value) {
+            var optionChangingEventArgs,
+                optionChangedEventArgs;
+
+            if(arguments.length === 1)
+                return this[key];
+
+            optionChangingEventArgs = {
+                option: key,
+                oldValue: this[key],
+                newValue: value
+            };
+            this._callEventHandler(this.onOptionChanging, optionChangingEventArgs);
+
+            this._handleOptionChange(optionChangingEventArgs.option, optionChangingEventArgs.newValue);
+
+            optionChangedEventArgs = {
+                option: optionChangingEventArgs.option,
+                value: optionChangingEventArgs.newValue
+            };
+            this._callEventHandler(this.onOptionChanged, optionChangedEventArgs);
+        },
+
+        fieldOption: function(field, key, value) {
+            field = this._normalizeField(field);
+
+            if(arguments.length === 2)
+                return field[key];
+
+            field[key] = value;
+            this._renderGrid();
+        },
+
+        _handleOptionChange: function(name, value) {
+            this[name] = value;
+
+            switch(name) {
+                case "width":
+                case "height":
+                    this._refreshSize();
+                    break;
+                case "rowClass":
+                case "rowRenderer":
+                case "rowClick":
+                case "rowDoubleClick":
+                case "noDataRowClass":
+                case "noDataContent":
+                case "selecting":
+                case "selectedRowClass":
+                case "oddRowClass":
+                case "evenRowClass":
+                    this._refreshContent();
+                    break;
+                case "pageButtonCount":
+                case "pagerFormat":
+                case "pagePrevText":
+                case "pageNextText":
+                case "pageFirstText":
+                case "pageLastText":
+                case "pageNavigatorNextText":
+                case "pageNavigatorPrevText":
+                case "pagerClass":
+                case "pagerNavButtonClass":
+                case "pageClass":
+                case "currentPageClass":
+                case "pagerRenderer":
+                    this._refreshPager();
+                    break;
+                case "fields":
+                    this._initFields();
+                    this.render();
+                    break;
+                case "data":
+                case "editing":
+                case "heading":
+                case "filtering":
+                case "inserting":
+                case "paging":
+                    this.refresh();
+                    break;
+                case "loadStrategy":
+                case "pageLoading":
+                    this._initLoadStrategy();
+                    this.search();
+                    break;
+                case "pageIndex":
+                    this.openPage(value);
+                    break;
+                case "pageSize":
+                    this.refresh();
+                    this.search();
+                    break;
+                case "editRowRenderer":
+                case "editRowClass":
+                    this.cancelEdit();
+                    break;
+                case "updateOnResize":
+                    this._detachWindowResizeCallback();
+                    this._attachWindowResizeCallback();
+                    break;
+                case "invalidNotify":
+                case "invalidMessage":
+                    break;
+                default:
+                    this.render();
+                    break;
+            }
+        },
+
+        destroy: function() {
+            this._detachWindowResizeCallback();
+            this._clear();
+            this._container.removeData(JSGRID_DATA_KEY);
+        },
+
+        render: function() {
+            this._renderGrid();
+            return this.autoload ? this.loadData() : $.Deferred().resolve().promise();
+        },
+
+        _renderGrid: function() {
+            this._clear();
+
+            this._container.addClass(this.containerClass)
+                .css("position", "relative")
+                .append(this._createHeader())
+                .append(this._createBody());
+
+            this._pagerContainer = this._createPagerContainer();
+            this._loadIndicator = this._createLoadIndicator();
+            this._validation = this._createValidation();
+
+            this.refresh();
+        },
+
+        _createLoadIndicator: function() {
+            return getOrApply(this.loadIndicator, this, {
+                message: this.loadMessage,
+                shading: this.loadShading,
+                container: this._container
+            });
+        },
+
+        _createValidation: function() {
+            return getOrApply(this.validation, this);
+        },
+
+        _clear: function() {
+            this.cancelEdit();
+
+            clearTimeout(this._loadingTimer);
+
+            this._pagerContainer && this._pagerContainer.empty();
+
+            this._container.empty()
+                .css({ position: "", width: "", height: "" });
+        },
+
+        _createHeader: function() {
+            var $headerRow = this._headerRow = this._createHeaderRow(),
+                $filterRow = this._filterRow = this._createFilterRow(),
+                $insertRow = this._insertRow = this._createInsertRow();
+
+            var $headerGrid = this._headerGrid = $("<table>").addClass(this.tableClass)
+                .append($headerRow)
+                .append($filterRow)
+                .append($insertRow);
+
+            var $header = this._header = $("<div>").addClass(this.gridHeaderClass)
+                .addClass(this._scrollBarWidth() ? "jsgrid-header-scrollbar" : "")
+                .append($headerGrid);
+
+            return $header;
+        },
+
+        _createBody: function() {
+            var $content = this._content = $("<tbody>");
+
+            var $bodyGrid = this._bodyGrid = $("<table>").addClass(this.tableClass)
+                .append($content);
+
+            var $body = this._body = $("<div>").addClass(this.gridBodyClass)
+                .append($bodyGrid)
+                .on("scroll", $.proxy(function(e) {
+                    this._header.scrollLeft(e.target.scrollLeft);
+                }, this));
+
+            return $body;
+        },
+
+        _createPagerContainer: function() {
+            var pagerContainer = this.pagerContainer || $("<div>").appendTo(this._container);
+            return $(pagerContainer).addClass(this.pagerContainerClass);
+        },
+
+        _eachField: function(callBack) {
+            var self = this;
+            $.each(this.fields, function(index, field) {
+                if(field.visible) {
+                    callBack.call(self, field, index);
+                }
+            });
+        },
+
+        _createHeaderRow: function() {
+            if($.isFunction(this.headerRowRenderer))
+                return $(this.renderTemplate(this.headerRowRenderer, this));
+
+            var $result = $("<tr>").addClass(this.headerRowClass);
+
+            this._eachField(function(field, index) {
+                var $th = this._prepareCell("<th>", field, "headercss", this.headerCellClass)
+                    .append(this.renderTemplate(field.headerTemplate, field))
+                    .appendTo($result);
+
+                if(this.sorting && field.sorting) {
+                    $th.addClass(this.sortableClass)
+                        .on("click", $.proxy(function() {
+                            this.sort(index);
+                        }, this));
+                }
+            });
+
+            return $result;
+        },
+
+        _prepareCell: function(cell, field, cssprop, cellClass) {
+            return $(cell).css("width", field.width)
+                .addClass(cellClass || this.cellClass)
+                .addClass((cssprop && field[cssprop]) || field.css)
+                .addClass(field.align ? ("jsgrid-align-" + field.align) : "");
+        },
+
+        _createFilterRow: function() {
+            if($.isFunction(this.filterRowRenderer))
+                return $(this.renderTemplate(this.filterRowRenderer, this));
+
+            var $result = $("<tr>").addClass(this.filterRowClass);
+
+            this._eachField(function(field) {
+                this._prepareCell("<td>", field, "filtercss")
+                    .append(this.renderTemplate(field.filterTemplate, field))
+                    .appendTo($result);
+            });
+
+            return $result;
+        },
+
+        _createInsertRow: function() {
+            if($.isFunction(this.insertRowRenderer))
+                return $(this.renderTemplate(this.insertRowRenderer, this));
+
+            var $result = $("<tr>").addClass(this.insertRowClass);
+
+            this._eachField(function(field) {
+                this._prepareCell("<td>", field, "insertcss")
+                    .append(this.renderTemplate(field.insertTemplate, field))
+                    .appendTo($result);
+            });
+
+            return $result;
+        },
+
+        _callEventHandler: function(handler, eventParams) {
+            handler.call(this, $.extend(eventParams, {
+                grid: this
+            }));
+
+            return eventParams;
+        },
+
+        reset: function() {
+            this._resetSorting();
+            this._resetPager();
+            return this._loadStrategy.reset();
+        },
+
+        _resetPager: function() {
+            this._firstDisplayingPage = 1;
+            this._setPage(1);
+        },
+
+        _resetSorting: function() {
+            this._sortField = null;
+            this._sortOrder = SORT_ORDER_ASC;
+            this._clearSortingCss();
+        },
+
+        refresh: function() {
+            this._callEventHandler(this.onRefreshing);
+
+            this.cancelEdit();
+
+            this._refreshHeading();
+            this._refreshFiltering();
+            this._refreshInserting();
+            this._refreshContent();
+            this._refreshPager();
+            this._refreshSize();
+
+            this._callEventHandler(this.onRefreshed);
+        },
+
+        _refreshHeading: function() {
+            this._headerRow.toggle(this.heading);
+        },
+
+        _refreshFiltering: function() {
+            this._filterRow.toggle(this.filtering);
+        },
+
+        _refreshInserting: function() {
+            this._insertRow.toggle(this.inserting);
+        },
+
+        _refreshContent: function() {
+            var $content = this._content;
+            $content.empty();
+
+            if(!this.data.length) {
+                $content.append(this._createNoDataRow());
+                return this;
+            }
+
+            var indexFrom = this._loadStrategy.firstDisplayIndex();
+            var indexTo = this._loadStrategy.lastDisplayIndex();
+
+            for(var itemIndex = indexFrom; itemIndex < indexTo; itemIndex++) {
+                var item = this.data[itemIndex];
+                $content.append(this._createRow(item, itemIndex));
+            }
+        },
+
+        _createNoDataRow: function() {
+            var amountOfFields = 0;
+            this._eachField(function() {
+                amountOfFields++;
+            });
+
+            return $("<tr>").addClass(this.noDataRowClass)
+                .append($("<td>").addClass(this.cellClass).attr("colspan", amountOfFields)
+                    .append(this.renderTemplate(this.noDataContent, this)));
+        },
+
+        _createRow: function(item, itemIndex) {
+            var $result;
+
+            if($.isFunction(this.rowRenderer)) {
+                $result = this.renderTemplate(this.rowRenderer, this, { item: item, itemIndex: itemIndex });
+            } else {
+                $result = $("<tr>");
+                this._renderCells($result, item);
+            }
+
+            $result.addClass(this._getRowClasses(item, itemIndex))
+                .data(JSGRID_ROW_DATA_KEY, item)
+                .on("click", $.proxy(function(e) {
+                    this.rowClick({
+                        item: item,
+                        itemIndex: itemIndex,
+                        event: e
+                    });
+                }, this))
+                .on("dblclick", $.proxy(function(e) {
+                    this.rowDoubleClick({
+                        item: item,
+                        itemIndex: itemIndex,
+                        event: e
+                    });
+                }, this));
+
+            if(this.selecting) {
+                this._attachRowHover($result);
+            }
+
+            return $result;
+        },
+
+        _getRowClasses: function(item, itemIndex) {
+            var classes = [];
+            classes.push(((itemIndex + 1) % 2) ? this.oddRowClass : this.evenRowClass);
+            classes.push(getOrApply(this.rowClass, this, item, itemIndex));
+            return classes.join(" ");
+        },
+
+        _attachRowHover: function($row) {
+            var selectedRowClass = this.selectedRowClass;
+            $row.hover(function() {
+                    $(this).addClass(selectedRowClass);
+                },
+                function() {
+                    $(this).removeClass(selectedRowClass);
+                }
+            );
+        },
+
+        _renderCells: function($row, item) {
+            this._eachField(function(field) {
+                $row.append(this._createCell(item, field));
+            });
+            return this;
+        },
+
+        _createCell: function(item, field) {
+            var $result;
+            var fieldValue = this._getItemFieldValue(item, field);
+
+            var args = { value: fieldValue, item : item };
+            if($.isFunction(field.cellRenderer)) {
+                $result = this.renderTemplate(field.cellRenderer, field, args);
+            } else {
+                $result = $("<td>").append(this.renderTemplate(field.itemTemplate || fieldValue, field, args));
+            }
+
+            return this._prepareCell($result, field);
+        },
+
+        _getItemFieldValue: function(item, field) {
+            var props = field.name.split('.');
+            var result = item[props.shift()];
+
+            while(result && props.length) {
+                result = result[props.shift()];
+            }
+
+            return result;
+        },
+
+        _setItemFieldValue: function(item, field, value) {
+            var props = field.name.split('.');
+            var current = item;
+            var prop = props[0];
+
+            while(current && props.length) {
+                item = current;
+                prop = props.shift();
+                current = item[prop];
+            }
+
+            if(!current) {
+                while(props.length) {
+                    item = item[prop] = {};
+                    prop = props.shift();
+                }
+            }
+
+            item[prop] = value;
+        },
+
+        sort: function(field, order) {
+            if($.isPlainObject(field)) {
+                order = field.order;
+                field = field.field;
+            }
+
+            this._clearSortingCss();
+            this._setSortingParams(field, order);
+            this._setSortingCss();
+            return this._loadStrategy.sort();
+        },
+
+        _clearSortingCss: function() {
+            this._headerRow.find("th")
+                .removeClass(this.sortAscClass)
+                .removeClass(this.sortDescClass);
+        },
+
+        _setSortingParams: function(field, order) {
+            field = this._normalizeField(field);
+            order = order || ((this._sortField === field) ? this._reversedSortOrder(this._sortOrder) : SORT_ORDER_ASC);
+
+            this._sortField = field;
+            this._sortOrder = order;
+        },
+
+        _normalizeField: function(field) {
+            if($.isNumeric(field)) {
+                return this.fields[field];
+            }
+
+            if(typeof field === "string") {
+                return $.grep(this.fields, function(f) {
+                    return f.name === field;
+                })[0];
+            }
+
+            return field;
+        },
+
+        _reversedSortOrder: function(order) {
+            return (order === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC);
+        },
+
+        _setSortingCss: function() {
+            var fieldIndex = this._visibleFieldIndex(this._sortField);
+
+            this._headerRow.find("th").eq(fieldIndex)
+                .addClass(this._sortOrder === SORT_ORDER_ASC ? this.sortAscClass : this.sortDescClass);
+        },
+
+        _visibleFieldIndex: function(field) {
+            return $.inArray(field, $.grep(this.fields, function(f) { return f.visible; }));
+        },
+
+        _sortData: function() {
+            var sortFactor = this._sortFactor(),
+                sortField = this._sortField;
+
+            if(sortField) {
+                this.data.sort(function(item1, item2) {
+                    return sortFactor * sortField.sortingFunc(item1[sortField.name], item2[sortField.name]);
+                });
+            }
+        },
+
+        _sortFactor: function() {
+            return this._sortOrder === SORT_ORDER_ASC ? 1 : -1;
+        },
+
+        _itemsCount: function() {
+            return this._loadStrategy.itemsCount();
+        },
+
+        _pagesCount: function() {
+            var itemsCount = this._itemsCount(),
+                pageSize = this.pageSize;
+            return Math.floor(itemsCount / pageSize) + (itemsCount % pageSize ? 1 : 0);
+        },
+
+        _refreshPager: function() {
+            var $pagerContainer = this._pagerContainer;
+            $pagerContainer.empty();
+
+            if(this.paging) {
+                $pagerContainer.append(this._createPager());
+            }
+
+            var showPager = this.paging && this._pagesCount() > 1;
+            $pagerContainer.toggle(showPager);
+        },
+
+        _createPager: function() {
+            var $result;
+
+            if($.isFunction(this.pagerRenderer)) {
+                $result = $(this.pagerRenderer({
+                    pageIndex: this.pageIndex,
+                    pageCount: this._pagesCount()
+                }));
+            } else {
+                $result = $("<div>").append(this._createPagerByFormat());
+            }
+
+            $result.addClass(this.pagerClass);
+
+            return $result;
+        },
+
+        _createPagerByFormat: function() {
+            var pageIndex = this.pageIndex,
+                pageCount = this._pagesCount(),
+                itemCount = this._itemsCount(),
+                pagerParts = this.pagerFormat.split(" ");
+
+            return $.map(pagerParts, $.proxy(function(pagerPart) {
+                var result = pagerPart;
+
+                if(pagerPart === PAGES_PLACEHOLDER) {
+                    result = this._createPages();
+                } else if(pagerPart === FIRST_PAGE_PLACEHOLDER) {
+                    result = this._createPagerNavButton(this.pageFirstText, 1, pageIndex > 1);
+                } else if(pagerPart === PREV_PAGE_PLACEHOLDER) {
+                    result = this._createPagerNavButton(this.pagePrevText, pageIndex - 1, pageIndex > 1);
+                } else if(pagerPart === NEXT_PAGE_PLACEHOLDER) {
+                    result = this._createPagerNavButton(this.pageNextText, pageIndex + 1, pageIndex < pageCount);
+                } else if(pagerPart === LAST_PAGE_PLACEHOLDER) {
+                    result = this._createPagerNavButton(this.pageLastText, pageCount, pageIndex < pageCount);
+                } else if(pagerPart === PAGE_INDEX_PLACEHOLDER) {
+                    result = pageIndex;
+                } else if(pagerPart === PAGE_COUNT_PLACEHOLDER) {
+                    result = pageCount;
+                } else if(pagerPart === ITEM_COUNT_PLACEHOLDER) {
+                    result = itemCount;
+                }
+
+                return $.isArray(result) ? result.concat([" "]) : [result, " "];
+            }, this));
+        },
+
+        _createPages: function() {
+            var pageCount = this._pagesCount(),
+                pageButtonCount = this.pageButtonCount,
+                firstDisplayingPage = this._firstDisplayingPage,
+                pages = [];
+
+            if(firstDisplayingPage > 1) {
+                pages.push(this._createPagerPageNavButton(this.pageNavigatorPrevText, this.showPrevPages));
+            }
+
+            for(var i = 0, pageNumber = firstDisplayingPage; i < pageButtonCount && pageNumber <= pageCount; i++, pageNumber++) {
+                pages.push(pageNumber === this.pageIndex
+                    ? this._createPagerCurrentPage()
+                    : this._createPagerPage(pageNumber));
+            }
+
+            if((firstDisplayingPage + pageButtonCount - 1) < pageCount) {
+                pages.push(this._createPagerPageNavButton(this.pageNavigatorNextText, this.showNextPages));
+            }
+
+            return pages;
+        },
+
+        _createPagerNavButton: function(text, pageIndex, isActive) {
+            return this._createPagerButton(text, this.pagerNavButtonClass + (isActive ? "" : " " + this.pagerNavButtonInactiveClass),
+                isActive ? function() { this.openPage(pageIndex); } : $.noop);
+        },
+
+        _createPagerPageNavButton: function(text, handler) {
+            return this._createPagerButton(text, this.pagerNavButtonClass, handler);
+        },
+
+        _createPagerPage: function(pageIndex) {
+            return this._createPagerButton(pageIndex, this.pageClass, function() {
+                this.openPage(pageIndex);
+            });
+        },
+
+        _createPagerButton: function(text, css, handler) {
+            var $link = $("<a>").attr("href", EMPTY_HREF)
+                .html(text)
+                .on("click", $.proxy(handler, this));
+
+            return $("<span>").addClass(css).append($link);
+        },
+
+        _createPagerCurrentPage: function() {
+            return $("<span>")
+                .addClass(this.pageClass)
+                .addClass(this.currentPageClass)
+                .text(this.pageIndex);
+        },
+
+        _refreshSize: function() {
+            this._refreshHeight();
+            this._refreshWidth();
+        },
+
+        _refreshWidth: function() {
+            var width = (this.width === "auto") ? this._getAutoWidth() : this.width;
+
+            this._container.width(width);
+        },
+
+        _getAutoWidth: function() {
+            var $headerGrid = this._headerGrid,
+                $header = this._header;
+
+            $headerGrid.width("auto");
+
+            var contentWidth = $headerGrid.outerWidth();
+            var borderWidth = $header.outerWidth() - $header.innerWidth();
+
+            $headerGrid.width("");
+
+            return contentWidth + borderWidth;
+        },
+
+        _scrollBarWidth: (function() {
+            var result;
+
+            return function() {
+                if(result === undefined) {
+                    var $ghostContainer = $("<div style='width:50px;height:50px;overflow:hidden;position:absolute;top:-10000px;left:-10000px;'></div>");
+                    var $ghostContent = $("<div style='height:100px;'></div>");
+                    $ghostContainer.append($ghostContent).appendTo("body");
+                    var width = $ghostContent.innerWidth();
+                    $ghostContainer.css("overflow-y", "auto");
+                    var widthExcludingScrollBar = $ghostContent.innerWidth();
+                    $ghostContainer.remove();
+                    result = width - widthExcludingScrollBar;
+                }
+                return result;
+            };
+        })(),
+
+        _refreshHeight: function() {
+            var container = this._container,
+                pagerContainer = this._pagerContainer,
+                height = this.height,
+                nonBodyHeight;
+
+            container.height(height);
+
+            if(height !== "auto") {
+                height = container.height();
+
+                nonBodyHeight = this._header.outerHeight(true);
+                if(pagerContainer.parents(container).length) {
+                    nonBodyHeight += pagerContainer.outerHeight(true);
+                }
+
+                this._body.outerHeight(height - nonBodyHeight);
+            }
+        },
+
+        showPrevPages: function() {
+            var firstDisplayingPage = this._firstDisplayingPage,
+                pageButtonCount = this.pageButtonCount;
+
+            this._firstDisplayingPage = (firstDisplayingPage > pageButtonCount) ? firstDisplayingPage - pageButtonCount : 1;
+
+            this._refreshPager();
+        },
+
+        showNextPages: function() {
+            var firstDisplayingPage = this._firstDisplayingPage,
+                pageButtonCount = this.pageButtonCount,
+                pageCount = this._pagesCount();
+
+            this._firstDisplayingPage = (firstDisplayingPage + 2 * pageButtonCount > pageCount)
+                ? pageCount - pageButtonCount + 1
+                : firstDisplayingPage + pageButtonCount;
+
+            this._refreshPager();
+        },
+
+        openPage: function(pageIndex) {
+            if(pageIndex < 1 || pageIndex > this._pagesCount())
+                return;
+
+            this._setPage(pageIndex);
+            this._loadStrategy.openPage(pageIndex);
+        },
+
+        _setPage: function(pageIndex) {
+            var firstDisplayingPage = this._firstDisplayingPage,
+                pageButtonCount = this.pageButtonCount;
+
+            this.pageIndex = pageIndex;
+
+            if(pageIndex < firstDisplayingPage) {
+                this._firstDisplayingPage = pageIndex;
+            }
+
+            if(pageIndex > firstDisplayingPage + pageButtonCount - 1) {
+                this._firstDisplayingPage = pageIndex - pageButtonCount + 1;
+            }
+
+            this._callEventHandler(this.onPageChanged, {
+                pageIndex: pageIndex
+            });
+        },
+
+        _controllerCall: function(method, param, isCanceled, doneCallback) {
+            if(isCanceled)
+                return $.Deferred().reject().promise();
+
+            this._showLoading();
+
+            var controller = this._controller;
+            if(!controller || !controller[method]) {
+                throw Error("controller has no method '" + method + "'");
+            }
+
+            return normalizePromise(controller[method](param))
+                .done($.proxy(doneCallback, this))
+                .fail($.proxy(this._errorHandler, this))
+                .always($.proxy(this._hideLoading, this));
+        },
+
+        _errorHandler: function() {
+            this._callEventHandler(this.onError, {
+                args: $.makeArray(arguments)
+            });
+        },
+
+        _showLoading: function() {
+            if(!this.loadIndication)
+                return;
+
+            clearTimeout(this._loadingTimer);
+
+            this._loadingTimer = setTimeout($.proxy(function() {
+                this._loadIndicator.show();
+            }, this), this.loadIndicationDelay);
+        },
+
+        _hideLoading: function() {
+            if(!this.loadIndication)
+                return;
+
+            clearTimeout(this._loadingTimer);
+            this._loadIndicator.hide();
+        },
+
+        search: function(filter) {
+            this._resetSorting();
+            this._resetPager();
+            return this.loadData(filter);
+        },
+
+        loadData: function(filter) {
+            filter = filter || (this.filtering ? this.getFilter() : {});
+
+            $.extend(filter, this._loadStrategy.loadParams(), this._sortingParams());
+
+            var args = this._callEventHandler(this.onDataLoading, {
+                filter: filter
+            });
+
+            return this._controllerCall("loadData", filter, args.cancel, function(loadedData) {
+                if(!loadedData)
+                    return;
+
+                this._loadStrategy.finishLoad(loadedData);
+
+                this._callEventHandler(this.onDataLoaded, {
+                    data: loadedData
+                });
+            });
+        },
+
+        getFilter: function() {
+            var result = {};
+            this._eachField(function(field) {
+                if(field.filtering) {
+                    this._setItemFieldValue(result, field, field.filterValue());
+                }
+            });
+            return result;
+        },
+
+        _sortingParams: function() {
+            if(this.sorting && this._sortField) {
+                return {
+                    sortField: this._sortField.name,
+                    sortOrder: this._sortOrder
+                };
+            }
+            return {};
+        },
+
+        getSorting: function() {
+            var sortingParams = this._sortingParams();
+            return {
+                field: sortingParams.sortField,
+                order: sortingParams.sortOrder
+            };
+        },
+
+        clearFilter: function() {
+            var $filterRow = this._createFilterRow();
+            this._filterRow.replaceWith($filterRow);
+            this._filterRow = $filterRow;
+            return this.search();
+        },
+
+        insertItem: function(item) {
+            var insertingItem = item || this._getValidatedInsertItem();
+
+            if(!insertingItem)
+                return $.Deferred().reject().promise();
+
+            var args = this._callEventHandler(this.onItemInserting, {
+                item: insertingItem
+            });
+
+            return this._controllerCall("insertItem", insertingItem, args.cancel, function(insertedItem) {
+                insertedItem = insertedItem || insertingItem;
+                this._loadStrategy.finishInsert(insertedItem);
+
+                this._callEventHandler(this.onItemInserted, {
+                    item: insertedItem
+                });
+            });
+        },
+
+        _getValidatedInsertItem: function() {
+            var item = this._getInsertItem();
+            return this._validateItem(item, this._insertRow) ? item : null;
+        },
+
+        _getInsertItem: function() {
+            var result = {};
+            this._eachField(function(field) {
+                if(field.inserting) {
+                    this._setItemFieldValue(result, field, field.insertValue());
+                }
+            });
+            return result;
+        },
+
+        _validateItem: function(item, $row) {
+            var validationErrors = [];
+
+            var args = {
+                item: item,
+                itemIndex: this._rowIndex($row),
+                row: $row
+            };
+
+            this._eachField(function(field) {
+                if(!field.validate ||
+                   ($row === this._insertRow && !field.inserting) ||
+                   ($row === this._getEditRow() && !field.editing))
+                    return;
+
+                var fieldValue = this._getItemFieldValue(item, field);
+
+                var errors = this._validation.validate($.extend({
+                    value: fieldValue,
+                    rules: field.validate
+                }, args));
+
+                this._setCellValidity($row.children().eq(this._visibleFieldIndex(field)), errors);
+
+                if(!errors.length)
+                    return;
+
+                validationErrors.push.apply(validationErrors,
+                    $.map(errors, function(message) {
+                        return { field: field, message: message };
+                    }));
+            });
+
+            if(!validationErrors.length)
+                return true;
+
+            var invalidArgs = $.extend({
+                errors: validationErrors
+            }, args);
+            this._callEventHandler(this.onItemInvalid, invalidArgs);
+            this.invalidNotify(invalidArgs);
+
+            return false;
+        },
+
+        _setCellValidity: function($cell, errors) {
+            $cell
+                .toggleClass(this.invalidClass, !!errors.length)
+                .attr("title", errors.join("\n"));
+        },
+
+        clearInsert: function() {
+            var insertRow = this._createInsertRow();
+            this._insertRow.replaceWith(insertRow);
+            this._insertRow = insertRow;
+            this.refresh();
+        },
+
+        editItem: function(item) {
+            var $row = this.rowByItem(item);
+            if($row.length) {
+                this._editRow($row);
+            }
+        },
+
+        rowByItem: function(item) {
+            if(item.jquery || item.nodeType)
+                return $(item);
+
+            return this._content.find("tr").filter(function() {
+                return $.data(this, JSGRID_ROW_DATA_KEY) === item;
+            });
+        },
+
+        _editRow: function($row) {
+            if(!this.editing)
+                return;
+
+            var item = $row.data(JSGRID_ROW_DATA_KEY);
+
+            var args = this._callEventHandler(this.onItemEditing, {
+                row: $row,
+                item: item,
+                itemIndex: this._itemIndex(item)
+            });
+
+            if(args.cancel)
+                return;
+
+            if(this._editingRow) {
+                this.cancelEdit();
+            }
+
+            var $editRow = this._createEditRow(item);
+
+            this._editingRow = $row;
+            $row.hide();
+            $editRow.insertBefore($row);
+            $row.data(JSGRID_EDIT_ROW_DATA_KEY, $editRow);
+        },
+
+        _createEditRow: function(item) {
+            if($.isFunction(this.editRowRenderer)) {
+                return $(this.renderTemplate(this.editRowRenderer, this, { item: item, itemIndex: this._itemIndex(item) }));
+            }
+
+            var $result = $("<tr>").addClass(this.editRowClass);
+
+            this._eachField(function(field) {
+                var fieldValue = this._getItemFieldValue(item, field);
+
+                this._prepareCell("<td>", field, "editcss")
+                    .append(this.renderTemplate(field.editTemplate || "", field, { value: fieldValue, item: item }))
+                    .appendTo($result);
+            });
+
+            return $result;
+        },
+
+        updateItem: function(item, editedItem) {
+            if(arguments.length === 1) {
+                editedItem = item;
+            }
+
+            var $row = item ? this.rowByItem(item) : this._editingRow;
+            editedItem = editedItem || this._getValidatedEditedItem();
+
+            if(!editedItem)
+                return;
+
+            return this._updateRow($row, editedItem);
+        },
+
+        _getValidatedEditedItem: function() {
+            var item = this._getEditedItem();
+            return this._validateItem(item, this._getEditRow()) ? item : null;
+        },
+
+        _updateRow: function($updatingRow, editedItem) {
+            var updatingItem = $updatingRow.data(JSGRID_ROW_DATA_KEY),
+                updatingItemIndex = this._itemIndex(updatingItem),
+                updatedItem = $.extend(true, {}, updatingItem, editedItem);
+
+            var args = this._callEventHandler(this.onItemUpdating, {
+                row: $updatingRow,
+                item: updatedItem,
+                itemIndex: updatingItemIndex,
+                previousItem: updatingItem
+            });
+
+            return this._controllerCall("updateItem", updatedItem, args.cancel, function(loadedUpdatedItem) {
+                var previousItem = $.extend(true, {}, updatingItem);
+                updatedItem = loadedUpdatedItem || $.extend(true, updatingItem, editedItem);
+
+                var $updatedRow = this._finishUpdate($updatingRow, updatedItem, updatingItemIndex);
+
+                this._callEventHandler(this.onItemUpdated, {
+                    row: $updatedRow,
+                    item: updatedItem,
+                    itemIndex: updatingItemIndex,
+                    previousItem: previousItem
+                });
+            });
+        },
+
+        _rowIndex: function(row) {
+            return this._content.children().index($(row));
+        },
+
+        _itemIndex: function(item) {
+            return $.inArray(item, this.data);
+        },
+
+        _finishUpdate: function($updatingRow, updatedItem, updatedItemIndex) {
+            this.cancelEdit();
+            this.data[updatedItemIndex] = updatedItem;
+
+            var $updatedRow = this._createRow(updatedItem, updatedItemIndex);
+            $updatingRow.replaceWith($updatedRow);
+            return $updatedRow;
+        },
+
+        _getEditedItem: function() {
+            var result = {};
+            this._eachField(function(field) {
+                if(field.editing) {
+                    this._setItemFieldValue(result, field, field.editValue());
+                }
+            });
+            return result;
+        },
+
+        cancelEdit: function() {
+            if(!this._editingRow)
+                return;
+
+            this._getEditRow().remove();
+            this._editingRow.show();
+            this._editingRow = null;
+        },
+
+        _getEditRow: function() {
+            return this._editingRow && this._editingRow.data(JSGRID_EDIT_ROW_DATA_KEY);
+        },
+
+        deleteItem: function(item) {
+            var $row = this.rowByItem(item);
+
+            if(!$row.length)
+                return;
+
+            if(this.confirmDeleting && !window.confirm(getOrApply(this.deleteConfirm, this, $row.data(JSGRID_ROW_DATA_KEY))))
+                return;
+
+            return this._deleteRow($row);
+        },
+
+        _deleteRow: function($row) {
+            var deletingItem = $row.data(JSGRID_ROW_DATA_KEY),
+                deletingItemIndex = this._itemIndex(deletingItem);
+
+            var args = this._callEventHandler(this.onItemDeleting, {
+                row: $row,
+                item: deletingItem,
+                itemIndex: deletingItemIndex
+            });
+
+            return this._controllerCall("deleteItem", deletingItem, args.cancel, function() {
+                this._loadStrategy.finishDelete(deletingItem, deletingItemIndex);
+
+                this._callEventHandler(this.onItemDeleted, {
+                    row: $row,
+                    item: deletingItem,
+                    itemIndex: deletingItemIndex
+                });
+            });
+        }
+    };
+
+    $.fn.jsGrid = function(config) {
+        var args = $.makeArray(arguments),
+            methodArgs = args.slice(1),
+            result = this;
+
+        this.each(function() {
+            var $element = $(this),
+                instance = $element.data(JSGRID_DATA_KEY),
+                methodResult;
+
+            if(instance) {
+                if(typeof config === "string") {
+                    methodResult = instance[config].apply(instance, methodArgs);
+                    if(methodResult !== undefined && methodResult !== instance) {
+                        result = methodResult;
+                        return false;
+                    }
+                } else {
+                    instance._detachWindowResizeCallback();
+                    instance._init(config);
+                    instance.render();
+                }
+            } else {
+                new Grid($element, config);
+            }
+        });
+
+        return result;
+    };
+
+    var fields = {};
+
+    var setDefaults = function(config) {
+        var componentPrototype;
+
+        if($.isPlainObject(config)) {
+            componentPrototype = Grid.prototype;
+        } else {
+            componentPrototype = fields[config].prototype;
+            config = arguments[1] || {};
+        }
+
+        $.extend(componentPrototype, config);
+    };
+
+    var locales = {};
+
+    var locale = function(lang) {
+        var localeConfig = $.isPlainObject(lang) ? lang : locales[lang];
+
+        if(!localeConfig)
+            throw Error("unknown locale " + lang);
+
+        setLocale(jsGrid, localeConfig);
+    };
+
+    var setLocale = function(obj, localeConfig) {
+        $.each(localeConfig, function(field, value) {
+            if($.isPlainObject(value)) {
+                setLocale(obj[field] || obj[field[0].toUpperCase() + field.slice(1)], value);
+                return;
+            }
+
+            if(obj.hasOwnProperty(field)) {
+                obj[field] = value;
+            } else {
+                obj.prototype[field] = value;
+            }
+        });
+    };
+
+    window.jsGrid = {
+        Grid: Grid,
+        fields: fields,
+        setDefaults: setDefaults,
+        locales: locales,
+        locale: locale,
+        version: '1.5.3'
+    };
+
+}(window, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    function LoadIndicator(config) {
+        this._init(config);
+    }
+
+    LoadIndicator.prototype = {
+
+        container: "body",
+        message: "Loading...",
+        shading: true,
+
+        zIndex: 1000,
+        shaderClass: "jsgrid-load-shader",
+        loadPanelClass: "jsgrid-load-panel",
+
+        _init: function(config) {
+            $.extend(true, this, config);
+
+            this._initContainer();
+            this._initShader();
+            this._initLoadPanel();
+        },
+
+        _initContainer: function() {
+            this._container = $(this.container);
+        },
+
+        _initShader: function() {
+            if(!this.shading)
+                return;
+
+            this._shader = $("<div>").addClass(this.shaderClass)
+                .hide()
+                .css({
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0,
+                    zIndex: this.zIndex
+                })
+                .appendTo(this._container);
+        },
+
+        _initLoadPanel: function() {
+            this._loadPanel = $("<div>").addClass(this.loadPanelClass)
+                .text(this.message)
+                .hide()
+                .css({
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    zIndex: this.zIndex
+                })
+                .appendTo(this._container);
+        },
+
+        show: function() {
+            var $loadPanel = this._loadPanel.show();
+
+            var actualWidth = $loadPanel.outerWidth();
+            var actualHeight = $loadPanel.outerHeight();
+
+            $loadPanel.css({
+                marginTop: -actualHeight / 2,
+                marginLeft: -actualWidth / 2
+            });
+
+            this._shader.show();
+        },
+
+        hide: function() {
+            this._loadPanel.hide();
+            this._shader.hide();
+        }
+
+    };
+
+    jsGrid.LoadIndicator = LoadIndicator;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    function DirectLoadingStrategy(grid) {
+        this._grid = grid;
+    }
+
+    DirectLoadingStrategy.prototype = {
+
+        firstDisplayIndex: function() {
+            var grid = this._grid;
+            return grid.option("paging") ? (grid.option("pageIndex") - 1) * grid.option("pageSize") : 0;
+        },
+
+        lastDisplayIndex: function() {
+            var grid = this._grid;
+            var itemsCount = grid.option("data").length;
+
+            return grid.option("paging")
+                ? Math.min(grid.option("pageIndex") * grid.option("pageSize"), itemsCount)
+                : itemsCount;
+        },
+
+        itemsCount: function() {
+            return this._grid.option("data").length;
+        },
+
+        openPage: function(index) {
+            this._grid.refresh();
+        },
+
+        loadParams: function() {
+            return {};
+        },
+
+        sort: function() {
+            this._grid._sortData();
+            this._grid.refresh();
+            return $.Deferred().resolve().promise();
+        },
+
+        reset: function() {
+            this._grid.refresh();
+            return $.Deferred().resolve().promise();
+        },
+
+        finishLoad: function(loadedData) {
+            this._grid.option("data", loadedData);
+        },
+
+        finishInsert: function(insertedItem) {
+            var grid = this._grid;
+            grid.option("data").push(insertedItem);
+            grid.refresh();
+        },
+
+        finishDelete: function(deletedItem, deletedItemIndex) {
+            var grid = this._grid;
+            grid.option("data").splice(deletedItemIndex, 1);
+            grid.reset();
+        }
+    };
+
+
+    function PageLoadingStrategy(grid) {
+        this._grid = grid;
+        this._itemsCount = 0;
+    }
+
+    PageLoadingStrategy.prototype = {
+
+        firstDisplayIndex: function() {
+            return 0;
+        },
+
+        lastDisplayIndex: function() {
+            return this._grid.option("data").length;
+        },
+
+        itemsCount: function() {
+            return this._itemsCount;
+        },
+
+        openPage: function(index) {
+            this._grid.loadData();
+        },
+
+        loadParams: function() {
+            var grid = this._grid;
+            return {
+                pageIndex: grid.option("pageIndex"),
+                pageSize: grid.option("pageSize")
+            };
+        },
+
+        reset: function() {
+            return this._grid.loadData();
+        },
+
+        sort: function() {
+            return this._grid.loadData();
+        },
+
+        finishLoad: function(loadedData) {
+            this._itemsCount = loadedData.itemsCount;
+            this._grid.option("data", loadedData.data);
+        },
+
+        finishInsert: function(insertedItem) {
+            this._grid.search();
+        },
+
+        finishDelete: function(deletedItem, deletedItemIndex) {
+            this._grid.search();
+        }
+    };
+
+    jsGrid.loadStrategies = {
+        DirectLoadingStrategy: DirectLoadingStrategy,
+        PageLoadingStrategy: PageLoadingStrategy
+    };
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    var isDefined = function(val) {
+        return typeof(val) !== "undefined" && val !== null;
+    };
+
+    var sortStrategies = {
+        string: function(str1, str2) {
+            if(!isDefined(str1) && !isDefined(str2))
+                return 0;
+
+            if(!isDefined(str1))
+                return -1;
+
+            if(!isDefined(str2))
+                return 1;
+
+            return ("" + str1).localeCompare("" + str2);
+        },
+
+        number: function(n1, n2) {
+            return n1 - n2;
+        },
+
+        date: function(dt1, dt2) {
+            return dt1 - dt2;
+        },
+
+        numberAsString: function(n1, n2) {
+            return parseFloat(n1) - parseFloat(n2);
+        }
+    };
+
+    jsGrid.sortStrategies = sortStrategies;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    function Validation(config) {
+        this._init(config);
+    }
+
+    Validation.prototype = {
+
+        _init: function(config) {
+            $.extend(true, this, config);
+        },
+
+        validate: function(args) {
+            var errors = [];
+
+            $.each(this._normalizeRules(args.rules), function(_, rule) {
+                if(rule.validator(args.value, args.item, rule.param))
+                    return;
+
+                var errorMessage = $.isFunction(rule.message) ? rule.message(args.value, args.item) : rule.message;
+                errors.push(errorMessage);
+            });
+
+            return errors;
+        },
+
+        _normalizeRules: function(rules) {
+            if(!$.isArray(rules))
+                rules = [rules];
+
+            return $.map(rules, $.proxy(function(rule) {
+                return this._normalizeRule(rule);
+            }, this));
+        },
+
+        _normalizeRule: function(rule) {
+            if(typeof rule === "string")
+                rule = { validator: rule };
+
+            if($.isFunction(rule))
+                rule = { validator: rule };
+
+            if($.isPlainObject(rule))
+                rule = $.extend({}, rule);
+            else
+                throw Error("wrong validation config specified");
+
+            if($.isFunction(rule.validator))
+                return rule;
+
+            return this._applyNamedValidator(rule, rule.validator);
+        },
+
+        _applyNamedValidator: function(rule, validatorName) {
+            delete rule.validator;
+
+            var validator = validators[validatorName];
+            if(!validator)
+                throw Error("unknown validator \"" + validatorName + "\"");
+
+            if($.isFunction(validator)) {
+                validator = { validator: validator };
+            }
+
+            return $.extend({}, validator, rule);
+        }
+    };
+
+    jsGrid.Validation = Validation;
+
+
+    var validators = {
+        required: {
+            message: "Field is required",
+            validator: function(value) {
+                return value !== undefined && value !== null && value !== "";
+            }
+        },
+
+        rangeLength: {
+            message: "Field value length is out of the defined range",
+            validator: function(value, _, param) {
+                return value.length >= param[0] && value.length <= param[1];
+            }
+        },
+
+        minLength: {
+            message: "Field value is too short",
+            validator: function(value, _, param) {
+                return value.length >= param;
+            }
+        },
+
+        maxLength: {
+            message: "Field value is too long",
+            validator: function(value, _, param) {
+                return value.length <= param;
+            }
+        },
+
+        pattern: {
+            message: "Field value is not matching the defined pattern",
+            validator: function(value, _, param) {
+                if(typeof param === "string") {
+                    param = new RegExp("^(?:" + param + ")$");
+                }
+                return param.test(value);
+            }
+        },
+
+        range: {
+            message: "Field value is out of the defined range",
+            validator: function(value, _, param) {
+                return value >= param[0] && value <= param[1];
+            }
+        },
+
+        min: {
+            message: "Field value is too small",
+            validator: function(value, _, param) {
+                return value >= param;
+            }
+        },
+
+        max: {
+            message: "Field value is too large",
+            validator: function(value, _, param) {
+                return value <= param;
+            }
+        }
+    };
+
+    jsGrid.validators = validators;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    function Field(config) {
+        $.extend(true, this, config);
+        this.sortingFunc = this._getSortingFunc();
+    }
+
+    Field.prototype = {
+        name: "",
+        title: null,
+        css: "",
+        align: "",
+        width: 100,
+
+        visible: true,
+        filtering: true,
+        inserting: true,
+        editing: true,
+        sorting: true,
+        sorter: "string", // name of SortStrategy or function to compare elements
+
+        headerTemplate: function() {
+            return (this.title === undefined || this.title === null) ? this.name : this.title;
+        },
+
+        itemTemplate: function(value, item) {
+            return value;
+        },
+
+        filterTemplate: function() {
+            return "";
+        },
+
+        insertTemplate: function() {
+            return "";
+        },
+
+        editTemplate: function(value, item) {
+            this._value = value;
+            return this.itemTemplate(value, item);
+        },
+
+        filterValue: function() {
+            return "";
+        },
+
+        insertValue: function() {
+            return "";
+        },
+
+        editValue: function() {
+            return this._value;
+        },
+
+        _getSortingFunc: function() {
+            var sorter = this.sorter;
+
+            if($.isFunction(sorter)) {
+                return sorter;
+            }
+
+            if(typeof sorter === "string") {
+                return jsGrid.sortStrategies[sorter];
+            }
+
+            throw Error("wrong sorter for the field \"" + this.name + "\"!");
+        }
+    };
+
+    jsGrid.Field = Field;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    var Field = jsGrid.Field;
+
+    function TextField(config) {
+        Field.call(this, config);
+    }
+
+    TextField.prototype = new Field({
+
+        autosearch: true,
+		readOnly: false,
+
+        filterTemplate: function() {
+            if(!this.filtering)
+                return "";
+
+            var grid = this._grid,
+                $result = this.filterControl = this._createTextBox();
+
+            if(this.autosearch) {
+                $result.on("keypress", function(e) {
+                    if(e.which === 13) {
+                        grid.search();
+                        e.preventDefault();
+                    }
+                });
+            }
+
+            return $result;
+        },
+
+        insertTemplate: function() {
+            if(!this.inserting)
+                return "";
+
+            return this.insertControl = this._createTextBox();
+        },
+
+        editTemplate: function(value) {
+            if(!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+            var $result = this.editControl = this._createTextBox();
+            $result.val(value);
+            return $result;
+        },
+
+        filterValue: function() {
+            return this.filterControl.val();
+        },
+
+        insertValue: function() {
+            return this.insertControl.val();
+        },
+
+        editValue: function() {
+            return this.editControl.val();
+        },
+
+        _createTextBox: function() {
+            return $("<input>").attr("type", "text")
+                .prop("readonly", !!this.readOnly);
+        }
+    });
+
+    jsGrid.fields.text = jsGrid.TextField = TextField;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    var TextField = jsGrid.TextField;
+
+    function NumberField(config) {
+        TextField.call(this, config);
+    }
+
+    NumberField.prototype = new TextField({
+
+        sorter: "number",
+        align: "right",
+		readOnly: false,
+
+        filterValue: function() {
+            return this.filterControl.val()
+                ? parseInt(this.filterControl.val() || 0, 10)
+                : undefined;
+        },
+
+        insertValue: function() {
+            return this.insertControl.val()
+                ? parseInt(this.insertControl.val() || 0, 10)
+                : undefined;
+        },
+
+        editValue: function() {
+            return this.editControl.val()
+                ? parseInt(this.editControl.val() || 0, 10)
+                : undefined;
+        },
+
+        _createTextBox: function() {
+			return $("<input>").attr("type", "number")
+                .prop("readonly", !!this.readOnly);
+        }
+    });
+
+    jsGrid.fields.number = jsGrid.NumberField = NumberField;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    var TextField = jsGrid.TextField;
+
+    function TextAreaField(config) {
+        TextField.call(this, config);
+    }
+
+    TextAreaField.prototype = new TextField({
+
+        insertTemplate: function() {
+            if(!this.inserting)
+                return "";
+
+            return this.insertControl = this._createTextArea();
+        },
+
+        editTemplate: function(value) {
+            if(!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+            var $result = this.editControl = this._createTextArea();
+            $result.val(value);
+            return $result;
+        },
+
+        _createTextArea: function() {
+            return $("<textarea>").prop("readonly", !!this.readOnly);
+        }
+    });
+
+    jsGrid.fields.textarea = jsGrid.TextAreaField = TextAreaField;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    var NumberField = jsGrid.NumberField;
+    var numberValueType = "number";
+    var stringValueType = "string";
+
+    function SelectField(config) {
+        this.items = [];
+        this.selectedIndex = -1;
+        this.valueField = "";
+        this.textField = "";
+
+        if(config.valueField && config.items.length) {
+            var firstItemValue = config.items[0][config.valueField];
+            this.valueType = (typeof firstItemValue) === numberValueType ? numberValueType : stringValueType;
+        }
+
+        this.sorter = this.valueType;
+
+        NumberField.call(this, config);
+    }
+
+    SelectField.prototype = new NumberField({
+
+        align: "center",
+        valueType: numberValueType,
+
+        itemTemplate: function(value) {
+            var items = this.items,
+                valueField = this.valueField,
+                textField = this.textField,
+                resultItem;
+
+            if(valueField) {
+                resultItem = $.grep(items, function(item, index) {
+                    return item[valueField] === value;
+                })[0] || {};
+            }
+            else {
+                resultItem = items[value];
+            }
+
+            var result = (textField ? resultItem[textField] : resultItem);
+
+            return (result === undefined || result === null) ? "" : result;
+        },
+
+        filterTemplate: function() {
+            if(!this.filtering)
+                return "";
+
+            var grid = this._grid,
+                $result = this.filterControl = this._createSelect();
+
+            if(this.autosearch) {
+                $result.on("change", function(e) {
+                    grid.search();
+                });
+            }
+
+            return $result;
+        },
+
+        insertTemplate: function() {
+            if(!this.inserting)
+                return "";
+
+            return this.insertControl = this._createSelect();
+        },
+
+        editTemplate: function(value) {
+            if(!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+            var $result = this.editControl = this._createSelect();
+            (value !== undefined) && $result.val(value);
+            return $result;
+        },
+
+        filterValue: function() {
+            var val = this.filterControl.val();
+            return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
+        },
+
+        insertValue: function() {
+            var val = this.insertControl.val();
+            return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
+        },
+
+        editValue: function() {
+            var val = this.editControl.val();
+            return this.valueType === numberValueType ? parseInt(val || 0, 10) : val;
+        },
+
+        _createSelect: function() {
+            var $result = $("<select>"),
+                valueField = this.valueField,
+                textField = this.textField,
+                selectedIndex = this.selectedIndex;
+
+            $.each(this.items, function(index, item) {
+                var value = valueField ? item[valueField] : index,
+                    text = textField ? item[textField] : item;
+
+                var $option = $("<option>")
+                    .attr("value", value)
+                    .text(text)
+                    .appendTo($result);
+
+                $option.prop("selected", (selectedIndex === index));
+            });
+
+            $result.prop("disabled", !!this.readOnly);
+
+            return $result;
+        }
+    });
+
+    jsGrid.fields.select = jsGrid.SelectField = SelectField;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    var Field = jsGrid.Field;
+
+    function CheckboxField(config) {
+        Field.call(this, config);
+    }
+
+    CheckboxField.prototype = new Field({
+
+        sorter: "number",
+        align: "center",
+        autosearch: true,
+
+        itemTemplate: function(value) {
+            return this._createCheckbox().prop({
+                checked: value,
+                disabled: true
+            });
+        },
+
+        filterTemplate: function() {
+            if(!this.filtering)
+                return "";
+
+            var grid = this._grid,
+                $result = this.filterControl = this._createCheckbox();
+
+            $result.prop({
+                readOnly: true,
+                indeterminate: true
+            });
+
+            $result.on("click", function() {
+                var $cb = $(this);
+
+                if($cb.prop("readOnly")) {
+                    $cb.prop({
+                        checked: false,
+                        readOnly: false
+                    });
+                }
+                else if(!$cb.prop("checked")) {
+                    $cb.prop({
+                        readOnly: true,
+                        indeterminate: true
+                    });
+                }
+            });
+
+            if(this.autosearch) {
+                $result.on("click", function() {
+                    grid.search();
+                });
+            }
+
+            return $result;
+        },
+
+        insertTemplate: function() {
+            if(!this.inserting)
+                return "";
+
+            return this.insertControl = this._createCheckbox();
+        },
+
+        editTemplate: function(value) {
+            if(!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+            var $result = this.editControl = this._createCheckbox();
+            $result.prop("checked", value);
+            return $result;
+        },
+
+        filterValue: function() {
+            return this.filterControl.get(0).indeterminate
+                ? undefined
+                : this.filterControl.is(":checked");
+        },
+
+        insertValue: function() {
+            return this.insertControl.is(":checked");
+        },
+
+        editValue: function() {
+            return this.editControl.is(":checked");
+        },
+
+        _createCheckbox: function() {
+            return $("<input>").attr("type", "checkbox");
+        }
+    });
+
+    jsGrid.fields.checkbox = jsGrid.CheckboxField = CheckboxField;
+
+}(jsGrid, jQuery));
+
+(function(jsGrid, $, undefined) {
+
+    var Field = jsGrid.Field;
+
+    function ControlField(config) {
+        Field.call(this, config);
+        this._configInitialized = false;
+    }
+
+    ControlField.prototype = new Field({
+        css: "jsgrid-control-field",
+        align: "center",
+        width: 50,
+        filtering: false,
+        inserting: false,
+        editing: false,
+        sorting: false,
+
+        buttonClass: "jsgrid-button",
+        modeButtonClass: "jsgrid-mode-button",
+
+        modeOnButtonClass: "jsgrid-mode-on-button",
+        searchModeButtonClass: "jsgrid-search-mode-button",
+        insertModeButtonClass: "jsgrid-insert-mode-button",
+        editButtonClass: "jsgrid-edit-button",
+        deleteButtonClass: "jsgrid-delete-button",
+        searchButtonClass: "jsgrid-search-button",
+        clearFilterButtonClass: "jsgrid-clear-filter-button",
+        insertButtonClass: "jsgrid-insert-button",
+        updateButtonClass: "jsgrid-update-button",
+        cancelEditButtonClass: "jsgrid-cancel-edit-button",
+
+        searchModeButtonTooltip: "Switch to searching",
+        insertModeButtonTooltip: "Switch to inserting",
+        editButtonTooltip: "Edit",
+        deleteButtonTooltip: "Delete",
+        searchButtonTooltip: "Search",
+        clearFilterButtonTooltip: "Clear filter",
+        insertButtonTooltip: "Insert",
+        updateButtonTooltip: "Update",
+        cancelEditButtonTooltip: "Cancel edit",
+
+        editButton: true,
+        deleteButton: true,
+        clearFilterButton: true,
+        modeSwitchButton: true,
+
+        _initConfig: function() {
+            this._hasFiltering = this._grid.filtering;
+            this._hasInserting = this._grid.inserting;
+
+            if(this._hasInserting && this.modeSwitchButton) {
+                this._grid.inserting = false;
+            }
+
+            this._configInitialized = true;
+        },
+
+        headerTemplate: function() {
+            if(!this._configInitialized) {
+                this._initConfig();
+            }
+
+            var hasFiltering = this._hasFiltering;
+            var hasInserting = this._hasInserting;
+
+            if(!this.modeSwitchButton || (!hasFiltering && !hasInserting))
+                return "";
+
+            if(hasFiltering && !hasInserting)
+                return this._createFilterSwitchButton();
+
+            if(hasInserting && !hasFiltering)
+                return this._createInsertSwitchButton();
+
+            return this._createModeSwitchButton();
+        },
+
+        itemTemplate: function(value, item) {
+            var $result = $([]);
+
+            if(this.editButton) {
+                $result = $result.add(this._createEditButton(item));
+            }
+
+            if(this.deleteButton) {
+                $result = $result.add(this._createDeleteButton(item));
+            }
+
+            return $result;
+        },
+
+        filterTemplate: function() {
+            var $result = this._createSearchButton();
+            return this.clearFilterButton ? $result.add(this._createClearFilterButton()) : $result;
+        },
+
+        insertTemplate: function() {
+            return this._createInsertButton();
+        },
+
+        editTemplate: function() {
+            return this._createUpdateButton().add(this._createCancelEditButton());
+        },
+
+        _createFilterSwitchButton: function() {
+            return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, true);
+        },
+
+        _createInsertSwitchButton: function() {
+            return this._createOnOffSwitchButton("inserting", this.insertModeButtonClass, false);
+        },
+
+        _createOnOffSwitchButton: function(option, cssClass, isOnInitially) {
+            var isOn = isOnInitially;
+
+            var updateButtonState = $.proxy(function() {
+                $button.toggleClass(this.modeOnButtonClass, isOn);
+            }, this);
+
+            var $button = this._createGridButton(this.modeButtonClass + " " + cssClass, "", function(grid) {
+                isOn = !isOn;
+                grid.option(option, isOn);
+                updateButtonState();
+            });
+
+            updateButtonState();
+
+            return $button;
+        },
+
+        _createModeSwitchButton: function() {
+            var isInserting = false;
+
+            var updateButtonState = $.proxy(function() {
+                $button.attr("title", isInserting ? this.searchModeButtonTooltip : this.insertModeButtonTooltip)
+                    .toggleClass(this.insertModeButtonClass, !isInserting)
+                    .toggleClass(this.searchModeButtonClass, isInserting);
+            }, this);
+
+            var $button = this._createGridButton(this.modeButtonClass, "", function(grid) {
+                isInserting = !isInserting;
+                grid.option("inserting", isInserting);
+                grid.option("filtering", !isInserting);
+                updateButtonState();
+            });
+
+            updateButtonState();
+
+            return $button;
+        },
+
+        _createEditButton: function(item) {
+            return this._createGridButton(this.editButtonClass, this.editButtonTooltip, function(grid, e) {
+                grid.editItem(item);
+                e.stopPropagation();
+            });
+        },
+
+        _createDeleteButton: function(item) {
+            return this._createGridButton(this.deleteButtonClass, this.deleteButtonTooltip, function(grid, e) {
+                grid.deleteItem(item);
+                e.stopPropagation();
+            });
+        },
+
+        _createSearchButton: function() {
+            return this._createGridButton(this.searchButtonClass, this.searchButtonTooltip, function(grid) {
+                grid.search();
+            });
+        },
+
+        _createClearFilterButton: function() {
+            return this._createGridButton(this.clearFilterButtonClass, this.clearFilterButtonTooltip, function(grid) {
+                grid.clearFilter();
+            });
+        },
+
+        _createInsertButton: function() {
+            return this._createGridButton(this.insertButtonClass, this.insertButtonTooltip, function(grid) {
+                grid.insertItem().done(function() {
+                    grid.clearInsert();
+                });
+            });
+        },
+
+        _createUpdateButton: function() {
+            return this._createGridButton(this.updateButtonClass, this.updateButtonTooltip, function(grid, e) {
+                grid.updateItem();
+                e.stopPropagation();
+            });
+        },
+
+        _createCancelEditButton: function() {
+            return this._createGridButton(this.cancelEditButtonClass, this.cancelEditButtonTooltip, function(grid, e) {
+                grid.cancelEdit();
+                e.stopPropagation();
+            });
+        },
+
+        _createGridButton: function(cls, tooltip, clickHandler) {
+            var grid = this._grid;
+
+            return $("<input>").addClass(this.buttonClass)
+                .addClass(cls)
+                .attr({
+                    type: "button",
+                    title: tooltip
+                })
+                .on("click", function(e) {
+                    clickHandler(grid, e);
+                });
+        },
+
+        editValue: function() {
+            return "";
+        }
+
+    });
+
+    jsGrid.fields.control = jsGrid.ControlField = ControlField;
+
+}(jsGrid, jQuery));

plugins/jsgrid/jsgrid.min.css

@@ -0,0 +1,7 @@
+/*
+ * 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 :after,.jsgrid :before{box-sizing:border-box}.jsgrid input,.jsgrid select,.jsgrid textarea{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:.5em}.jsgrid-header-cell,.jsgrid-сell{box-sizing:border-box}.jsgrid-align-left{text-align:left}.jsgrid-align-center,.jsgrid-align-center input,.jsgrid-align-center select,.jsgrid-align-center textarea{text-align:center}.jsgrid-align-right,.jsgrid-align-right input,.jsgrid-align-right select,.jsgrid-align-right textarea{text-align:right}.jsgrid-header-cell{padding:.5em}.jsgrid-edit-row input,.jsgrid-edit-row select,.jsgrid-edit-row textarea,.jsgrid-filter-row input,.jsgrid-filter-row select,.jsgrid-filter-row textarea,.jsgrid-insert-row input,.jsgrid-insert-row select,.jsgrid-insert-row textarea{width:100%;padding:.3em .5em}.jsgrid-edit-row input[type=checkbox],.jsgrid-filter-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}