pdt6

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<title></title>

	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
	<link href="ntable_style.css" rel="stylesheet" type="text/css" />

	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

	<!--SEMANTIC UI CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" type="text/css" />

    <link href="https://cdn.datatables.net/1.10.15/css/dataTables.semanticui.min.css" rel="stylesheet" type="text/css" />

    <link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.semanticui.min.css" rel="stylesheet" type="text/css" />

         

	<style type="text/css">
		html {
			-webkit-text-size-adjust: none;
		}

		
		h1 {
			margin: 0 0 6px 0;
			font-size: 20px;
			color: black;
		}

		h2 {
			font-weight: normal;
			color: #666;
			font-size: 14px;
			margin: 0 0 22px 0;
		}

		.footnotes {
			margin-bottom: 20px;
		}

		.footnotes h4 {
			margin: 2px 0 7px 0;
			color: #666;
			font-size: 11px;
		}

		.footnotes p,
		.footer p {
			margin: 2px 0 0 0;
			font-size: 11px;
			line-height: 1.3;
			color: #808080;
		}

		a,
		a:link,
		a:visited {
			color: #4774CC;
			text-decoration: none;
		}

		a:hover,
		a:active {
			opacity: 0.7;
		}
		/*custom styles*/
    table {
      width: 100%;
    }
		table,
		th {
			text-align: center;
		}
		/*make odd rows lightblue*/

		.table-striped > tbody > tr:nth-child(odd) > td {
			background-color: #f4f7ff;
		}
	</style>
</head>

<body>
	<div class="row">
		<div...

CSS

/*fit search boxes within columns*/
thead input { width: 100%; }

/*vertically aligns column text to top*/
table.dataTable tbody td { vertical-align: top; }

/*aligns and directs text in select columns, sets fonts*/
.dataTable tbody td.col_1 {
    text-align: left; 
    direction: ltr; }
.dataTable tbody td.col_2 {
    text-align: center; }
.dataTable tbody td.col_3 {
    text-align: right;
    direction: ltr;
}

/*top and botton margin spacing between cells*/
.dataTable td { 
    margin: 15px 0;}

JavaScript

//google sheets key

var key =

"https://docs.google.com/spreadsheets/d/113QZOTS9JQ1WGfwjwQrOpErUBJTAnaBmdjP0_OjA53c/pubhtml?gid=489792061&single=true";

//"data" refers to the sheets column name, no spaces,capitals, punctuation, numbers
//"title" is rendered column header text

var columns = [{
 "data": "company",
  "title": "Company"
}, {
  "data": "violations",
  "title": "Claims"
}, {
  "data": "total-award",
  "title": "Total Awarded"
}];

$(document).ready(function() {

  function initializeTabletopObject() {
    Tabletop.init({
      key: key,
      callback: function(data, tabletop) {
          //call up datatables function
          writeTable(data); },
      simpleSheet: true,
       debug: false
                 });
  }

  initializeTabletopObject();

  function writeTable(data) {
    
    //select main div and insert table into html
     $('#ntable_insert').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="ui very basic small striped table table-condensed table-responsive" id="mySelection"></table>'
    ); //End of table insert
      
     // Add header to table
 $("#mySelection").append('<thead><tr><th>Company</th><th>Claims</th><th>Total Awarded</th></tr><tr><th>Company</th><th>Claims</th><th>Total Awarded</th></tr></thead>'); //End of add header



    //initialize the DataTable object and put settings in
     table=$("#mySelection").DataTable({

      "orderCellsTop": true, //Moves the sorting icons to the first header row
      "mark": true,
      "autoWidth": false,
      "data": data,
      "columns": columns,
      "order": [[0, "asc"]], //display order on column
      "pagingType": "simple",
      "lengthMenu": [ 10, 2, 3, 5, 100 ], //display range of pages
      "columnDefs": [ { className: "col_1", "targets": [0] },
                      { className: "col_2", "targets": [1] },
                      { className: "col_3", "targets": [2] } ], //select columns to css aligns
      "language": {"search": "Search globally  "},
...