url

.gitignore

-node_modules
-.project
-.settings
-morpheus_3rd_party.xlsx
-js/morpheus-external.js
-js/morpheus-external.min.js
-js/morpheus.js
\ No newline at end of file
+# Created by .ignore support plugin (hsz.mobi)

.idea/codeStyleSettings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectCodeStyleSettingsManager">
+    <option name="PER_PROJECT_SETTINGS">
+      <value>
+        <XML>
+          <option name="XML_LEGACY_SETTINGS_IMPORTED" value="true" />
+        </XML>
+      </value>
+    </option>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default (1)" />
+  </component>
+</project>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
+      <option name="processCode" value="false" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file

.idea/inspectionProfiles/profiles_settings.xml

+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="PROJECT_PROFILE" value="Project Default" />
+    <option name="USE_PROJECT_PROFILE" value="true" />
+    <version value="1.0" />
+  </settings>
+</component>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

Gruntfile.apps.js

+/*global module:false*/
+module.exports = function(grunt) {
+	grunt
+			.initConfig({
+				pkg : grunt.file.readJSON('package.json'),
+				meta : {
+					banner : '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - '
+							+ '<%= grunt.template.today("yyyy-mm-dd") %>\n'
+							+ '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>'
+							+ '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>; %> */'
+				},
+				's3-sync' : {
+					options : {
+						key : 'AKIAIJEUG7S3IGYDERQQ',
+						secret : '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',
+						bucket : 'appdata.cmap.org'
+					},
+					tcga : {
+						files : [ {
+							root : 'U:/users/jgould/tcga_current/test',
+							src : [ 'U:/users/jgould/tcga_current/test/**' ],
+							dest : 'morpheus/tcga/',
+							gzip : true,
+							compressionLevel : 9
+						} ]
+					}
+				},
+				uglify : {
+					extApps : {
+						options : {
+							mangle : false
+						},
+						files : {
+							'js/morpheus.external.apps.min.js' : [ 'js/morpheus.external.apps.js' ]
+						}
+					}
+				},
+				cssmin : {
+					apps : {
+						src : 'css/morpheus.external.apps.css',
+						dest : 'css/morpheus.external.apps.min.css'
+					}
+				},
+				concat : {
+					extCss : {
+						src : [ 'css/jquery-ui.min.css',
+								'css/font-awesome.min.css',
+								'css/hopscotch.min.css', 'css/slick.grid.css' ],
+						dest : 'css/morpheus.external.apps.css'
+					},
+					extJs : {
+						nonull : true,
+						dest : 'js/morpheus.external.apps.js',
+						src : [ 'js/newick.js', 'js/hammer.min.js',
+								'js/jquery.mousewheel.min.js',
+								'js/bootstrap-select.min.js',
+								'js/xlsx.full.min.js', 'js/canvas2svg.js',
+								'js/canvg.js', 'js/rgbcolor.js',
+								'js/jquery-ui.min.js', 'js/parser.js',
+								'js/FileSaver.min.js', 'js/Blob.js',
+								'js/canvas-toBlob.js', 'js/colorbrewer.js',
+								'js/hopscotch.min.js', 'js/typed.min.js',
+								'js/jquery.event.drag-2.2.js',
+								'js/slick.min.js', 'js/quadtree.min.js',
+								'js/clipboard.min.js', 'js/d3.min.js',
+								'js/d3.layout.cloud.js' ]
+					},
+					morpheus : {
+						nonull : true,
+						dest : 'js/morpheus.js',
+						src : [ 'src/util/util.js', 'src/util/*.js',
+								'src/io/*.js', 'src/matrix/vector_adapter.js',
+								'src/table/list.js', 'src/matrix/*.js',
+								'src/*.js', 'src/tools/*.js', 'src/ui/*.js',
+								'src/**/*.js' ]
+					}
+				},
+				watch : {
+					files : [ 'src/*.js', 'src/**/*.js' ],
+					tasks : [ 'concat:morpheus', 'copy:apps' ]
+				},
+				copy : {
+					apps : {
+						src : 'js/morpheus.js',
+						dest : '../kafejo/public/lib/js/morpheus.js'
+					},
+					appsMin : {
+						src : 'js/morpheus.min.js',
+						dest : '../kafejo/public/lib/js/morpheus.min.js'
+					},
+					morpheus : {
+						files : [ {
+							src : [ 'css/**' ],
+							dest : '../kafejo/public/morpheus/',
+						}, {
+
+							src : [ 'fonts/**' ],
+							dest : '../kafejo/public/morpheus/',
+						}, {
+							src : [ 'js/**' ],
+							dest : '../kafejo/public/morpheus/',
+						}, {
+							src : [ '*.html' ],
+							dest : '../kafejo/public/morpheus/',
+						}, {
+							src : [ 'images/**' ],
+							dest : '../kafejo/public/morpheus/',
+						} ]
+
+					}
+				}
+			});
+	// Default task.
+	grunt.registerTask('default', 'copy');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.loadNpmTasks('grunt-contrib-concat');
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-copy');
+	grunt.loadNpmTasks('grunt-contrib-cssmin');
+	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-s3-sync');
+};

SlickGrid/.gitignore

+.gitk*
+.idea/*
+.DS_Store

SlickGrid/MIT-LICENSE.txt

+Copyright (c) 2010 Michael Leibman, http://github.com/mleibman/slickgrid
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file

SlickGrid/README.md

+## This is the 6pac slickgrid repo
+
+I am maintaining this branch as a separate 'alternative master'. Check [my wiki](https://github.com/6pac/SlickGrid/wiki) for details.
+
+Once we take on SlickGrid we all add [my patch for my specific app requirement]. This 'application noise' makes it much harder to share updates to SlickGrid with other users, who may want some of the changes, but find others irrelevant.  
+
+This repo is deliberately **non-customised**. We have *only* kept jQuery up to date, made bug fixes where necessary and added small features carefully considered to enhance the overall usefulness of the grid.  
+Example pages showcase any new features.
+
+The following, in short, are the changes made since forking from the main MLeibman branch, a significant number in response to issues or pull requests.
+
+**Maintenance:**
+
+* update to jquery-1.11.2 and jquery-ui-1.11.3, with minor patches to accommodate the change
+* Fix bug in dataview causing model benchmark test to throw an error
+* Remove redundant slick pager code
+* Fix unnecessary horizontal scroll for autosized columns when viewport has fractional pixel width
+* Make default group comparer function more robust
+* fix grouping bug (issue #841 & #896 mleibman#898)
+* update DataView compiled-expression regex to deal with some forms of minification
+* Fix Issue #963 ajax example not working
+* additional version of ajax loading page, using Yahoo news and YQL as a source. the format of the grid rows is more in keeping with the newsfeed style of the original
+* Fix tooltip error with draggable columns 
+* Prevent useless onSelectedRangesChanged events in selectionmodels' setSelectedRanges
+* Fix jQueryUI css interfering with SlickGrid css issues
+* Fix column resizing issues with Bootstrap 3/box-sizing:border-box
+* Patch absBox for null element bug (MLeibman #1066)
+* fix bugs identified by JsHint
+* remove deprecated jquery .browser property
+* fix error in autotooltips test
+* add internal keycode enums
+* fix bug in compound editor example 'isValueChanged' method
+
+**New features:**
+
+* Add css manipulation so that grid initialises successfully if the parent element is hidden
+* Add jQueryUI accordion and Bootstrap 3 examples
+* Add multi grid on page example (example-multi-grid-basic)
+* Add async post render async cleanup
+* Allow custom editors to suppress automatic cell clear on edit
+* Add Floating Point editor
+* Add grid as member of args parameter for all events, and to column formatter. Add dataView as member of args parameter for all dataView events
+* add custom validator option to integer, float and date editors
+* Add example of dynamic tab and grid creation for basic grid 
+* Add example of dynamic tab and grid creation for grid with all the features of example-4-model
+
+# Original mleibman README follows:
+
+
+
+
+
+Find documentation and examples in [the wiki](https://github.com/mleibman/SlickGrid/wiki).
+
+# Welcome to SlickGrid
+
+## SlickGrid is an advanced JavaScript grid/spreadsheet component
+
+Some highlights:
+
+* Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
+* Extremely fast rendering speed
+* Supports jQuery UI Themes
+* Background post-rendering for richer cells
+* Configurable & customizable
+* Full keyboard navigation
+* Column resize/reorder/show/hide
+* Column autosizing & force-fit
+* Pluggable cell formatters & editors
+* Support for editing and creating new rows.
+* Grouping, filtering, custom aggregators, and more!
+* Advanced detached & multi-field editors with undo/redo support.
+* “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.
+* Support for [millions of rows](http://stackoverflow.com/a/2569488/1269037)

SlickGrid/controls/slick.columnpicker.css

+.slick-columnpicker {
+  border: 1px solid #718BB7;
+  background: #f0f0f0;
+  padding: 6px;
+  -moz-box-shadow: 2px 2px 2px silver;
+  -webkit-box-shadow: 2px 2px 2px silver;
+  box-shadow: 2px 2px 2px silver;
+  min-width: 100px;
+  cursor: default;
+}
+
+.slick-columnpicker li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+}
+
+.slick-columnpicker input {
+  margin: 4px;
+}
+
+.slick-columnpicker li a {
+  display: block;
+  padding: 4px;
+  font-weight: bold;
+}
+
+.slick-columnpicker li a:hover {
+  background: white;
+}

SlickGrid/controls/slick.columnpicker.js

+(function ($) {
+  function SlickColumnPicker(columns, grid, options) {
+    var $menu;
+    var columnCheckboxes;
+
+    var defaults = {
+      fadeSpeed:250
+    };
+
+    function init() {
+      grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
+      grid.onColumnsReordered.subscribe(updateColumnOrder);
+      options = $.extend({}, defaults, options);
+
+      $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
+
+      $menu.bind("mouseleave", function (e) {
+        $(this).fadeOut(options.fadeSpeed)
+      });
+      $menu.bind("click", updateColumn);
+
+    }
+
+    function destroy() {
+      grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
+      grid.onColumnsReordered.unsubscribe(updateColumnOrder);
+      $menu.remove();
+    }
+
+    function handleHeaderContextMenu(e, args) {
+      e.preventDefault();
+      $menu.empty();
+      updateColumnOrder();
+      columnCheckboxes = [];
+
+      var $li, $input;
+      for (var i = 0; i < columns.length; i++) {
+        $li = $("<li />").appendTo($menu);
+        $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
+        columnCheckboxes.push($input);
+
+        if (grid.getColumnIndex(columns[i].id) != null) {
+          $input.attr("checked", "checked");
+        }
+
+        $("<label />")
+            .text(columns[i].name)
+            .prepend($input)
+            .appendTo($li);
+      }
+
+      $("<hr/>").appendTo($menu);
+      $li = $("<li />").appendTo($menu);
+      $input = $("<input type='checkbox' />").data("option", "autoresize");
+      $("<label />")
+          .text("Force fit columns")
+          .prepend($input)
+          .appendTo($li);
+      if (grid.getOptions().forceFitColumns) {
+        $input.attr("checked", "checked");
+      }
+
+      $li = $("<li />").appendTo($menu);
+      $input = $("<input type='checkbox' />").data("option", "syncresize");
+      $("<label />")
+          .text("Synchronous resize")
+          .prepend($input)
+          .appendTo($li);
+      if (grid.getOptions().syncColumnCellResize) {
+        $input.attr("checked", "checked");
+      }
+
+      $menu
+          .css("top", e.pageY - 10)
+          .css("left", e.pageX - 10)
+          .fadeIn(options.fadeSpeed);
+    }
+
+    function updateColumnOrder() {
+      // Because columns can be reordered, we have to update the `columns`
+      // to reflect the new order, however we can't just take `grid.getColumns()`,
+      // as it does not include columns currently hidden by the picker.
+      // We create a new `columns` structure by leaving currently-hidden
+      // columns in their original ordinal position and interleaving the results
+      // of the current column sort.
+      var current = grid.getColumns().slice(0);
+      var ordered = new Array(columns.length);
+      for (var i = 0; i < ordered.length; i++) {
+        if ( grid.getColumnIndex(columns[i].id) === undefined ) {
+          // If the column doesn't return a value from getColumnIndex,
+          // it is hidden. Leave it in this position.
+          ordered[i] = columns[i];
+        } else {
+          // Otherwise, grab the next visible column.
+          ordered[i] = current.shift();
+        }
+      }
+      columns = ordered;
+    }
+
+    function updateColumn(e) {
+      if ($(e.target).data("option") == "autoresize") {
+        if (e.target.checked) {
+          grid.setOptions({forceFitColumns:true});
+          grid.autosizeColumns();
+        } else {
+          grid.setOptions({forceFitColumns:false});
+        }
+        return;
+      }
+
+      if ($(e.target).data("option") == "syncresize") {
+        if (e.target.checked) {
+          grid.setOptions({syncColumnCellResize:true});
+        } else {
+          grid.setOptions({syncColumnCellResize:false});
+        }
+        return;
+      }
+
+      if ($(e.target).is(":checkbox")) {
+        var visibleColumns = [];
+        $.each(columnCheckboxes, function (i, e) {
+          if ($(this).is(":checked")) {
+            visibleColumns.push(columns[i]);
+          }
+        });
+
+        if (!visibleColumns.length) {
+          $(e.target).attr("checked", "checked");
+          return;
+        }
+
+        grid.setColumns(visibleColumns);
+      }
+    }
+
+    function getAllColumns() {
+      return columns;
+    }
+
+    init();
+
+    return {
+      "getAllColumns": getAllColumns,
+      "destroy": destroy
+    };
+  }
+
+  // Slick.Controls.ColumnPicker
+  $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
+})(jQuery);

SlickGrid/controls/slick.pager.css

+.slick-pager {
+  width: 100%;
+  height: 26px;
+  border: 1px solid gray;
+  border-top: 0;
+  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
+  vertical-align: middle;
+}
+
+.slick-pager .slick-pager-status {
+  display: inline-block;
+  padding: 6px;
+}
+
+.slick-pager .ui-icon-container {
+  display: inline-block;
+  margin: 2px;
+  border-color: gray;
+}
+
+.slick-pager .slick-pager-nav {
+  display: inline-block;
+  float: left;
+  padding: 2px;
+}
+
+.slick-pager .slick-pager-settings {
+  display: block;
+  float: right;
+  padding: 2px;
+}
+
+.slick-pager .slick-pager-settings * {
+  vertical-align: middle;
+}
+
+.slick-pager .slick-pager-settings a {
+  padding: 2px;
+  text-decoration: underline;
+  cursor: pointer;
+}

SlickGrid/controls/slick.pager.js

+(function ($) {
+  function SlickGridPager(dataView, grid, $container) {
+    var $status;
+
+    function init() {
+      dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
+        updatePager(pagingInfo);
+      });
+
+      constructPagerUI();
+      updatePager(dataView.getPagingInfo());
+    }
+
+    function getNavState() {
+      var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
+      var pagingInfo = dataView.getPagingInfo();
+      var lastPage = pagingInfo.totalPages - 1;
+
+      return {
+        canGotoFirst: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
+        canGotoLast: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
+        canGotoPrev: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
+        canGotoNext: !cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
+        pagingInfo: pagingInfo
+      }
+    }
+
+    function setPageSize(n) {
+      dataView.setRefreshHints({
+        isFilterUnchanged: true
+      });
+      dataView.setPagingOptions({pageSize: n});
+    }
+
+    function gotoFirst() {
+      if (getNavState().canGotoFirst) {
+        dataView.setPagingOptions({pageNum: 0});
+      }
+    }
+
+    function gotoLast() {
+      var state = getNavState();
+      if (state.canGotoLast) {
+        dataView.setPagingOptions({pageNum: state.pagingInfo.totalPages - 1});
+      }
+    }
+
+    function gotoPrev() {
+      var state = getNavState();
+      if (state.canGotoPrev) {
+        dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum - 1});
+      }
+    }
+
+    function gotoNext() {
+      var state = getNavState();
+      if (state.canGotoNext) {
+        dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum + 1});
+      }
+    }
+
+    function constructPagerUI() {
+      $container.empty();
+
+      var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
+      var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
+      $status = $("<span class='slick-pager-status' />").appendTo($container);
+
+      $settings
+          .append("<span class='slick-pager-settings-expanded' style='display:none'>Show: <a data=0>All</a><a data='-1'>Auto</a><a data=25>25</a><a data=50>50</a><a data=100>100</a></span>");
+
+      $settings.find("a[data]").click(function (e) {
+        var pagesize = $(e.target).attr("data");
+        if (pagesize != undefined) {
+          if (pagesize == -1) {
+            var vp = grid.getViewport();
+            setPageSize(vp.bottom - vp.top);
+          } else {
+            setPageSize(parseInt(pagesize));
+          }
+        }
+      });
+
+      var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
+      var icon_suffix = "' /></span>";
+
+      $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
+          .click(function () {
+            $(".slick-pager-settings-expanded").toggle()
+          })
+          .appendTo($settings);
+
+      $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
+          .click(gotoFirst)
+          .appendTo($nav);
+
+      $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
+          .click(gotoPrev)
+          .appendTo($nav);
+
+      $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
+          .click(gotoNext)
+          .appendTo($nav);
+
+      $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
+          .click(gotoLast)
+          .appendTo($nav);
+
+      $container.find(".ui-icon-container")
+          .hover(function () {
+            $(this).toggleClass("ui-state-hover");
+          });
+
+      $container.children().wrapAll("<div class='slick-pager' />");
+    }
+
+
+    function updatePager(pagingInfo) {
+      var state = getNavState();
+
+      $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
+      if (!state.canGotoFirst) {
+        $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
+      }
+      if (!state.canGotoLast) {
+        $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
+      }
+      if (!state.canGotoNext) {
+        $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
+      }
+      if (!state.canGotoPrev) {
+        $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
+      }
+
+      if (pagingInfo.pageSize == 0) {
+        $status.text("Showing all " + pagingInfo.totalRows + " rows");
+      } else {
+        $status.text("Showing page " + (pagingInfo.pageNum + 1) + " of " + pagingInfo.totalPages);
+      }
+    }
+
+    init();
+  }
+
+  // Slick.Controls.Pager
+  $.extend(true, window, { Slick:{ Controls:{ Pager:SlickGridPager }}});
+})(jQuery);

SlickGrid/examples/example-autotooltips.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid plugin example: AutoTooltips</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:600px;height:300px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>AutoTooltips plugin</li>
+      </ul>
+      <h2>Instructions:</h2>
+      <p>Resize the columns until see ellipsis in column or header.  Hover over cell to see tooltip.</p>
+      <h2>Usage:</h2>
+      <pre style="background-color: white; font-size: 110%; border-radius: 5px; padding: 20px; ">plugin = new Slick.AutoTooltips(pluginOptions);
+grid.registerPlugin(plugin);
+grid.render();</pre>
+
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-autotooltips.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="../plugins/slick.autotooltips.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: true
+  };
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+    grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
+    grid.render();
+  })
+</script>
+</body>
+</html>
\ No newline at end of file

SlickGrid/examples/example-bootstrap-3-header.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: Basic Grid with Bootstrap 3 css</title>
+  <link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+  #myGrid01, #myGrid02 {
+	background: white;
+	outline: 0;
+	border: 1px solid gray;
+  }
+  </style>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid01" style="width:600px;height:300px;"></div>
+	</td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>Slickgrid with Bootstrap 3 css (bootstrap.css). This imposes 'box-sizing: border-box;' on all elements in the page.</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: true
+  };
+
+  function CreateData() {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+	return data;
+  }
+  
+  $(function () {
+    var data01 = CreateData();
+    grid = new Slick.Grid("#myGrid01", data01, columns, options);
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-checkbox-row-select.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
+  <style>
+    .slick-cell-checkboxsel {
+      background: #f0f0f0;
+      border-right-color: silver;
+      border-right-style: solid;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Checkbox row select column</li>
+    </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-checkbox-row-select.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+
+  </div>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../plugins/slick.checkboxselectcolumn.js"></script>
+<script src="../plugins/slick.autotooltips.js"></script>
+<script src="../plugins/slick.cellrangedecorator.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellcopymanager.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../plugins/slick.rowselectionmodel.js"></script>
+<script src="../controls/slick.columnpicker.js"></script>
+<script src="../slick.formatters.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var data = [];
+  var options = {
+    editable: true,
+    enableCellNavigation: true,
+    asyncEditorLoading: false,
+    autoEdit: false
+  };
+  var columns = [];
+
+  $(function () {
+    for (var i = 0; i < 100; i++) {
+      var d = (data[i] = {});
+      d[0] = "Row " + i;
+    }
+
+    var checkboxSelector = new Slick.CheckboxSelectColumn({
+      cssClass: "slick-cell-checkboxsel"
+    });
+
+    columns.push(checkboxSelector.getColumnDefinition());
+
+    for (var i = 0; i < 5; i++) {
+      columns.push({
+        id: i,
+        name: String.fromCharCode("A".charCodeAt(0) + i),
+        field: i,
+        width: 100,
+        editor: Slick.Editors.Text
+      });
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+    grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
+    grid.registerPlugin(checkboxSelector);
+
+    var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-colspan.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:600px;height:500px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>column span</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-colspan.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../plugins/slick.cellrangedecorator.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete", selectable: false},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false
+  };
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    data.getItemMetadata = function (row) {
+      if (row % 2 === 1) {
+        return {
+          "columns": {
+            "duration": {
+              "colspan": 3
+            }
+          }
+        };
+      } else {
+        return {
+          "columns": {
+            0: {
+              "colspan": "*"
+            }
+          }
+        };
+      }
+    };
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    grid.setSelectionModel(new Slick.CellSelectionModel());
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-composite-editor-item-details.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: CompositeEditor</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+    .cell-title {
+      font-weight: bold;
+    }
+
+    .cell-effort-driven {
+      text-align: center;
+    }
+
+    .item-details-form {
+      z-index: 10000;
+      display: inline-block;
+      border: 1px solid black;
+      margin: 8px;
+      padding: 10px;
+      background: #efefef;
+      -moz-box-shadow: 0px 0px 15px black;
+      -webkit-box-shadow: 0px 0px 15px black;
+      box-shadow: 0px 0px 15px black;
+
+      position: absolute;
+      top: 10px;
+      left: 150px;
+    }
+
+    .item-details-form-buttons {
+      float: right;
+    }
+
+    .item-details-label {
+      margin-left: 10px;
+      margin-top: 20px;
+      display: block;
+      font-weight: bold;
+    }
+
+    .item-details-editor-container {
+      width: 200px;
+      height: 20px;
+      border: 1px solid silver;
+      background: white;
+      display: block;
+      margin: 10px;
+      margin-top: 4px;
+      padding: 0;
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>using a CompositeEditor to implement detached item edit form</li>
+    </ul>
+
+    <h2>Options:</h2>
+    <button onclick="openDetails()">Open Item Edit for active row</button>
+
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-composite-editor-item-details.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+  </div>
+</div>
+
+<script id="itemDetailsTemplate" type="text/x-jquery-tmpl">
+  <div class='item-details-form'>
+    {{each columns}}
+    <div class='item-details-label'>
+      ${name}
+    </div>
+    <div class='item-details-editor-container' data-editorid='${id}'></div>
+    {{/each}}
+
+    <hr/>
+    <div class='item-details-form-buttons'>
+      <button data-action='save'>Save</button>
+      <button data-action='cancel'>Cancel</button>
+    </div>
+  </div>
+</script>
+
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+<script src="../lib/jquery.tmpl.min.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.formatters.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="slick.compositeeditor.js"></script>
+
+<script>
+  function requiredFieldValidator(value) {
+    if (value == null || value == undefined || !value.length) {
+      return {valid: false, msg: "This is a required field"};
+    } else {
+      return {valid: true, msg: null};
+    }
+  }
+
+  var grid;
+  var data = [];
+  var columns = [
+    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
+    {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.Text},
+    {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
+    {id: "percent", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
+    {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
+    {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
+    {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
+  ];
+  var options = {
+    editable: true,
+    enableAddRow: true,
+    enableCellNavigation: true,
+    asyncEditorLoading: false,
+    autoEdit: false
+  };
+
+
+  function openDetails() {
+    if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) {
+      return;
+    }
+
+    var $modal = $("<div class='item-details-form'></div>");
+
+    $modal = $("#itemDetailsTemplate")
+        .tmpl({
+          context: grid.getDataItem(grid.getActiveCell().row),
+          columns: columns
+        })
+        .appendTo("body");
+
+    $modal.keydown(function (e) {
+      if (e.which == $.ui.keyCode.ENTER) {
+        grid.getEditController().commitCurrentEdit();
+        e.stopPropagation();
+        e.preventDefault();
+      } else if (e.which == $.ui.keyCode.ESCAPE) {
+        grid.getEditController().cancelCurrentEdit();
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    });
+
+    $modal.find("[data-action=save]").click(function () {
+      grid.getEditController().commitCurrentEdit();
+    });
+
+    $modal.find("[data-action=cancel]").click(function () {
+      grid.getEditController().cancelCurrentEdit();
+    });
+
+
+    var containers = $.map(columns, function (c) {
+      return $modal.find("[data-editorid=" + c.id + "]");
+    });
+
+    var compositeEditor = new Slick.CompositeEditor(
+        columns,
+        containers,
+        {
+          destroy: function () {
+            $modal.remove();
+          }
+        }
+    );
+
+    grid.editActiveCell(compositeEditor);
+  }
+
+  $(function () {
+    for (var i = 0; i < 500; i++) {
+      var d = (data[i] = {});
+
+      d["title"] = "Task " + i;
+      d["description"] = "This is a sample task description.\n  It can be multiline";
+      d["duration"] = "5 days";
+      d["percentComplete"] = Math.round(Math.random() * 100);
+      d["start"] = "01/01/2009";
+      d["finish"] = "01/05/2009";
+      d["effortDriven"] = (i % 5 == 0);
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    grid.onAddNewRow.subscribe(function (e, args) {
+      var item = args.item;
+      var column = args.column;
+      grid.invalidateRow(data.length);
+      data.push(item);
+      grid.updateRowCount();
+      grid.render();
+    });
+
+
+    grid.onValidationError.subscribe(function (e, args) {
+      // handle validation errors originating from the CompositeEditor
+      if (args.editor && (args.editor instanceof Slick.CompositeEditor)) {
+        var err;
+        var idx = args.validationResults.errors.length;
+        while (idx--) {
+          err = args.validationResults.errors[idx];
+          $(err.container).stop(true, true).effect("highlight", {color: "red"});
+        }
+      }
+    });
+
+    grid.setActiveCell(0, 0);
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-custom-column-value-extractor.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: Custom column value extractor</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:600px;height:500px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>using <u>dataItemColumnValueExtractor</u> option to specify a custom column value extractor</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-custom-column-value-extractor.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Name", field: "name"},
+    {id: "field1", name: "Field1", field: "values", fieldIdx: 0},
+    {id: "field2", name: "Field2", field: "values", fieldIdx: 1},
+    {id: "field3", name: "Field3", field: "values", fieldIdx: 2}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false,
+    dataItemColumnValueExtractor: getItemColumnValue
+  };
+
+  // Get the item column value using a custom 'fieldIdx' column param
+  function getItemColumnValue(item, column) {
+    var values = item[column.field];
+    if (column.fieldIdx !== undefined) {
+      return values && values[column.fieldIdx];
+    } else {
+      return values;
+    }
+  }
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        name: "Item " + i,
+        values: [
+          Math.round(Math.random() * 100),
+          Math.round(Math.random() * 100),
+          Math.round(Math.random() * 100)
+        ]
+      };
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-dynamic-with-jquery-tabs.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: jQuery tabs with a dynamic grid in each pane</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+  .my-grid {
+	background: white;
+	outline: 0;
+	border: 1px solid gray;
+  }
+  </style>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+		<button id='add-tab'>Add tab</button>
+		<div id="tabs">
+		  <ul>
+			<li><a href="#tabs-1">Grid 1</a></li>
+		  </ul>
+		  <div id="tabs-1">
+			<strong><i>This tab is the original</i></strong>
+			<div id="myGrid1" style="width:600px;height:300px;" class="my-grid"></div>
+		  </div>
+		</div>
+	</td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>jQuery tabs containing a grid in each pane</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var gridArray;
+  
+  function CreateColumns() {
+	  var columns = [
+		{id: "title", name: "Title", field: "title"},
+		{id: "duration", name: "Duration", field: "duration"},
+		{id: "%", name: "% Complete", field: "percentComplete"},
+		{id: "start", name: "Start", field: "start"},
+		{id: "finish", name: "Finish", field: "finish"},
+		{id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
+		{id: "title", name: "Title", field: "title"},
+		{id: "duration", name: "Duration", field: "duration"},
+		{id: "%", name: "% Complete", field: "percentComplete"},
+		{id: "start", name: "Start", field: "start"},
+		{id: "finish", name: "Finish", field: "finish"},
+		{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+	  ];
+	return columns;
+  }
+
+ function CreateOptions() {
+	var options = {
+	  enableCellNavigation: true,
+	  enableColumnReorder: false
+	};
+	return options;
+  }
+
+  function CreateData() {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+	return data;
+  }
+  
+  function CreateGrid(elementId) {
+    if (!gridArray) { gridArray = []; }
+	
+	var data = CreateData();
+    var grid = new Slick.Grid("#" + elementId, data, CreateColumns(), CreateOptions());
+	
+	gridArray[length] = grid;
+  }
+  
+  $(function () {
+	// take care of jqueryui tabs and adding tab
+    $( "div#tabs" ).tabs();	
+ 
+    $("button#add-tab").click(function() {
+        var num_tabs = $("div#tabs ul li").length + 1;
+
+        $("div#tabs ul").append(
+            "<li><a href='#tab" + num_tabs + "'>Grid " + num_tabs + "</a></li>"
+        );
+		$("div#tabs").append(
+            "<div id='tab" + num_tabs + "'>"
+				+ '<div id="myGrid' + num_tabs + '" style="width:600px;height:300px;" class="my-grid"></div>'
+			+ "</div>"
+        );
+		CreateGrid("myGrid" + num_tabs);
+        $("div#tabs").tabs("refresh");
+    });
+
+	CreateGrid("myGrid1");
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-explicit-initialization.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: Explicit grid initialization</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%" cellpadding="20">
+  <tr>
+    <td valign="top" width="50%" id="myTable">
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <p>
+          The container which the grid is being created in needs to be in the DOM and participate in layout
+          (can be 'visibility:hidden' but not 'display:none') in order for SlickGrid to be able to make certain
+          measurements and initialize event listeners.  Normally, this is done when a SlickGrid instance is 
+          being created.  Optionally, you can defer the initialization until the above condition is met and call
+          the <b>grid.init()</b> method explicitly.  To use explicit initialization, set the <b>explicitInitialization</b>
+          option to true.
+          <br/><br/>
+          This example demonstrates creating a SlickGrid inside a detached element and calling <b>init()</b> explicitly
+          when the element is added to the DOM.
+      </p>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-explicit-initialization.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false,
+    explicitInitialization: true
+  };
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    // create a detached container element
+    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
+    grid = new Slick.Grid(myGrid, data, columns, options);
+
+
+    // ... later on, append the container to the DOM and initialize SlickGrid
+    myGrid.appendTo($("#myTable"));
+    grid.init();
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-header-row.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+    .slick-headerrow-column {
+      background: #87ceeb;
+      text-overflow: clip;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+
+    .slick-headerrow-column input {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Using a fixed header row to implement column-level filters</li>
+      <li>Type numbers in textboxes to filter grid data</li>
+    </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-header-row.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+  </div>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.dataview.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var dataView;
+  var grid;
+  var data = [];
+  var options = {
+    enableCellNavigation: true,
+    showHeaderRow: true,
+    headerRowHeight: 30,
+    explicitInitialization: true
+  };
+  var columns = [];
+  var columnFilters = {};
+
+  for (var i = 0; i < 10; i++) {
+    columns.push({
+      id: i,
+      name: String.fromCharCode("A".charCodeAt(0) + i),
+      field: i,
+      width: 60
+    });
+  }
+
+
+  function filter(item) {
+    for (var columnId in columnFilters) {
+      if (columnId !== undefined && columnFilters[columnId] !== "") {
+        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
+        if (item[c.field] != columnFilters[columnId]) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  $(function () {
+    for (var i = 0; i < 100; i++) {
+      var d = (data[i] = {});
+      d["id"] = i;
+      for (var j = 0; j < columns.length; j++) {
+        d[j] = Math.round(Math.random() * 10);
+      }
+    }
+
+    dataView = new Slick.Data.DataView();
+    grid = new Slick.Grid("#myGrid", dataView, columns, options);
+
+
+    dataView.onRowCountChanged.subscribe(function (e, args) {
+      grid.updateRowCount();
+      grid.render();
+    });
+
+    dataView.onRowsChanged.subscribe(function (e, args) {
+      grid.invalidateRows(args.rows);
+      grid.render();
+    });
+
+
+    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
+      var columnId = $(this).data("columnId");
+      if (columnId != null) {
+        columnFilters[columnId] = $.trim($(this).val());
+        dataView.refresh();
+      }
+    });
+
+    grid.onHeaderRowCellRendered.subscribe(function(e, args) {
+        $(args.node).empty();
+        $("<input type='text'>")
+           .data("columnId", args.column.id)
+           .val(columnFilters[args.column.id])
+           .appendTo(args.node);
+    });
+
+    grid.init();
+
+    dataView.beginUpdate();
+    dataView.setItems(data);
+    dataView.setFilter(filter);
+    dataView.endUpdate();
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-jquery-accordion.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: jQuery Accordion with a grid in each pane</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+  #myGrid01, #myGrid02 {
+	background: white;
+	outline: 0;
+	border: 1px solid gray;
+  }
+  </style>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+		<div id="accordion">
+		  <h3 id="acc_sect1"><a href="#">Section 1</a></h3>
+		  <div>
+			<div id="myGrid01" style="width:600px;height:300px;"></div>
+		  </div>
+		  <h3 id="acc_sect2"><a href="#">Section 2</a></h3>
+		  <div>
+			<div id="myGrid02" style="width:600px;height:300px;"></div>
+		  </div>
+		</div>
+	</td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>jQuery Accordion containing a grid in each pane</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid01, grid02;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"},
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false
+  };
+
+  function CreateData() {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+	return data;
+  }
+  
+  $(function () {
+    $( "#accordion" ).accordion(
+	// Workaround for IE 7-9 issue where div is blank after switching panels - need to destroy and recreate grid
+	//{
+	//	activate: function( event, ui ) {
+	//		var accHeaderId = '';
+	//		if (ui.newHeader && ui.newHeader.length>0) { accHeaderId = ui.newHeader[0].id; }
+	//		if (accHeaderId == 'acc_sect1') {
+	//			grid01.destroy();
+	//			grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
+	//		}
+	//	}
+	//}
+	);	
+
+    var data01 = CreateData();
+    grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
+
+    var data02 = CreateData();
+	// clone the columns and options so one grid doesn't affect the other
+	grid02 = new Slick.Grid("#myGrid02", data02, columns.slice(0), jQuery.extend({}, options));
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-multi-column-sort.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: Multi Column Sort</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:600px;height:500px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>basic grid with multi-column sort option</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-multi-column-sort.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    { id: "title", name: "Title", field: "title", sortable: true },
+    { id: "duration", name: "Duration", field: "duration", sortable: true, formatter: dayFormatter },
+    { id: "%", name: "% Complete", field: "percentComplete", sortable: true },
+    { id: "start", name: "Start", field: "start", formatter: dateFormatter, sortable: true },
+    { id: "finish", name: "Finish", field: "finish", formatter: dateFormatter, sortable: true },
+    { id: "effort-driven", name: "Effort Driven", field: "effortDriven", sortable: true }
+  ];
+
+  function dayFormatter(row, cell, value, columnDef, dataContext) {
+      return value + ' days';
+  }
+
+  function dateFormatter(row, cell, value, columnDef, dataContext) {
+      return value.getMonth() + '/' + value.getDate() + '/' + value.getFullYear();
+  }
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false,
+    multiColumnSort: true
+  };
+
+  $(function () {
+    var MS_PER_DAY = 24 * 60 * 60 * 1000;
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      var startDate = new Date(new Date("1/1/1980").getTime() + Math.round(Math.random() * 365 * 25) * MS_PER_DAY);
+      var endDate = new Date(startDate.getTime() + Math.round(Math.random() * 365) * MS_PER_DAY);
+      data[i] = {
+        title: "Task " + i,
+        duration: Math.round(Math.random() * 30) + 2,
+        percentComplete: Math.round(Math.random() * 100),
+        start: startDate,
+        finish: endDate,
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    grid.onSort.subscribe(function (e, args) {
+      var cols = args.sortCols;
+
+      data.sort(function (dataRow1, dataRow2) {
+        for (var i = 0, l = cols.length; i < l; i++) {
+          var field = cols[i].sortCol.field;
+          var sign = cols[i].sortAsc ? 1 : -1;
+          var value1 = dataRow1[field], value2 = dataRow2[field];
+          var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
+          if (result != 0) {
+            return result;
+          }
+        }
+        return 0;
+      });
+      grid.invalidate();
+      grid.render();
+    });
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-multi-grid-basic.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: Two Basic grids on page</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+  #myGrid01, #myGrid02 {
+	background: white;
+	outline: 0;
+	border: 1px solid gray;
+  }
+  </style>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid01" style="width:600px;height:300px;"></div>
+	  <br/>
+      <div id="myGrid02" style="width:600px;height:300px;"></div>
+	  </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>two basic grids with minimal configuration</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid01, grid02;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false
+  };
+
+  function CreateData() {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+	return data;
+  }
+  
+  $(function () {
+    var data01 = CreateData();
+    grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
+
+    var data02 = CreateData();
+    grid02 = new Slick.Grid("#myGrid02", data02, columns.slice(0), jQuery.extend({}, options));
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-optimizing-dataview.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example: Optimizing DataView</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="../controls/slick.pager.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+    .cell-title {
+      font-weight: bold;
+    }
+
+    .cell-effort-driven {
+      text-align: center;
+    }
+
+    .cell-selection {
+      border-right-color: silver;
+      border-right-style: solid;
+      background: #f5f5f5;
+      color: gray;
+      text-align: right;
+      font-size: 10px;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div class="grid-header" style="width:100%">
+      <label>SlickGrid</label>
+    </div>
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+    <div id="pager" style="width:100%;height:20px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <b>Search:</b>
+    <hr/>
+    <div style="padding:6px;">
+      <label style="width:200px;float:left">Show tasks with % at least: </label>
+
+      <div style="padding:2px;">
+        <div style="width:100px;display:inline-block;" id="pcSlider"></div>
+      </div>
+    </div>
+    <br/>
+
+    <p>
+      This page demonstrates various techniques for optimizing DataView performance
+      for large client-side datasets. This page displays an interactive grid with
+      500'000 rows with real-time filtering.<br/>
+      This is achieved by:
+    <ul>
+      <li>Inlining filter function to cut down on the cost of function calls.</li>
+      <li>Providing hints to indicate whether a filtering operation will result in
+        narrowing or expanding scope or whether the scope is unchanged.
+      </li>
+      <li>Providing a range of rows for which onRowsChanged even should be fired.</li>
+    </ul>
+    </p>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-optimizing-dataview.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+  </div>
+</div>
+
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.formatters.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="../slick.dataview.js"></script>
+<script src="../controls/slick.pager.js"></script>
+
+<script>
+  var dataView;
+  var grid;
+  var data = [];
+  var columns = [
+    {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
+    {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
+    {id: "start", name: "Start", field: "start", minWidth: 60},
+    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
+    {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
+  ];
+
+  var options = {
+    editable: false,
+    enableAddRow: false,
+    enableCellNavigation: true
+  };
+
+  var percentCompleteThreshold = 0;
+  var prevPercentCompleteThreshold = 0;
+  var h_runfilters = null;
+
+  function myFilter(item, args) {
+    return item["percentComplete"] >= args;
+  }
+
+  function DataItem(i) {
+    this.num = i;
+    this.id = "id_" + i;
+    this.percentComplete = Math.round(Math.random() * 100);
+    this.effortDriven = (i % 5 == 0);
+    this.start = "01/01/2009";
+    this.finish = "01/05/2009";
+    this.title = "Task " + i;
+    this.duration = "5 days";
+  }
+
+
+  $(function () {
+    // prepare the data
+    for (var i = 0; i < 500000; i++) {
+      data[i] = new DataItem(i);
+    }
+
+    dataView = new Slick.Data.DataView({ inlineFilters: true });
+    grid = new Slick.Grid("#myGrid", dataView, columns, options);
+    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
+
+    // wire up model events to drive the grid
+    dataView.onRowCountChanged.subscribe(function (e, args) {
+      grid.updateRowCount();
+      grid.render();
+    });
+
+    dataView.onRowsChanged.subscribe(function (e, args) {
+      grid.invalidateRows(args.rows);
+      grid.render();
+    });
+
+
+    // wire up the slider to apply the filter to the model
+    $("#pcSlider").slider({
+      "range": "min",
+      "slide": function (event, ui) {
+        if (percentCompleteThreshold != ui.value) {
+          window.clearTimeout(h_runfilters);
+          h_runfilters = window.setTimeout(filterAndUpdate, 10);
+          percentCompleteThreshold = ui.value;
+        }
+      }
+    });
+
+    function filterAndUpdate() {
+      var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold;
+      var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold;
+      var renderedRange = grid.getRenderedRange();
+
+      dataView.setFilterArgs(percentCompleteThreshold);
+      dataView.setRefreshHints({
+        ignoreDiffsBefore: renderedRange.top,
+        ignoreDiffsAfter: renderedRange.bottom + 1,
+        isFilterNarrowing: isNarrowing,
+        isFilterExpanding: isExpanding
+      });
+      dataView.refresh();
+
+      prevPercentCompleteThreshold = percentCompleteThreshold;
+    }
+
+    // initialize the model after all the events have been hooked up
+    dataView.beginUpdate();
+    dataView.setItems(data);
+    dataView.setFilter(myFilter);
+    dataView.setFilterArgs(0);
+    dataView.endUpdate();
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-plugin-headerbuttons.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <link rel="stylesheet" href="../plugins/slick.headerbuttons.css" type="text/css"/>
+  <style>
+    .icon-highlight-off,
+    .icon-highlight-on {
+      background-image: url(../images/bullet_blue.png);
+    }
+
+    .icon-highlight-off {
+      opacity: 0.2;
+    }
+
+    .negative-highlight {
+      background: red;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <p>
+      This example demonstrates using the <b>Slick.Plugins.HeaderButtons</b> plugin to easily add buttons to column
+      headers.  These buttons can be specified directly in the column definition, and are very easy to configure and use.
+    </p>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-plugin-headerbuttons.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+  </div>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="../plugins/slick.headerbuttons.js"></script>
+
+<script>
+  var grid;
+  var data = [];
+  var options = {
+    enableCellNavigation: true
+  };
+  var columns = [];
+  var columnsWithHighlightingById = {};
+
+
+  // Set up some test columns.
+  for (var i = 0; i < 10; i++) {
+    columns.push({
+      id: i,
+      name: String.fromCharCode("A".charCodeAt(0) + i),
+      field: i,
+      width: 90,
+      sortable: true,
+      formatter: highlightingFormatter,
+      header: {
+        buttons: [
+          {
+            cssClass: "icon-highlight-off",
+            command: "toggle-highlight",
+            tooltip: "Highlight negative numbers."
+          }
+        ]
+      }
+    });
+  }
+
+  // Set multiple buttons on the first column to demonstrate overflow.
+  columns[0].name = "Resize me!";
+  columns[0].header = {
+    buttons: [
+      {
+        image: "../images/tag_red.png"
+      },
+      {
+        image: "../images/comment_yellow.gif"
+      },
+      {
+        image: "../images/info.gif"
+      },
+      {
+        image: "../images/help.png"
+      }
+    ]
+  };
+
+  // Set a button on the second column to demonstrate hover.
+  columns[1].name = "Hover me!";
+  columns[1].header = {
+    buttons: [
+      {
+        image: "../images/help.png",
+        showOnHover: true,
+        tooltip: "This button only appears on hover.",
+        handler: function(e) {
+          alert('Help');
+        }
+      }
+    ]
+  };
+
+
+
+  // Set up some test data.
+  for (var i = 0; i < 100; i++) {
+    var d = (data[i] = {});
+    d["id"] = i;
+    for (var j = 0; j < columns.length; j++) {
+      d[j] = Math.round(Math.random() * 10) - 5;
+    }
+  }
+
+
+  function highlightingFormatter(row, cell, value, columnDef, dataContext) {
+    if (columnsWithHighlightingById[columnDef.id] && value < 0) {
+      return "<div style='color:red; font-weight:bold;'>" + value + "</div>";
+    } else {
+      return value;
+    }
+  }
+
+
+
+  $(function () {
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    var headerButtonsPlugin = new Slick.Plugins.HeaderButtons();
+
+    headerButtonsPlugin.onCommand.subscribe(function(e, args) {
+      var column = args.column;
+      var button = args.button;
+      var command = args.command;
+
+      if (command == "toggle-highlight") {
+        if (button.cssClass == "icon-highlight-on") {
+          delete columnsWithHighlightingById[column.id];
+          button.cssClass = "icon-highlight-off";
+          button.tooltip = "Highlight negative numbers."
+        } else {
+          columnsWithHighlightingById[column.id] = true;
+          button.cssClass = "icon-highlight-on";
+          button.tooltip = "Remove highlight."
+        }
+
+        grid.invalidate();
+      }
+    });
+
+    grid.registerPlugin(headerButtonsPlugin);
+  });
+</script>
+</body>
+</html>

SlickGrid/examples/example-plugin-headermenu.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="../plugins/slick.headermenu.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+    /**
+     * Style the drop-down menu here since the plugin stylesheet mostly contains structural CSS.
+     */
+
+    .slick-header-menu {
+      border: 1px solid #718BB7;
+      background: #f0f0f0;
+      padding: 2px;
+      -moz-box-shadow: 2px 2px 2px silver;
+      -webkit-box-shadow: 2px 2px 2px silver;
+      min-width: 100px;
+      z-index: 20;
+    }
+
+
+    .slick-header-menuitem {
+      padding: 2px 4px;
+      border: 1px solid transparent;
+      border-radius: 3px;
+    }
+
+    .slick-header-menuitem:hover {
+      border-color: silver;
+      background: white;
+    }
+
+    .slick-header-menuitem-disabled {
+      border-color: transparent !important;
+      background: inherit !important;
+    }
+
+    .icon-help {
+      background-image: url(../images/help.png);
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <p>
+      This example demonstrates using the <b>Slick.Plugins.HeaderMenu</b> plugin to add drop-down menus to column
+      headers.  (Hover over the headers.)
+    </p>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-plugin-headermenu.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+  </div>
+</div>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+<script src="../plugins/slick.headermenu.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  for (var i = 0; i < columns.length; i++) {
+    columns[i].header = {
+      menu: {
+        items: [
+          {
+            iconImage: "../images/sort-asc.gif",
+            title: "Sort Ascending",
+            command: "sort-asc"
+          },
+          {
+            iconImage: "../images/sort-desc.gif",
+            title: "Sort Descending",
+            command: "sort-desc"
+          },
+          {
+            title: "Hide Column",
+            command: "hide",
+            disabled: true,
+            tooltip: "Can't hide this column"
+          },
+          {
+            iconCssClass: "icon-help",
+            title: "Help",
+            command: "help"
+          }
+        ]
+      }
+    };
+  }
+
+
+  var options = {
+    enableColumnReorder: false
+  };
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    var headerMenuPlugin = new Slick.Plugins.HeaderMenu({});
+
+    headerMenuPlugin.onBeforeMenuShow.subscribe(function(e, args) {
+      var menu = args.menu;
+
+      // We can add or modify the menu here, or cancel it by returning false.
+      var i = menu.items.length;
+      menu.items.push({
+        title: "Menu item " + i,
+        command: "item" + i
+      });
+    });
+
+    headerMenuPlugin.onCommand.subscribe(function(e, args) {
+      alert("Command: " + args.command);
+    });
+
+    grid.registerPlugin(headerMenuPlugin);
+
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-spreadsheet.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example 3: Editing</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+    .slick-cell.copied {
+      background: blue;
+      background: rgba(0, 0, 255, 0.2);
+      -webkit-transition: 0.5s background;
+    }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Virtual scrolling on both rows and columns.</li>
+      <li>Select a range of cells with a mouse</li>
+      <li>Use Ctrl-C and Ctrl-V keyboard shortcuts to cut and paste cells</li>
+      <li>Use Esc to cancel a copy and paste operation</li>
+      <li>Edit the cell and select a cell range to paste the range</li>
+    </ul>
+      <h2>View Source:</h2>
+      <ul>
+          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-spreadsheet.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+      </ul>
+  </div>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../plugins/slick.autotooltips.js"></script>
+<script src="../plugins/slick.cellrangedecorator.js"></script>
+<script src="../plugins/slick.cellrangeselector.js"></script>
+<script src="../plugins/slick.cellcopymanager.js"></script>
+<script src="../plugins/slick.cellselectionmodel.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var data = [];
+  var options = {
+    editable: true,
+    enableAddRow: true,
+    enableCellNavigation: true,
+    asyncEditorLoading: false,
+    autoEdit: false
+  };
+
+  var columns = [
+    {
+      id: "selector",
+      name: "",
+      field: "num",
+      width: 30
+    }
+  ];
+
+  for (var i = 0; i < 100; i++) {
+    columns.push({
+      id: i,
+      name: String.fromCharCode("A".charCodeAt(0) + (i / 26) | 0) +
+            String.fromCharCode("A".charCodeAt(0) + (i % 26)),
+      field: i,
+      width: 60,
+      editor: FormulaEditor
+    });
+  }
+
+  /***
+   * A proof-of-concept cell editor with Excel-like range selection and insertion.
+   */
+  function FormulaEditor(args) {
+    var _self = this;
+    var _editor = new Slick.Editors.Text(args);
+    var _selector;
+
+    $.extend(this, _editor);
+
+    function init() {
+      // register a plugin to select a range and append it to the textbox
+      // since events are fired in reverse order (most recently added are executed first),
+      // this will override other plugins like moverows or selection model and will
+      // not require the grid to not be in the edit mode
+      _selector = new Slick.CellRangeSelector();
+      _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected);
+      args.grid.registerPlugin(_selector);
+    }
+
+    this.destroy = function () {
+      _selector.onCellRangeSelected.unsubscribe(_self.handleCellRangeSelected);
+      grid.unregisterPlugin(_selector);
+      _editor.destroy();
+    };
+
+    this.handleCellRangeSelected = function (e, args) {
+      _editor.setValue(
+          _editor.getValue() +
+              grid.getColumns()[args.range.fromCell].name +
+              args.range.fromRow +
+              ":" +
+              grid.getColumns()[args.range.toCell].name +
+              args.range.toRow
+      );
+    };
+
+
+    init();
+  }
+
+
+  $(function () {
+    for (var i = 0; i < 100; i++) {
+      var d = (data[i] = {});
+      d["num"] = i;
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+
+    grid.setSelectionModel(new Slick.CellSelectionModel());
+    grid.registerPlugin(new Slick.AutoTooltips());
+
+    // set keyboard focus on the grid
+    grid.getCanvasNode().focus();
+
+    var copyManager = new Slick.CellCopyManager();
+    grid.registerPlugin(copyManager);
+
+    copyManager.onPasteCells.subscribe(function (e, args) {
+      if (args.from.length !== 1 || args.to.length !== 1) {
+        throw "This implementation only supports single range copy and paste operations";
+      }
+
+      var from = args.from[0];
+      var to = args.to[0];
+      var val;
+      for (var i = 0; i <= from.toRow - from.fromRow; i++) {
+        for (var j = 0; j <= from.toCell - from.fromCell; j++) {
+          if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
+            val = data[from.fromRow + i][columns[from.fromCell + j].field];
+            data[to.fromRow + i][columns[to.fromCell + j].field] = val;
+            grid.invalidateRow(to.fromRow + i);
+          }
+        }
+      }
+      grid.render();
+    });
+
+    grid.onAddNewRow.subscribe(function (e, args) {
+      var item = args.item;
+      var column = args.column;
+      grid.invalidateRow(data.length);
+      data.push(item);
+      grid.updateRowCount();
+      grid.render();
+    });
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example-totals-via-data-provider.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+  <style>
+  .totals {
+    font-weight: bold;
+    color: gray;
+    font-style: italic;
+  }
+  </style>
+</head>
+<body>
+<div style="position:relative">
+  <div style="width:600px;">
+    <div id="myGrid" style="width:100%;height:500px;"></div>
+  </div>
+
+  <div class="options-panel">
+    <h2>Demonstrates:</h2>
+    <ul>
+      <li>Implementing a data provider to create a totals row at the end of the grid.</li>
+      <li>This is a simplification of what the DataView does. </li>
+    </ul>
+  </div>
+    <h2>View Source:</h2>
+    <ul>
+        <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-totals-via-data-provider.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+    </ul>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery-ui-1.11.3.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.editors.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var data = [];
+  var options = {
+    enableCellNavigation: true,
+    headerRowHeight: 30,
+    editable: true
+  };
+
+  var columns = [];
+  for (var i = 0; i < 10; i++) {
+    columns.push({
+      id: i,
+      name: String.fromCharCode("A".charCodeAt(0) + i),
+      field: i,
+      width: 60,
+      editor: Slick.Editors.Integer
+    });
+  }
+
+
+
+  function TotalsDataProvider(data, columns) {
+    var totals = {};
+    var totalsMetadata = {
+      // Style the totals row differently.
+      cssClasses: "totals",
+      columns: {}
+    };
+
+    // Make the totals not editable.
+    for (var i = 0; i < columns.length; i++) {
+      totalsMetadata.columns[i] = { editor: null };
+    }
+
+
+    this.getLength = function() {
+      return data.length + 1;
+    };
+
+    this.getItem = function(index) {
+      return (index < data.length) ? data[index] : totals;
+    };
+
+    this.updateTotals = function() {
+      var columnIdx = columns.length;
+      while (columnIdx--) {
+        var columnId = columns[columnIdx].id;
+        var total = 0;
+        var i = data.length;
+        while (i--) {
+          total += (parseInt(data[i][columnId], 10) || 0);
+        }
+        totals[columnId] = "Sum:  " + total;
+      }
+    };
+
+    this.getItemMetadata = function(index) {
+      return (index != data.length) ? null : totalsMetadata;
+    };
+
+    this.updateTotals();
+  }
+
+
+
+  $(function () {
+    for (var i = 0; i < 10; i++) {
+      var d = (data[i] = {});
+      d["id"] = i;
+      for (var j = 0; j < columns.length; j++) {
+        d[j] = Math.round(Math.random() * 10);
+      }
+    }
+
+    var dataProvider = new TotalsDataProvider(data, columns);
+
+    grid = new Slick.Grid("#myGrid", dataProvider, columns, options);
+
+    grid.onCellChange.subscribe(function(e, args) {
+      // The data has changed - recalculate the totals.
+      dataProvider.updateTotals();
+
+      // Rerender the totals row (last row).
+      grid.invalidateRow(dataProvider.getLength() - 1);
+      grid.render();
+    });
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/example1-simple.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+  <title>SlickGrid example 1: Basic grid</title>
+  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
+  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
+  <link rel="stylesheet" href="examples.css" type="text/css"/>
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid" style="width:600px;height:500px;"></div>
+    </td>
+    <td valign="top">
+      <h2>Demonstrates:</h2>
+      <ul>
+        <li>basic grid with minimal configuration</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="../lib/jquery-1.11.2.min.js"></script>
+<script src="../lib/jquery.event.drag-2.2.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+  var grid;
+  var columns = [
+    {id: "title", name: "Title", field: "title"},
+    {id: "duration", name: "Duration", field: "duration"},
+    {id: "%", name: "% Complete", field: "percentComplete"},
+    {id: "start", name: "Start", field: "start"},
+    {id: "finish", name: "Finish", field: "finish"},
+    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
+  ];
+
+  var options = {
+    enableCellNavigation: true,
+    enableColumnReorder: false
+  };
+
+  $(function () {
+    var data = [];
+    for (var i = 0; i < 500; i++) {
+      data[i] = {
+        title: "Task " + i,
+        duration: "5 days",
+        percentComplete: Math.round(Math.random() * 100),
+        start: "01/01/2009",
+        finish: "01/05/2009",
+        effortDriven: (i % 5 == 0)
+      };
+    }
+
+    grid = new Slick.Grid("#myGrid", data, columns, options);
+  })
+</script>
+</body>
+</html>

SlickGrid/examples/index.html

+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>SlickGrid Examples</title>
+  <style>
+    body {
+      font-family: Helvetica, arial, freesans, clean, sans-serif;
+      font-size: 15px;
+    }
+
+    a {
+      color: #4183c4;
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    li {
+      margin-bottom: 15px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Examples</h1>
+  <div>
+    <ul>
+      <li><a href="example1-simple.html">Basic use with minimal configuration</a></li>
+      <li><a href="example2-formatters.html">Adding some formatting</a></li>
+      <li><a href="example7-events.html">Handling events</a></li>
+      <li><a href="example14-highlighting.html">Highlighting and flashing cells</a></li>
+      <li><a href="example3-editing.html">Making it editable</a></li>
+      <li><a href="example3a-compound-editors.html">Writing compound editors</a></li>
+      <li><a href="example3b-editing-with-undo.html">Implementing Undo</a></li>
+      <li><a href="example-composite-editor-item-details.html">Using a CompositeEditor to implement detached item edit form</a></li>
+      <li>(most comprehensive) <a href="example4-model.html">Using a filtered data view to drive the grid</a></li>
+      <li><a href="example5-collapsing.html">Adding tree functionality (expand/collapse) to the grid</a></li>
+      <li><a href="example6-ajax-loading.html"><span class="caps">AJAX</span>-loading data with search</a></li>
+      <li><a href="example8-alternative-display.html">Using pre-compiled micro-templates to render cells</a></li>
+      <li><a href="example9-row-reordering.html">Row selection &amp; reordering</a></li>
+      <li><a href="example10-async-post-render.html">Using background post-rendering to add graphs</a></li>
+      <li><a href="example11-autoheight.html" title="autoHeight">No vertical scrolling</a></li>
+      <li><a href="example12-fillbrowser.html">Filling the whole window</a></li>
+      <li><a href="example13-getItem-sorting.html">Sorting by an index, getItem method</a></li>
+      <li><a href="example-header-row.html">Using fixed header row for quick filters</a></li>
+      <li><a href="example-checkbox-row-select.html">Plugin:  Checkbox row selectors with CheckboxSelectColumn plugin</a></li>
+      <li><a href="example-spreadsheet.html">Spreadsheet: cell range selection, copy’n’paste and Excel-style formula editor</a></li>
+      <li><a href="example-grouping.html">Interactive grouping and aggregates</a>.</li>
+      <li><a href="example-colspan.html">Colspan</a></li>
+      <li><a href="example-optimizing-dataview.html">Optimizing DataView for 500’000 rows</a></li>
+      <li><a href="example-explicit-initialization.html">Explicit initialization</a></li>
+      <li><a href="example-multi-column-sort.html">Multi-column sorting</a></li>
+      <li><a href="example-custom-column-value-extractor.html">Using dataItemColumnValueExtractor option to specify a custom column value extractor</a></li>
+      <li><a href="example-plugin-headerbuttons.html">Plugin: Column header buttons</a></li>
+      <li><a href="example-plugin-headermenu.html">Plugin: Column header menu</a></li>
+      <li><a href="example-autotooltips.html">Plugin: Auto tooltips</a></li>
+    </ul>
+  </div>
+</body>
+</html>