title: Google table 100 comes before 10 and 8 comes at the end
body: <p>I use Google table. 
  When I sort it by number from 10 to 99 as seen in img 1, it orders nicely. </p>
  
  <p>--- IMG 1 ----</p>
  
  <p><a href="https://i.stack.imgur.com/50NSj.png" rel="nofollow"><img src="https://i.stack.imgur.com/50NSj.png" alt="enter image description here"></a></p>
  
  <p>But when I use one digit 1-9 or more than 100 it does not sort nicely as you can see in img 2.</p>
  
  <p>---- IMG 2 ----</p>
  
  <p><a href="https://i.stack.imgur.com/8Kbp1.png" rel="nofollow"><img src="https://i.stack.imgur.com/8Kbp1.png" alt="enter image description here"></a></p>
  
  <p>How can I fix the problem?</p>
  
  <p>I use the following code.</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  google.load('visualization', '1', {packages:['table']});
  google.setOnLoadCallback(drawTable);
  function drawTable() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'ID');
      data.addColumn('string', 'Name');
      data.addColumn('string', 'Image');
      data.addColumn('string', 'Image Size');
      data.addColumn('string', 'Order');
      data.addColumn('string', 'Status');
      data.addColumn('string', 'Actions');
      data.addRows([
  &lt;?php
  if (count($slideshow))
  {
      foreach($slideshow as $item)
      {
          $namelink = anchor("$module/admin/edit/".$item['id'],$item['name']);
          $subject = $item['image'];
          $imagename = getImageName($subject);
          $imagepath = getImagePath($subject);
          $filepath = base_url().$imagepath;
          $imagecont = "&lt;img width=\"70px\" src=\'".$filepath."\' /&gt;";
          $filesize = getimagesize($imagepath);
          $filesizecont = "width: ".$filesize[0]. "px&lt;br /&gt;height: ".$filesize[1]. "px";
          $item = str_replace("'", "\'", $item);
          /* $public_icon = ($item['public']==1 ? 'tick':'cross'); */
          /* $publiclink = anchor("kaimonokago/admin/changecatBooleanStatus/$module/".$item['id']."/public",$this-&gt;bep_assets-&gt;icon($public_icon), array('class' =&gt; $item['public']. ' changestatus')); */
          $active_icon = ($item['status']=='active'?'tick':'cross');
          $statuslink = anchor("kaimonokago/admin/changeStatus/$module/".$item['id'],$this-&gt;bep_assets-&gt;icon($active_icon), array('class' =&gt; $item['status']. ' changestatus'));
          $editlink = anchor($module.'/admin/edit/'.$item['id'],$this-&gt;bep_assets-&gt;icon('pencil'));
          if ($item['status']=='inactive')
          {
              $deletelink = anchor('kaimonokago/admin/delete/'.$module.'/'.$item['id'],$this-&gt;bep_assets-&gt;icon('delete'), array("class" =&gt; "delete_link","onclick"=&gt;"return confirmSubmit(\'".$item['name']."\')"));
          }
          else
          {
              $deletelink ='';
          }
          //$link = "testing";  
          echo "['".$item['id']."','".$namelink."','".$imagecont."','".$filesizecont."','".$item['slide_order']."','".$statuslink."','".$editlink.$deletelink."' ],\n";
      }
  }
  ?&gt;
  ]);
  
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {showRowNumber: true, allowHtml:true,width:'100%'});
  }
  &lt;/script&gt;
   &lt;div id='table_div'&gt;&lt;/div&gt;
  &lt;script&gt;
  $(window).resize(function(){
      drawTable();
  });
  &lt;/script&gt;
  </code></pre>