From 46e6749a06a8ec543c0ba4283e86f0b8d54f2a33 Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan.jardine@sprymedia.co.uk>
Date: Thu, 31 Aug 2017 14:39:03 +0100
Subject: [PATCH] Adding search pane plug-in. Completely unfinished, but its a
 start!

---
 .../dataTables.searchHighlight.min.js         |   4 +-
 features/searchPane/dataTables.searchPane.css |  88 +++
 features/searchPane/dataTables.searchPane.js  | 187 +++++++
 .../searchPane/dataTables.searchPane.min.css  |   1 +
 .../searchPane/dataTables.searchPane.min.js   |   5 +
 .../searchPane/dataTables.searchPane.scss     | 105 ++++
 features/searchPane/index.html                | 524 ++++++++++++++++++
 7 files changed, 912 insertions(+), 2 deletions(-)
 create mode 100644 features/searchPane/dataTables.searchPane.css
 create mode 100644 features/searchPane/dataTables.searchPane.js
 create mode 100644 features/searchPane/dataTables.searchPane.min.css
 create mode 100644 features/searchPane/dataTables.searchPane.min.js
 create mode 100644 features/searchPane/dataTables.searchPane.scss
 create mode 100644 features/searchPane/index.html

diff --git a/features/searchHighlight/dataTables.searchHighlight.min.js b/features/searchHighlight/dataTables.searchHighlight.min.js
index 3875871..bef7dda 100644
--- a/features/searchHighlight/dataTables.searchHighlight.min.js
+++ b/features/searchHighlight/dataTables.searchHighlight.min.js
@@ -2,5 +2,5 @@
  SearchHighlight for DataTables v1.0.1
  2014 SpryMedia Ltd - datatables.net/license
 */
-(function(h,g,b){function e(d,c){d.unhighlight();c.rows({filter:"applied"}).data().length&&d.highlight(b.trim(c.search()).split(/\s+/))}b(g).on("init.dt.dth",function(d,c){if("dt"===d.namespace){var a=new b.fn.dataTable.Api(c),f=b(a.table().body());if(b(a.table().node()).hasClass("searchHighlight")||c.oInit.searchHighlight||b.fn.dataTable.defaults.searchHighlight)a.on("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth",function(){e(f,a)}).on("destroy",function(){a.off("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth")}),
-a.search()&&e(f,a)}})})(window,document,jQuery);
+(function(h,g,a){function e(d,c){d.unhighlight();c.rows({filter:"applied"}).data().length&&(c.columns().every(function(){this.nodes().flatten().to$().unhighlight({className:"column_highlight"});this.nodes().flatten().to$().highlight(a.trim(this.search()).split(/\s+/),{className:"column_highlight"})}),d.highlight(a.trim(c.search()).split(/\s+/)))}a(g).on("init.dt.dth",function(d,c){if("dt"===d.namespace){var b=new a.fn.dataTable.Api(c),f=a(b.table().body());if(a(b.table().node()).hasClass("searchHighlight")||
+c.oInit.searchHighlight||a.fn.dataTable.defaults.searchHighlight)b.on("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth",function(){e(f,b)}).on("destroy",function(){b.off("draw.dt.dth column-visibility.dt.dth column-reorder.dt.dth")}),b.search()&&e(f,b)}})})(window,document,jQuery);
diff --git a/features/searchPane/dataTables.searchPane.css b/features/searchPane/dataTables.searchPane.css
new file mode 100644
index 0000000..574d0b0
--- /dev/null
+++ b/features/searchPane/dataTables.searchPane.css
@@ -0,0 +1,88 @@
+div.dt-searchPane {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: stretch;
+  height: 100%;
+  margin: 1em 0;
+}
+div.dt-searchPane div.pane {
+  position: relative;
+  flex: 1;
+  margin: 0 0.5%;
+  border: 1px solid #ccc;
+  /*width: 15.5%;
+  margin: 0 0.583333333%;*/
+}
+div.dt-searchPane div.pane button[type=button] {
+  display: none;
+}
+div.dt-searchPane div.pane.filtering button[type=button] {
+  display: block;
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  border: 1px solid #999;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  cursor: pointer;
+}
+div.dt-searchPane div.pane.filtering button[type=button]:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+div.dt-searchPane div.pane div.title {
+  box-sizing: border-box;
+  height: 30px;
+  padding: 0.35em;
+  font-size: 1.1em;
+  background-color: rgba(0, 0, 0, 0.075);
+  border-bottom: 1px solid #ddd;
+}
+div.dt-searchPane div.pane div.scroller {
+  position: absolute;
+  top: 30px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto;
+}
+div.dt-searchPane div.pane div.scroller ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+div.dt-searchPane div.pane div.scroller ul li {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+div.dt-searchPane div.pane div.scroller ul li:nth-child(odd) {
+  background: rgba(0, 0, 0, 0.03);
+}
+div.dt-searchPane div.pane div.scroller ul li.selected {
+  background: #3276b1;
+  color: white;
+}
+div.dt-searchPane div.pane div.scroller ul li span.label {
+  display: inline-block;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 85%;
+  vertical-align: middle;
+  padding: 0.2em 0.3em;
+}
+div.dt-searchPane div.pane div.scroller ul li span.count {
+  display: inline-block;
+  width: 14%;
+  margin-right: 1%;
+  font-size: 0.8em;
+  color: white;
+  text-align: center;
+  background-color: #3276b1;
+  border-radius: 3px;
+}
diff --git a/features/searchPane/dataTables.searchPane.js b/features/searchPane/dataTables.searchPane.js
new file mode 100644
index 0000000..fd5a464
--- /dev/null
+++ b/features/searchPane/dataTables.searchPane.js
@@ -0,0 +1,187 @@
+// TODO
+// - Tidy up class names
+// - Clean up code into functions
+// - Option to have vertical layout class
+// - Number of horizontal panels class options
+// - Threshold option - require that there is duplicate information in a column before it is used
+// - Styling for selected
+// - Styling for container / header
+// - Styling for clear option
+// - State saving integration
+
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		module.exports = function (root, $) {
+			if ( ! root ) {
+				root = window;
+			}
+
+			if ( ! $ || ! $.fn.dataTable ) {
+				$ = require('datatables.net')(root, $).$;
+			}
+
+			return factory( $, root, root.document );
+		};
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document, undefined ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+function SearchPanes ( settings, opts ) {
+	var that = this;
+	var table = new DataTable.Api( settings );
+	var container = $('<div class="dt-searchPane"/>')
+		.appendTo( opts.container );
+
+	table.columns(opts.columns).eq(0).each( function ( idx ) {
+		var column = table.column( idx );
+
+		var list = $('<ul/>');
+		var tags = $( column.header() ).hasClass('tags');
+		var bins = that._binData( column.data().flatten(), tags );
+
+		// On initialisation, do we need to set a filtering value from a
+		// saved state or init option?
+		var search = column.search();
+		search = search.length && search[0] ?
+			search[0].substr( 1, search[0].length-2 ).split('|') :
+			[];
+
+		var data = tags ?
+			table.ajax.json().tags :
+			column.data().unique().sort().toArray();
+
+		for ( var i=0, ien=data.length ; i<ien ; i++ ) {
+			if ( data[i] ) {
+				var li = $('<li/>')
+					.html( '<span class="label">'+data[i]+'</span>' )
+					.data( 'filter', data[i] )
+					.append( $('<span class="count" />').html( bins[ data[i] ] ) );
+
+				if ( $.inArray( data[i], search ) !== -1 ) {
+					li.addClass('selected');
+				}
+
+				list.append( li );
+			}
+		}
+
+		$(container).append(
+			$('<div class="pane"/>')
+				.data( 'column', idx )
+				.addClass( search.length ? 'filtering' : '' )
+				.append( '<button type="button" class="close">&times;</button>' )
+				.append( $('<div class="title"/>').html( $(column.header()).text() ) )
+				.append( $('<div class="scroller"/>').append( list ) )
+		);
+	} );
+
+	$(container).on( 'click', 'li', function () {
+		if ( $(this).hasClass( 'selected' ) ) {
+			$(this).removeClass( 'selected' );
+		}
+		else {
+			$(this).addClass( 'selected' );
+		}
+
+		var pane = $(this).closest('div.pane');
+		var filters = pane.find( 'li.selected' );
+
+		if ( filters.length === 0 ) {
+			pane.removeClass('filtering');
+			table
+				.column( pane.data('column') )
+				.search('')
+				.draw();
+		}
+		else {
+			pane.addClass('filtering');
+			table
+				.column( pane.data('column') )
+				.search( $.map( filters, function (filter) {
+					return $(filter).data('filter');
+				} ).join('|'), true, false )
+				.draw();
+		}
+	} );
+
+
+	$(container).on( 'click', 'button.close', function () {
+		var pane = $(this).closest('div.pane');
+		pane.find( 'li.selected' ).removeClass( 'selected' );
+		pane.removeClass('filtering');
+
+		table
+			.column( pane.data('column') )
+			.search('')
+			.draw();
+	} );
+}
+
+
+$.extend( SearchPanes.prototype, {
+	_binData: function ( data, tags ) {
+		var out = {};
+		var add = function ( d ) {
+			if ( ! out[ d ] ) {
+				out[ d ] = 1;
+			}
+			else {
+				out[ d ]++;
+			}
+		};
+
+		data.each( function (d) {
+			if ( ! d ) {
+				return;
+			}
+
+			if ( tags ) {
+				var a = d.split(',');
+				for ( var i=0, ien=a.length ; i<ien ; i++ ) {
+					add( a[i] );
+				}
+			}
+			else {
+				add( d );
+			}
+		} );
+
+		return out;
+	}
+} );
+
+
+
+$(document).on( 'init.dt', function (e, settings, json) {
+	if ( e.namespace !== 'dt' ) {
+		return;
+	}
+
+	var init = settings.oInit.searchPane;
+	var defaults = DataTable.defaults.searchPane;
+
+	if ( init || defaults ) {
+		var opts = $.extend( {}, init, defaults );
+
+		if ( init !== false ) {
+			new SearchPanes( settings, opts  );
+		}
+	}
+} );
+
+
+}));
diff --git a/features/searchPane/dataTables.searchPane.min.css b/features/searchPane/dataTables.searchPane.min.css
new file mode 100644
index 0000000..5205f2c
--- /dev/null
+++ b/features/searchPane/dataTables.searchPane.min.css
@@ -0,0 +1 @@
+div.dt-searchPane{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-content:flex-start;align-items:stretch;height:100%;margin:1em 0}div.dt-searchPane div.pane{position:relative;flex:1;margin:0 0.5%;border:1px solid #ccc}div.dt-searchPane div.pane button[type=button]{display:none}div.dt-searchPane div.pane.filtering button[type=button]{display:block;position:absolute;right:6px;top:6px;border:1px solid #999;background:rgba(0,0,0,0.1);border-radius:3px;cursor:pointer}div.dt-searchPane div.pane.filtering button[type=button]:hover{background:rgba(0,0,0,0.2)}div.dt-searchPane div.pane div.title{box-sizing:border-box;height:30px;padding:0.35em;font-size:1.1em;background-color:rgba(0,0,0,0.075);border-bottom:1px solid #ddd}div.dt-searchPane div.pane div.scroller{position:absolute;top:30px;bottom:0;left:0;right:0;overflow:auto}div.dt-searchPane div.pane div.scroller ul{list-style:none;margin:0;padding:0}div.dt-searchPane div.pane div.scroller ul li{position:relative;margin:0;padding:0;cursor:pointer}div.dt-searchPane div.pane div.scroller ul li:nth-child(odd){background:rgba(0,0,0,0.03)}div.dt-searchPane div.pane div.scroller ul li.selected{background:#3276b1;color:white}div.dt-searchPane div.pane div.scroller ul li span.label{display:inline-block;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:85%;vertical-align:middle;padding:0.2em 0.3em}div.dt-searchPane div.pane div.scroller ul li span.count{display:inline-block;width:14%;margin-right:1%;font-size:0.8em;color:white;text-align:center;background-color:#3276b1;border-radius:3px}
diff --git a/features/searchPane/dataTables.searchPane.min.js b/features/searchPane/dataTables.searchPane.min.js
new file mode 100644
index 0000000..e895289
--- /dev/null
+++ b/features/searchPane/dataTables.searchPane.min.js
@@ -0,0 +1,5 @@
+(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(c){return b(c,window,document)}):"object"===typeof exports?module.exports=function(c,a){c||(c=window);if(!a||!a.fn.dataTable)a=require("datatables.net")(c,a).$;return b(a,c,c.document)}:b(jQuery,window,document)})(function(b,c,a){function f(c,a){var j=this,d=new k.Api(c),g=b('<div class="dt-searchPane"/>').appendTo(a.container);d.columns(a.columns).eq(0).each(function(l){for(var e=d.column(l),c=b("<ul/>"),
+a=b(e.header()).hasClass("tags"),n=j._binData(e.data().flatten(),a),h=e.search(),h=h.length&&h[0]?h[0].substr(1,h[0].length-2).split("|"):[],a=a?d.ajax.json().tags:e.data().unique().sort().toArray(),i=0,m=a.length;i<m;i++)if(a[i]){var f=b("<li/>").html('<span class="label">'+a[i]+"</span>").data("filter",a[i]).append(b('<span class="count" />').html(n[a[i]]));-1!==b.inArray(a[i],h)&&f.addClass("selected");c.append(f)}b(g).append(b('<div class="pane"/>').data("column",l).addClass(h.length?"filtering":
+"").append('<button type="button" class="close">&times;</button>').append(b('<div class="title"/>').html(b(e.header()).text())).append(b('<div class="scroller"/>').append(c)))});b(g).on("click","li",function(){b(this).hasClass("selected")?b(this).removeClass("selected"):b(this).addClass("selected");var a=b(this).closest("div.pane"),c=a.find("li.selected");0===c.length?(a.removeClass("filtering"),d.column(a.data("column")).search("").draw()):(a.addClass("filtering"),d.column(a.data("column")).search(b.map(c,
+function(a){return b(a).data("filter")}).join("|"),!0,!1).draw())});b(g).on("click","button.close",function(){var a=b(this).closest("div.pane");a.find("li.selected").removeClass("selected");a.removeClass("filtering");d.column(a.data("column")).search("").draw()})}var k=b.fn.dataTable;b.extend(f.prototype,{_binData:function(a,b){var c={};a.each(function(a){if(a)if(b)for(var a=a.split(","),g=0,f=a.length;g<f;g++){var e=a[g];c[e]?c[e]++:c[e]=1}else c[a]?c[a]++:c[a]=1});return c}});b(a).on("init.dt",
+function(a,c){if("dt"===a.namespace){var j=c.oInit.searchPane,d=k.defaults.searchPane;if(j||d)d=b.extend({},j,d),!1!==j&&new f(c,d)}})});
diff --git a/features/searchPane/dataTables.searchPane.scss b/features/searchPane/dataTables.searchPane.scss
new file mode 100644
index 0000000..9afba78
--- /dev/null
+++ b/features/searchPane/dataTables.searchPane.scss
@@ -0,0 +1,105 @@
+
+div.dt-searchPane {
+	display:flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-around;
+	align-content: flex-start;
+	align-items: stretch;
+	height: 100%;
+	margin: 1em 0;
+
+	div.pane {
+		position: relative;
+		flex: 1;
+
+		margin: 0 0.5%;
+		border: 1px solid #ccc;
+		
+		/*width: 15.5%;
+		margin: 0 0.583333333%;*/
+
+		button[type=button] {
+			display: none;
+		}
+
+		&.filtering {
+			button[type=button] {
+				display: block;
+				position: absolute;
+				right: 6px;
+				top: 6px;
+				border: 1px solid #999;
+				background: rgba(0,0,0,0.1);
+				border-radius: 3px;
+				cursor: pointer;
+
+				&:hover {
+					background: rgba(0,0,0,0.2);
+				}
+			}
+		}
+
+		div.title {
+			box-sizing: border-box;
+			height: 30px;
+			padding: 0.35em;
+			font-size: 1.1em;
+			background-color: rgba(0,0,0,0.075);
+			border-bottom: 1px solid #ddd;
+		}
+
+		div.scroller {
+			position: absolute;
+			top: 30px;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			overflow: auto;
+
+			ul {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+
+				li {
+					position: relative;
+					margin: 0;
+					padding: 0;
+					cursor: pointer;
+
+					&:nth-child(odd) {
+						background: rgba(0,0,0,0.03);
+					}
+
+					&.selected {
+						background: #3276b1;
+						color: white;
+					}
+
+					span.label {
+						display: inline-block;
+						box-sizing: border-box;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						width: 85%;
+						vertical-align: middle;
+						padding: 0.2em 0.3em;
+					}
+
+					span.count {
+						display: inline-block;
+						width: 14%;
+						margin-right: 1%;
+						font-size: 0.8em;
+						color: white;
+						text-align: center;
+						background-color: #3276b1;
+						border-radius: 3px;
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/features/searchPane/index.html b/features/searchPane/index.html
new file mode 100644
index 0000000..b39818a
--- /dev/null
+++ b/features/searchPane/index.html
@@ -0,0 +1,524 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		
+		<title>DataTables search pane example</title>
+
+		<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
+		<link rel="stylesheet" type="text/css" href="dataTables.searchPane.css">
+		<style type="text/css">
+body {
+    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #333;
+    background-color: #fff;
+}
+		</style>
+
+		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
+		<script type="text/javascript" language="javascript" src="dataTables.searchPane.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(document).ready( function () {
+				$('#example').DataTable( {
+					searchPane: {
+						container: '#grouping',
+						columns: ':not(:last-child)'
+					}
+				} );
+			} );
+		</script>
+	</head>
+	<body>
+		<div class="container">
+			<p style="text-align:center">Space for banner etc</p>
+
+			<table id="example" class="display nowrap" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+			<div id="grouping" style="height: 200px;"/>
+			
+		</div>
+	</body>
+</html>
\ No newline at end of file