Hide group rows of dc.dataTable

Question

I am using the JavaScript library dc.js to dynamically generate a table of records using the dc.dataTable(). The data is rather simple, so I actually want to show it as a plain list of rows without any grouping.

However, dc.dataTable() requires a .group() attribute. Each such group is then shown with an extra row in the resulting table before its data rows.

var datatable = dc.dataTable("#category-table");
    datatable
        .dimension(categoryDim)
        .group(function(d) {return "Categories";}) //just 1 static group, so it's only 1 unnecessary group label row at least
        .columns([
          function(d) { return d.category_name; },
          function(d) { return d.views;},
        ]);

If I skip the .group() part, I get

Mandatory attribute chart.group is missing on chart

Is there any way to hide these group label rows or skip the grouping altogether?

score 3 · Accepted Answer · answered Mar 30 '15 at 09:58

3

Hiding the table group rows is possible using css. These added rows have the css class dc-table-group and can therefore be hidden using some custom css:

.dc-table-group {
  visibility: collapse;
}

answered Mar 30 '15 at 09:58

sleidig

1,350
12
28

1

Nice. There is also a PR for this, but this is simpler. https://github.com/dc-js/dc.js/pull/863 – Gordon Mar 31 '15 at 14:44

score 0 · Answer 2 · answered Aug 21 '19 at 21:13

0

Update 2019:

As of version 3.0.12 you can hide the group (or section) header with .showGroups(false).

Docs: https://dc-js.github.io/dc.js/docs/html/dc.dataTable.html#showGroups__anchor

answered Aug 21 '19 at 21:13

RayB

2,096
3
24
42

Hide group rows of dc.dataTable

2 Answers2

Linked