How to print a table with row grouping?

How to print a table with row grouping?

EmpownerEmpowner Posts: 2Questions: 2Answers: 0

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:

And i am using a Buttons Extension ( 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 LaubscherJan Laubscher Posts: 2Questions: 1Answers: 0

    I have exactly the same problem.

  • allanallan Posts: 56,203Questions: 1Answers: 8,902 Site admin

    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.


  • JPaulBJPaulB Posts: 3Questions: 0Answers: 0
    edited June 2016

    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,
            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
                    //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
                    //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
                        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'
  • allanallan Posts: 56,203Questions: 1Answers: 8,902 Site admin

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


  • JPaulBJPaulB Posts: 3Questions: 0Answers: 0

    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.


  • allanallan Posts: 56,203Questions: 1Answers: 8,902 Site admin

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


  • gps_indragps_indra Posts: 2Questions: 1Answers: 0

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

  • yardpenaltyyardpenalty Posts: 1Questions: 0Answers: 0

    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!

  • rushidrautrushidraut Posts: 3Questions: 1Answers: 0
    edited November 2017

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

This discussion has been closed.