Sortable table with null values always last

19 views
Skip to first unread message

DJC

unread,
Jul 14, 2020, 1:21:43 PM7/14/20
to Google Visualization API
I had a quick and hopefully easy question. I have a sortable table that has some null values. Whether the user sorts the columns ascending or descending, I'd like the null values to be at the bottom. But it's treating the nulls as 0 for the purpose of sorting, and listing the nulls first when sorting ascending.

Here's what I have (and I'm completely new to this so if I've made any faux pas please let me know):

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Author');
        data.addColumn('string', 'Title');
        data.addColumn('number', 'Core<br>word<br>count');
        data.addColumn('number', 'Glossed<br>words');
        data.addColumn('number', 'Core +<br>glossed');
        data.addColumn('number', 'Proper<br>Nouns');
        data.addColumn('number', 'Total<br>Word<br>Count');
  


        data.addRows([

          ['Belzer','Lucia Heros',246,36,282,32,314],
['Belzer','Lucia Puella Mala*',79,21,100,3,103],
['Belzer & Pelegrin','Fortuna Fortibus Favet†',null,null,null,null,null],
['Berg','Romulus Rex',97,36,133,5,140],
['Buczek','Iter Mirabile Dennis et Debrae',211,15,226,17,243],
['Buczek','Itinera Liviae et Amicorum†',null,null,null,null,null],



    
        ]);

  data.setProperty(0, 3, 'style', 'width: 1%;');




        var table = new google.visualization.Table(document.getElementById('table_div'));


table.draw(data, {showRowNumber: true, width: '100%', height: '100%',allowHtml: true});
      }
    </script>
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
.post-sidebar {
    display: none;
}</style>
  </head>
  <body>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


    <div id="table_div"></div>
  </body>
</html>


Daniel LaLiberte

unread,
Jul 14, 2020, 2:21:45 PM7/14/20
to Google Visualization API
Hi DJC,

The Table chart sorting feature doesn't have any option for sorting nulls (or undefined, etc) always at the end, regardless of the sort direction.  That's an interesting idea, however, and I can see that it would be useful.   We'll consider it as a feature request.

Maybe the easiest workaround for you would be to handle the 'sort' event, get the sortedIndexes (via getSortInfo), change the order of the sortedIndexes, then set the rows of your DataTable (or probably better to use a DataView) to use that order, and redraw the table.  That's a lot, and you will end up without the sorted column icon as well, so this may not be worth your while.

We should probably allow for a custom sort function to be used instead, to support this feature and many others involving different sort orders.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f4426a71-1dab-43f8-b545-e535ee4eb630o%40googlegroups.com.


--
Reply all
Reply to author
Forward
0 new messages