Customize Sorting column in Google Visualization Table
<p>I have successfully implemented a google visualization table and add customize sorting process just for one column by adding events listener.</p>

<p>Background : Data comes from the database to render the table. I have few table columns with 'Status' column. This column should sort according to another data field which isn't displaying the table.(All data comes from the database with one query. They all working well. ) In addListener I sort the array that I'm getting from the database according to my requirement and recreate the table by <code>table.draw(data, options);</code>. </p>

<pre><code>google.visualization.events.addListener(table, 'sort',
          function(event) {
        if(event.column ==  4){
        }
   }
} 
</code></pre>

<p><strong>The problem</strong> is now google visualization table always sort by second column during the load. If user selected any other column to sort table will sort according to the selected column. They all work as normal (Sorted column display by down arrow in table header). </p>

<p>But when I tried to sort by the field I added my own sorting process, earlier sorting not remove (I can see down arrow mark still at previous sorted table header) so sorting not work properly with added sorting code. How to prevent this issue.</p>

<p>If this isn't clear or need more information please let me know.  </p>

<p><strong>UPDATE: Explanation</strong> </p>

<p>Table draw from the array which is creating from the databse. this is the structure</p>

<pre><code>Array
(
    [0] =&gt; Array
        (
            [Field 1] =&gt; test 1
            [Field 2] =&gt;test 2
            [sortOrder] =&gt; 4
            [Field 3] =&gt; Array
                (
                    [key 1] =&gt; val 1
                    [Name] =&gt; test
                    [Date] =&gt; 2016-08-18 00:00:00
                    [warningLevel] =&gt; OK
                )

        )
....
....
...
</code></pre>

<p>From this array I use [Field 1], [Field 2]  and [warningLevel] field as table columns. But <code>[warningLevel]</code> <code>column should sort according to [sortOrder] field in array</code>.</p>

<p>So what I did, I add listener and inside it I rearrange(sort) the whole data array and recreate the table again. </p>

<pre><code> google.visualization.events.addListener(table, 'sort',
          function(event) {
          if(event.column ==  4){
vData.sort(function(a, b) {
                    var valueA, valueB;

                    valueA = a['sortOrder']; 
                    valueB = b['sortOrder'];
                    if (valueA &lt; valueB) {
                        return -1;
                    }
                    else if (valueA &gt; valueB) {
                        return 1;
                    }
                    return 0;
                });
table.draw(vdata, options);

}
  });
</code></pre>

<p>All the other table column should sort as the normal way (When user sort one column it is sorting and if he moves to sort another column earlier sorting disregard and sort the newly selected column. Sorted column header has arrow icon ) and they are working fine. The problem is when I tried to sort the Status column last sorted column still use it's sorting.Also the arrow in header still displaying in earlier sorted column. So this column sorting not working as expect. </p>

<p>Any help would be appreciated.  </p>