JSFiddle - React, Tailwind, and code Playground

by rishad

HTML

<div class="slide-out-div" style="width: 40%;">
  <a class="handle" href="#">Content</a>
  <div id='table_div'></div>
</div>

JavaScript

$(function(){
		$('.slide-out-div').tabSlideOut({
			tabHandle: '.handle',
			pathToTabImage: 'http://www.building58.com/examples/images/contact_tab.gif',
			imageHeight: '122px',
			imageWidth: '40px',   
			tabLocation: 'right',
			speed: 300,
			action: 'click',
			topPos: '200px',
			fixedPosition: false
		});
	});
	google.load('visualization', '1.30',{packages: [ 'table']});
	google.setOnLoadCallback(drawInstrumentTable);
	function drawInstrumentTable()
	{
		var instrumentList = new google.visualization.DataTable();
		instrumentList.addColumn('string','');
		instrumentList.addColumn('string', 'ID');
		instrumentList.addColumn('string', 'Instrument');
		instrumentList.addColumn('string', 'Location');
		instrumentList.addColumn('string', 'GPS');
		instrumentList.addRows([
			['<input type=\'button\' value=\'Select\' style=\'height: 22px;\'>','ABC1234','Sensor','Northwich','53.2667,-2.50000'],
			['<input type=\'button\' value=\'Select\' style=\'height: 22px;\'>','XYZ1234','Sensor','Perth','-31.9522,115.86140']
		]);
		var table = new google.visualization.Table(document.getElementById('table_div'));
		table.draw(instrumentList, {showRowNumber: false,width: '95%',
		allowHtml: true,page: 'enable', pageSize: 99});
	}