13

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

Bach
  • 6,145
  • 7
  • 36
  • 61
xav
  • 4,101
  • 5
  • 26
  • 32
  • I hoped all my problems were solved when I found this: http://www.kryogenix.org/code/browser/sorttable/ But it doesn't like dcjs that much... – xav Jan 14 '14 at 12:36

2 Answers2

22

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/

DJ Martin
  • 2,579
  • 20
  • 24
  • Thank you so much! It looks exactly like what I needed, will try it asap! – xav Jan 16 '14 at 12:19
  • 1
    One issue with this: if you reset all filters > dc.filterAll();dc.redrawAll(); RefreshTable() is executed many times and thus very slow. – stallingOne Mar 09 '15 at 17:23
  • 3
    That JSFiddle doesn't work, but here's a codepen with the example that does. http://codepen.io/chriscruz/pen/LEadNx – Chris Mar 29 '15 at 19:11
5

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();
});
Nathan Reese
  • 2,655
  • 6
  • 31
  • 34