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

Answer 1

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();
});

Answer 2

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/