Huge Data Table

[mictadlo]

Hello,
In case a Data Table contains a lot of data. Would it be possible that it automatically split the data on different pages? Similar like ebay does it with search results:

Page 1 of 20 | < Previous 1 2 3 4 5 6 7 Next > | Items per page 25 | 50 | 100 | 200

Thank you in advance.

[NickQiZhu]

Pagination will be nice indeed. Will put it in the backlog.

[neverfox]

How difficult would it be to use a third-party grid (e.g. Datatables, Slickgrid, handsontable) for the data table and still have it respond to the crossfiltering? Naively, I'm assuming that as long as the grid has access to the data object and can re-render its grid as needed, it should work. Is there a gotcha I'm not thinking of?

[NickQiZhu]

This might be possible as long as you take care of the rerender and redraw events. Have your object implement render() and redraw() methods then register it as a dc chart through dc.registerChart(). This way whenever dc renders your function will be invoked.

[pdaems]

Neverfox, were you able to use a third party grid like Datatables ? Currently developing a project for my internship and need to have the functionalities from datatables within my dc.js dashboard.

Thank you in advance.

[pdaems]

Nick,

Pagination would be very nice indeed and im willing to contribute i found some jquery pagination tool but i don't really know how to implement this in the library.
http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

I noticed that the entries shows the ammount of records based on the size.

       function nestEntries() {
           if (!_sort)
        _sort = crossfilter.quicksort.by(_sortBy);

        var entries = _chart.dimension().top(_size);

        return d3.nest()
        .key(_chart.group())
        .sortKeys(_order)
        .entries(_sort(entries, 0, entries.length));
      }

But is their a way to define a starting position for example:

     var entries = _chart.dimension().top(0,_size);

then it would give all records starting from the beginning to the _size.

Also i would like to thank you already for helping me out so much really appreciate it my project is going well :)

[NickQiZhu]

Unfortunately dimension top method in crossfilter does not allow you to set the offset. Have you tried rendering the entire table by setting the size to Infinite and then use something like JQuery datatable to enhance the table. Of course this will only work when your data set is small and you will need to reenhance the table everytime you change the filter if you want the table to be refreshed.

[jrideout]

We may want to address this with at the same time as issue #5 Data Table map interactive sorting.

[prakashbask]

First of all thanks for building this fantastic library. I started using dc.js recently for charts in my product that I am currently building at www.sentiks.com. I am trying to get around 3000 rows loaded in the dc.js datatable. However, it slows down the filters. I see there has been a request for enhancement for building a pagination feature. Is there any work in progress which I can use in near future?

[cihadturhan]

@kafechew is there any demo for currently developing one?

[cihadturhan]

Well, I subscribed already and clicked the link in the email. Now, how can I see grid?

[jpiper]

For those that are interested, it is possible to piggyback onto the jQuery dataTable plugin here for pagination.

On your dc.dataTable object(s), add these callbacks:

.on("postRender", function(chart){reinit(chart)}).on("postRedraw", function(chart){reinit(chart)});

to the following functions clears the datatables, and redraws it whenever a filter is applied

function reinit(chart)
{
    // Get the div id of the chart requesting to be DataTable'd
    var chart_anchor_id = '#' + chart.anchorName()
    // Destroy the current DataTable (if any)
    t = new $.fn.dataTable.Api($(chart_anchor_id))
    t.destroy()
    // Remove the 'group' as this won't work with DataTables
    $(chart_anchor_id + ' .dc-table-group').remove()
    // Reinit the jQuery dataTable
    $(chart_anchor_id).dataTable({bFilter: false});
};

Note: by default, dataTables will make a search box, but this will only filter the data in the table, and won't update the other crossfiltered samples, which could confuse users. To restore this behaviour, remove {bFilter: false}.

Tada! Free pagination and column sorting of your table :)

Note: This is rather hacky, and if your table is larger than a few hundred records it gets very laggy, so caveat emptor.

[strikeout]

"Unfortunately dimension top method in crossfilter does not allow you to set the offset. "

• why not use this:

  function nestEntries() {
      var offset=0;
      var entries = _chart.dimension().top(Infinity);
  
      entries.sort(function (a, b) {
          return _order(_sortBy(a), _sortBy(b));
      })
      entries = entries.slice(offset, _size)
  
      return d3.nest()
          .key(_chart.group())
          .sortKeys(_order)
          .entries(entries);
  }
  

[Arpanjainson]

How to remove .group from dc.datatable after removing it throws exception.
Mandatory attribute chart.group is missing on chart[#.dc-data-table]

[gordonwoodhull]

@Arpanjainson, I don't think anyone here is suggesting removing the crossfilter group from the chart object.

There is code above removing some "group" object from the DOM..? but that's unrelated.

[gordonwoodhull]

Porting the beginSlice, endSlice functionality from dataGrid so that we have basic (manual) pagination support.

Since the dataTable is only is supposed to support basic table support, I think this is almost enough. As noted above, it's still going to be slow if there is lots and lots of data, but there doesn't seem to be a way around it with crossfilter and usually slowness comes from the DOM rather than the data.

It might be nice to add basic UI support as well - I'll open a separate issue for that.

[gordonwoodhull]

Adding example http://dc-js.github.io/dc.js/examples/table-pagination.html