Datatable

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

		    <div class="skt-dt-wrap" style="width:100%;overflow-x:auto;">
		        <div id="datatable_1"></div>
		    </div>
		    <script>
		    (function(){
		        window.sktDtTables = window.sktDtTables || [];

		        google.charts.load("current", {packages:["table"]});
		        google.charts.setOnLoadCallback(function(){

		            var el = document.getElementById("datatable_1");
		            if(!el){ return; }

		            var data = new google.visualization.DataTable();
		            var COLS = [{"label":"Name","type":"string"},{"label":"Age","type":"number"},{"label":"Date of Birth","type":"string"},{"label":"Mobile Number","type":"string"}];
		            COLS.forEach(function(c){ data.addColumn(c.type, c.label); });
		            data.addRows([["Rahul",28,"12-05-1997","9876543210"],["Priya",24,"03-11-2001","9123456789"],["Aman",31,"22-08-1994","9001234567"]]);

		            var table = new google.visualization.Table(el);

		            function draw(){
		                table.draw(data, {
		                    showRowNumber: false,
		                    width: "100%",
		                    height: "100%",
		                    allowHtml: true
		                });
		            }

		            draw();
		            window.sktDtTables.push(draw);

		            if(!window.sktDtResizeBound){
		                window.sktDtResizeBound = true;
		                var t;
		                window.addEventListener("resize", function(){
		                    clearTimeout(t);
		                    t = setTimeout(function(){ window.sktDtTables.forEach(function(fn){ fn(); }); }, 200);
		                });
		            }
		        });
		    })();
		    </script>

[skillwrapper type="skt_datatable" columns="Name|Age|Date of Birth|Mobile Number"]

[skill values="Rahul|28|12-05-1997|9876543210"]

[skill values="Priya|24|03-11-2001|9123456789"]

[skill values="Aman|31|22-08-1994|9001234567"]

[/skillwrapper]