How to print a table with row grouping?

Empowner

Few days i was trying to achieve a dataTable print view with a row grouping but still its not going to work.. :(

I have a dataTable, where one column is hidden and that column is row grouped. Same as in this example: https://datatables.net/examples/advanced_init/row_grouping.html

And i am using a Buttons Extension (https://datatables.net/extensions/buttons/) for Print button. And when i hit the print button, i see all the columns of my dataTable even the one column shoud be hidden. Then i used an option "columns": ":visible", to print only visible columns, but it's again not good, because the grouped row is missing.

So does anyone know how to get the same table in Print view with row grouping as the original dataTable?

Jan Laubscher

I have exactly the same problem.

allan

I'm afraid the behaviour you are seeing at the moment is the expected behaviour (the grouping rows would not appear in the exported data).

The exported table is made up from the data in the original table, rather than the layout of the original table. You would need to use the customize option of the print export button to modify the resulting table to include groups in this case. This issue is something that I plan to address in future.

Allan

JPaulB

Hey guys,
I'm new to this forum so let me follow custom and say that DataTables is absolutely awesome!
I have been trying to get some grouped PDF export running and now I got it to work. It might help with the print option as well or you could use pdf instead of print.

Basically I applied the concept of the grouping in DataTables itself, to pdfmake.
This creates a Table with with a total of five columns. Rows are grouped based on the first two columns.

buttons: [
    { text:'PDF',
        extend: 'pdf',
        footer : true,
        header : true,
        orientation:'portrait',
        customize: function (doc) {
            var lastColX=null;
            var lastColY=null;
            var bod = []; // this will become our new body (an array of arrays(lines))
            //Loop over all lines in the table
            doc.content[1].table.body.forEach(function(line, i){
                //Group based on first column (ignore empty cells)
                if(lastColX != line[0].text && line[0].text != ''){
                    //Add line with group header
                    bod.push([{text:line[0].text, style:'tableHeader'},'','','','']);
                    //Update last
                    lastColX=line[0].text;
                }
                //Group based on second column (ignore empty cells) with different styling
                if(lastColY != line[1].text && line[1].text != ''){
                    //Add line with group header
                    bod.push(['',{text:line[1].text, style:'subheader'},'','','']);
                    //Update last
                    lastColY=line[1].text;
                }
                //Add line with data except grouped data
                if( i < doc.content[1].table.body.length-1){
                    bod.push(['','',{text:line[2].text, style:'defaultStyle'},
                                    {text:line[3].text, style:'defaultStyle'},
                                    {text:line[4].text, style:'defaultStyle'}]);    
                }
                //Make last line bold, blue and a bit larger
                else{
                    bod.push(['','',{text:line[2].text, style:'lastLine'},
                                {text:line[3].text, style:'lastLine'},
                                {text:line[4].text, style:'lastLine'}]);
                }
                
            });
            //Overwrite the old table body with the new one.
            doc.content[1].table.headerRows = 3;
            doc.content[1].table.widths = [50, 50, 150, 100, 100];
            doc.content[1].table.body = bod;
            doc.content[1].layout = 'lightHorizontalLines';
            
            doc.styles = {
                subheader: {
                    fontSize: 10,
                    bold: true,
                    color: 'black'
                },
                tableHeader: {
                    bold: true,
                    fontSize: 10.5,
                    color: 'black'
                },
                lastLine: {
                    bold: true,
                    fontSize: 11,
                    color: 'blue'
                },
                defaultStyle: {
                fontSize: 10,
                color: 'black'
                }
            }
        }
    }
]

allan

That's awesome - thanks for sharing your code with us!

Regards,
Allan

JPaulB

Sure thing,
I couldn't find much on the issue online so maybe this is going to help some folks.
Maybe we could also move it to either the grouping or the pdf customize example. I thought of that yesterday but wanted to avoid cross-posting it.

Paul

allan

Yup - I need to find a good way of allowing code snippets to be shared. That is something I'm working on :-)

Allan

gps_indra

hi,JPaulB can you more detail with sample,i can't to applied it.

yardpenalty

I am sooo excited to try this when I get back to work. This has been preventing me from using this to print using the exportOptions! We have a download page where you can retrieve all of our downloads but many of our user want to print instantaneously for our customers. I will keep you update with source and results.

Thank you soo much!

sciaschi

https://datatables.net/forums/discussion/42916/row-grouping-with-printing#latest

I was able to fix it

rushidraut

how to export group rows in datatable which contain row and column dynamically generated.