Is there a way to repeat the group key whenever page changes?

[kaumir]

Pdf make gives the awesome feature to make the table. There is a feature call header row that repeats the header on the next page. I added a row as a key for grouping. I want this key to repeat on the next page if that key continues.

so basically, say pdf is grouped by customer name. then every time a page changes, I would like to print Group header , meaning last customer name on beginning of the page. I remember Report tools such as SSRS or Crystal reports used to give this functionality. Trying to mimic same behavior here. but not been able to find anything in pdfmake for this.

example:

var dd = {
    content: [
    {text: 'Group Row to next page', style: 'subheader'},
        {
            style: 'tableExample',
            table: {
                headerRows: 1,
                body: [

                    [{text: 'Order Number', bold:true}, {text: 'Amount', bold:true}],
                    [{text: 'Customer Name: Customer 1', colSpan: 2, bold:true},{}],
                    ['Cust1 - 0', '1234'],
                    ['cust1 - 1', '1312'],
                    ['Cust1 - 2', '14123'],
                    ['Cust1 - 3', '14123'],
                    ['Cust1 - 4', '14123'],
                    ['Cust1 - 5', '14123'],
                    ['Cust1 - 6', '14123'],
                    ['Cust1 - 7', '14123'],
                    ['Cust1 - 8', '14123'],
                    ['Cust1 - 9', '14123'],
                    ['Cust1 - 10', '14123'],
                    ['Cust1 - 11', '14123'],
                    ['Cust1 - 12', '14123'],
                    ['Cust1 - 13', '14123'],
                    ['Cust1 - 14', '14123'],
                    ['Cust1 - 15', '14123'],
                    ['Cust1 - 16', '14123'],
                    ['Cust1 - 17', '14123'],
                    ['Cust1 - 18', '14123'],
                    ['Cust1 - 19', '14123'],
                    [{text: 'Customer Name: Customer 2', colSpan: 2, bold:true},{}],
                    ['Cust2 - 1', '14123'],
                    ['Cust2 - 2', '14123'],
                    ['Cust2 - 3', '14123'],
                    ['Cust2 - 4', '14123'],
                    ['Cust2 - 5', '14123'],
                    ['Cust2 - 6', '14123'],
                    ['Cust2 - 7', '14123'],
                    ['Cust2 - 8', '14123'],
                    ['Cust2 - 9', '14123'],
                    ['Cust2 - 10', '14123'],
                    ['Cust2 - 11', '14123'],
                    ['Cust2 - 12', '14123'],
                    ['Cust2 - 13', '14123'],
                    ['Cust2 - 14', '14123'],
                    ['Cust2 - 15', '14123'],
                    ['Cust2 - 16', '14123'],
                    ['Cust2 - 17', '14123'],
                    ['Cust2 - 18', '14123'],
                    ['Cust2 - 19', '14123'],
                    ['Cust2 - 20', '14123'],
                    ['Cust2 - 21', '14123'],
                    ['Cust2 - 22', '14123'],
                ]
            }
        },
    ],
    styles: {
        header: {
            fontSize: 18,
            bold: true,
            margin: [0, 0, 0, 10]
        },
        subheader: {
            fontSize: 16,
            bold: true,
            margin: [0, 10, 0, 5]
        },
        tableExample: {
            margin: [0, 5, 0, 15]
        },
        tableHeader: {
            bold: true,
            fontSize: 13,
            color: 'black'
        }
    },
    defaultStyle: {
        // alignment: 'justify'
    }

}

want Customer Name: Customer 2 should be repeated to the next page after the rowheader.

Any help would be highly appreciated. Thanks in advance

[suchislife801]

Anything that repeats on pages in PDFMake is generally added to Header or Footer of the document being generated.

// PDF Document Header

header: {
  columns: [
    {
      stack: [
        {
          text: 'left',
          // left, top, right, bottom
          margin: [41, 27, 0, 0],
          font: 'Helvetica',
          fontSize: 7.5,
          color: '#404040',
          normal: true,
          bold: true,
          italics: false,
          bolditalics: false
        }
      ],
      width: '*',
      style: 'text-left'
    },
    {
      stack: [
        {
          text: 'center',
          // left, top, right, bottom
          margin: [0, 27, 0, 0],
          font: 'Helvetica',
          fontSize: 7.5,
          color: '#404040',
          normal: true,
          bold: true,
          italics: false,
          bolditalics: false
        }
      ],
      width: '*',
      style: 'text-center'
    },
    {
      stack: [
        {
          text: 'right',
          // left, top, right, bottom
          margin: [0, 27, 41, 0],
          font: 'Helvetica',
          fontSize: 7.5,
          color: '#404040',
          normal: true,
          bold: true,
          italics: false,
          bolditalics: false
        }
      ],
      width: '*',
      style: 'text-right'
    }
  ]
},

[kaumir]

@suchislife801 Thanks for the reply. Our requirement is a little different. when the page changes, we want the group key to be displayed within detail rows, not in the header or footer. Let me explain. Please see below screenshot of sample pdf prepared using static data. Screenshot is of 2 pages. Report is grouped on customer name. There is not enough space to fit all rows of Customer 2 so it is printing the remaining rows on next page. Now, on the 2nd page, we want 'Customer name : Customer 2' to be repeated right after the main table header. , Not in the page header.

We have hard coded it in following example to show its correct location , circled in red. if we put this in page header then it will appear at the spot where Blue color cross mark is there but we do not want it there. Any ideas? Sample HTML to test this is also attached to try with pdfmake playground

Thanks very much in advance.

download.pdf

sample code to check on http://pdfmake.org/playground.html

// playground requires you to assign document definition to a variable called dd

var dd = {
     header:() => {
        return {alignment: 'center', text: "Repetative Header Here"}
    },
    content: [
    {text: 'Group Row to next page', style: 'subheader'},
        {
            style: 'tableExample',
            table: {
                headerRows: 1,
                body: [

                    [{text: 'Order Number', bold:true}, {text: 'Amount', bold:true}],
                    [{text: 'Customer Name: Customer 1', colSpan: 2, bold:true},{}],
                    ['Cust1 - 0', '1234'],
                    ['cust1 - 1', '1312'],
                    ['Cust1 - 2', '14123'],
                    ['Cust1 - 3', '14123'],
                    ['Cust1 - 4', '14123'],
                    ['Cust1 - 5', '14123'],
                    ['Cust1 - 6', '14123'],
                    ['Cust1 - 7', '14123'],
                    ['Cust1 - 8', '14123'],
                    ['Cust1 - 9', '14123'],
                    ['Cust1 - 10', '14123'],
                    ['Cust1 - 11', '14123'],
                    ['Cust1 - 12', '14123'],
                    ['Cust1 - 13', '14123'],
                    ['Cust1 - 14', '14123'],
                    ['Cust1 - 15', '14123'],
                    ['Cust1 - 16', '14123'],
                    ['Cust1 - 17', '14123'],
                    ['Cust1 - 18', '14123'],
                    ['Cust1 - 19', '14123'],
                    [{text: 'Customer Name: Customer 2 - repeat to next..', colSpan: 2, bold:true},{}],
                    ['Cust2 - 1', '14123'],
                    ['Cust2 - 2', '14123'],
                    ['Cust2 - 3', '14123'],
                    ['Cust2 - 4', '14123'],
                    ['Cust2 - 5', '14123'],
                    ['Cust2 - 6', '14123'],
                    ['Cust2 - 7', '14123'],
                    ['Cust2 - 8', '14123'],
                    ['Cust2 - 9', '14123'],
                    ['Cust2 - 10', '14123'],
                    ['Cust2 - 11', '14123'],
                    ['Cust2 - 12', '14123'],
                    ['Cust2 - 13', '14123'],
                    ['Cust2 - 14', '14123'],
                    [{text: 'Customer Name: Customer 2 - should repeat here..', colSpan: 2, bold:true},{}],
                    ['Cust2 - 15', '14123'],
                    ['Cust2 - 16', '14123'],
                    ['Cust2 - 17', '14123'],
                    ['Cust2 - 18', '14123'],
                    ['Cust2 - 19', '14123'],
                    ['Cust2 - 20', '14123'],
                    ['Cust2 - 21', '14123'],
                    ['Cust2 - 22', '14123'],
                ]
            }
        },
    ],
    styles: {
        header: {
            fontSize: 18,
            bold: true,
            margin: [0, 0, 0, 10]
        },
        subheader: {
            fontSize: 16,
            bold: true,
            margin: [0, 10, 0, 5]
        },
        tableExample: {
            margin: [0, 5, 0, 15]
        },
        tableHeader: {
            bold: true,
            fontSize: 13,
            color: 'black'
        }
    },
    defaultStyle: {
        // alignment: 'justify'
    }

}

[prashantnirgun]

I had another difficulties I can't make it 19th rows per page as with tables if the cell content is bigger height of the cell is get increased automatically in that case it may differ n no of rows per page. I can write same thing in header() but still not sure how many rows printed on previous page and where the page end comes.