test:sortable-tables

<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load("visualization", "1", {packages:["table"]});
  google.setOnLoadCallback(drawTable);
  function drawTable() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
 
    data.addColumn('string', 'Web');
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Change');
    data.addColumn('boolean', 'Staff bonus');
 
    data.addRows(6);
 
    data.setCell(0, 0, '<a href="http://www.wikidot.com/" target="_parent">Wikidot.com</a>');
    data.setCell(0, 1, 'Electronics');
    data.setCell(0, 2, 31000, '€ 31 000.00');
    data.setCell(0, 3, -0.021, '-2.1%');
    data.setCell(0, 4, false);
 
    data.setCell(1, 0, '<a href="http://www.food.com/" target="_parent">http://www.food.com</a>');
    data.setCell(1, 1, 'Food');
    data.setCell(1, 2, 8000, '8 000.00');
    data.setCell(1, 3, 0.22, '22.0%');
    data.setCell(1, 4, true);
 
    data.setCell(2, 0, '');
    data.setCell(2, 1, 'Shoes');
    data.setCell(2, 2, 10000, '€ 10 000.00');
    data.setCell(2, 3, 0.12, '12.0%');
    data.setCell(2, 4, true);
 
    data.setCell(3, 0, '<a href="http://community.wikidot.com/start" target="_parent">Start</a>');
    data.setCell(3, 1, 'Shoes');
    data.setCell(3, 2, 22000, '22 000');
    data.setCell(3, 3, -0.073, '-7.3%');
    data.setCell(3, 4, false);
 
    data.setCell(4, 0, '');
    data.setCell(4, 1, 'Toys');
    data.setCell(4, 2, 4000, '€ 4 000.00');
    data.setCell(4, 3, 0, '0.0%');
    data.setCell(4, 4, false);
 
    data.setCell(5, 0, '');
    data.setCell(5, 1, 'Toys');
    data.setCell(5, 2, 3000, '€ 3 000.00');
    data.setCell(5, 3, 0.05, '5%');
    data.setCell(5, 4, false);
 
    // Create and draw the visualization.
    var table = new google.visualization.Table(document.getElementById('mytable_div'));
    table.draw(data, {allowHtml: true, showRowNumber: false, alternatingRowStyle: true});
  }
  </script>
 </head>
 
 <body>
  <div id="mytable_div"></div>
 </body>
</html>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License