dc.js add dynamic columns

Question

I want to show value in datatable for that i have put line of code

// Bar chart For pricing
    var collectionRateValue = ndx.dimension(function (d) {
        return d3.time.month(d.dd);
    }); 

    var collectionRateValueGroup_adj = collectionRateValue.group().reduceSum(function(d) {
        return d.pay_amt;
    });
    var collectionRateValueGroup_payment = collectionRateValue.group().reduceSum(function(d) {
        return d.ar_balance;
    });
    var collectionRateValueGroup_ar_bal = collectionRateValue.group().reduceSum(function(d) {
        return d.charge_amt;
    });    
    var collectionRateValueGroup_payment_line = collectionRateValue.group().reduceSum(function(d) {
        return d.pay_amt;
    });

This is code for showing data

dc.dataTable("#dc-data-table")
    .dimension(collectionService)  
    .group(function (d) {
        return d3.time.format(d.month_year_dos);
    })
    .size(10)
    .columns([
        function (d){
            return d.month_year_dos;
        },
        function (d){
            return d.ar_balance;
        },
        function (d){
            return d.pay_amt;
        },
        function (d){
            return "d.date";
        },
    ])

This is how I want to show my data table.

Table header will come dynamically

I have find a lot but i didn't get how data will shown in row format?

Answer 1

It seems like you want to flip the rows of your table for columns. You will probably want to do that directly with D3.

The example at http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html should show to use D3 to render a table. you will want to adapt this to render in a different order however...

Start simple and try to render one of the rows in your table - perhaps the adjustments row - by appending a td for each value in the crossfilter group.