Reorder datatable by column

Question

I was wondering if there is any known way to efficiently add a "Reorder" feature to my datatables in dc.js. It would be great if my users, after having done their selection with the charts, could decide according to which column the filtered rows should be ordered (by clicking on the column header for example).

Any ideas where to start?

Thanks a lot

Libb

I hoped all my problems were solved when I found this: kryogenix.org/code/browser/sorttable But it doesn't like dcjs that much... – Libb

Answer 1

I like to use JQuery datatables for this: http://datatables.net/

First add the table and the header row:

    <table id="dc-data-table" class="list table table-striped table-bordered">
        <thead>
            <tr>
              <th>Country</th>
              <th>Users</th>
            </tr>
        </thead>
    </table>

Next build your dimensions like normal:

    var ndx = crossfilter(data),
        countryDimension = ndx.dimension(function (d) {
            return d.country;
        }),

Then bind the jquery data table:

var datatable = $("#dc-data-table").dataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": false,
            "bDeferRender": true,
            "aaData": countryDimension.top(Infinity),
            "bDestroy": true,
            "aoColumns": [
                { "mData": "country", "sDefaultContent": ""},
                { "mData": "users", "sDefaultContent": " " }
            ]
        });

Finally, hook it into dc.js if you want the table to reflect the filters of your other charts:

        function RefreshTable() {
            dc.events.trigger(function () {
                alldata = countryDimension.top(Infinity);
                datatable.fnClearTable();
                datatable.fnAddData(alldata);
                datatable.fnDraw();
            });
        }

        for (var i = 0; i < dc.chartRegistry.list().length; i++) {
            var chartI = dc.chartRegistry.list()[i];
            chartI.on("filtered", RefreshTable);
        }

Here is a jsFiddle that demonstrates this: http://jsfiddle.net/djmartin_umich/d55My/

Dude

Thank you so much! It looks exactly like what I needed, will try it asap! – Libb

One issue with this: if you reset all filters > dc.filterAll();dc.redrawAll(); RefreshTable() is executed many times and thus very slow. – Accountancy

That JSFiddle doesn't work, but here's a codepen with the example that does. codepen.io/chriscruz/pen/LEadNx – Netsuke

Answer 2

Here is another table sorting method that only uses standard jQuery and dc.js

Define your table html with column headers.

<table id="data-table">
  <thead>
    <th class="data-table-col" data-col="a">Field A</th>
    <th class="data-table-col" data-col="b">Field B</th>
    <th class="data-table-col" data-col="c">Field C</th>
  </thead>
</table>

Setup the DC.js dataTable. The only important thing is the columns configuration. Use the format that does not dynamically create headers

var dataDim = xf.dimension(function(d) {return d.a;});
var dataTable = dc.dataTable("#data-table")
  .columns([
    function(d) {
      return d.a;
    },
    function(d) {
      return d.b;
    },
    function(d) {
      return d.c;
    }
  ]);

Then, just attach a click event handler to the column headers and use DC.js to sort the table. Edit - you must also change the dimension so that the sortBy sorts all data, not just displayed data

$('#data-table').on('click', '.data-table-col', function() {
  var column = $(this).attr("data-col");
  dataDim.dispose();
  dataDim = xf.dimension(function(d) {return d[column];});
  dataTable.dimension(dataDim)
  dataTable.sortBy(function(d) {
    return d[column];
  });
  dataTable.redraw();
});

Heather

A very nice and simple solution! +1 – Lulualaba