Tabulator

by nethzor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/css/tabulator.min.css">
<style>
.tabulator-col-odd{
  background-color: #FFFFFF;
}
.tabulator-col-even{
  background-color: #E0E6EF;
color: #0A266D;
  font-weight: 700;
}

.tabulator-headers .tabulator-headers div[role="columnheader"]{
  background-color: black;
}

.tabulator .tabulator-header .tabulator-col{
  background-color: #006D9E;
  color: white;
  border-right: 1px solid #AFD0E0;
 
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{
  border-top: 1px solid #AFD0E0;
}

.tabulator .tabulator-header .sub-col-2 {
  color:#99C3D6;
  font-weight: 100;
}

.tabulator-row{
  border-bottom: 1px solid #151E3B;
}

#row-measured{
  border-bottom: none;
}

#row-total{
  border-bottom: 3px solid #042262; 
}



</style>


<div id="table">
</div>

JavaScript

var count = 0;



var columns = JSON.parse('[{"title":"Amandelbult Complex - Tumela Mine (100%)","field":"reef"},{"title":"Classification","field":"classification"},{"title":"Mineral Resources Million tonnes (Mt)","field":"mineralResourcesMillionTonnes","columns":[{"title":"2019","field":"mineralResourcesMillionTonnes_2019"},{"title":"2018","field":"mineralResourcesMillionTonnes_2018"}]},{"title":"Grade 4E g/t","field":"grade4E","columns":[{"title":"2019","field":"grade4E_2019"},{"title":"2018","field":"grade4E_2018"}]},{"title":"Contained metal 4E tonnes","field":"ContainedMetal4ETonnes","columns":[{"title":"2019","field":"ContainedMetal4ETonnes_2019"},{"title":"2018","field":"ContainedMetal4ETonnes_2018"}]},{"title":"Contained metal 4E Moz","field":"ContainedMetal4EMoz","columns":[{"title":"2019","field":"ContainedMetal4EMoz_2019"},{"title":"2018","field":"ContainedMetal4EMoz_2018"}]}]');



var tableData = JSON.parse ('[{"id":1,"reef":"Merensky Reef","classification":"Measured","mineralResourcesMillionTonnes_2019":24.9,"mineralResourcesMillionTonnes_2018":25.4,"grade4E_2019":6.81,"grade4E_2018":6.85,"ContainedMetal4ETonnes_2019":169,"ContainedMetal4ETonnes_2018":174,"ContainedMetal4EMoz_2019":5.4,"ContainedMetal4EMoz_2018":5.6},{"id":2,"reef":"Merensky Reef","classification":"Indicated","mineralResourcesMillionTonnes_2019":46.5,"mineralResourcesMillionTonnes_2018":46.9,"grade4E_2019":7.04,"grade4E_2018":7.05,"ContainedMetal4ETonnes_2019":327,"ContainedMetal4ETonnes_2018":331,"ContainedMetal4EMoz_2019":10.5,"ContainedMetal4EMoz_2018":10.6},{"id":3,"reef":"Merensky Reef","classification":"Measured and Indicated","mineralResourcesMillionTonnes_2019":71.4,"mineralResourcesMillionTonnes_2018":72.3,"grade4E_2019":6.96,"grade4E_2018":6.98,"ContainedMetal4ETonnes_2019":496,"ContainedMetal4ETonnes_2018":505,"ContainedMetal4EMoz_2019":16,"ContainedMetal4EMoz_2018":16.2},{"id":4,"reef":"Merensky...