pdfmake

Merging 2 rows in pdfmake

I'd like to merge 2nd and 3rd rows so that I can view the 2 without any separation (like having 1 row with a content in the next line). I have below content that I want to print. If anyone can suggest a better structure of the content, it will be appreciated.

enter image description here

*In this image, I have 6 rows. 1st one is the header. 2nd to 5th rows are content of the table and last row is the totals. I want to merge 2nd with 3rd row (also 4th with 5th row).

var dd = { content: [ { "table": { "headerRows": 1, "dontBreakRows": true, "widths": [ 50, 100, 50 ], "body": [ [ { "text": "Header 1", "style": "tableHeader" }, { "text": "Header 2", "style": "tableHeader" }, { "text": "Header 3", "style": "tableHeader" } ], [ { "text": "ABC1", "margin": [ 0, 10 ] }, { "text": "Example Description1", "margin": [ 0, 10 ] }, { "text": "Example Description1a", "margin": [ 0, 10 ] } ], [ { "text": "Notes: ", "colSpan": 1 }, { "text": "Example text", "colSpan": 2 } ], [ { "text": "ABC2", "margin": [ 0, 10 ] }, { "text": "Example Description2", "margin": [ 0, 10 ] }, { "text": "Example Description2a", "margin": [ 0, 10 ] } ], [ { "text": "Notes: ", "colSpan": 1 }, { "text": "Example text", "colSpan": 2 } ] ] } } ] }
Solution

  • I was able to solve this by using the border property. They use different values in the property (2nd row is to remove the border below while 3rd row is to remove the top border).

    var dd = { content: [ { "table": { "headerRows": 1, "dontBreakRows": true, "widths": [ 50, 100, 50 ], "body": [ [ { "text": "Header 1", "style": "tableHeader" }, { "text": "Header 2", "style": "tableHeader" }, { "text": "Header 3", "style": "tableHeader" } ], [ { "text": "ABC1", "margin": [ 0, 10 ], border: [true, true, true, false] }, { "text": "Example Description1", "margin": [ 0, 10 ], border: [true, true, true, false] }, { "text": "Example Description1a", "margin": [ 0, 10 ], border: [true, true, true, false] } ], [ { "text": "Notes: Example text", "colSpan": 3, border: [true, false, true, true] } ], [ { "text": "ABC2", "margin": [ 0, 10 ] }, { "text": "Example Description2", "margin": [ 0, 10 ] }, { "text": "Example Description2a", "margin": [ 0, 10 ] } ], [ { "text": "Notes: Example text", "colSpan": 3 } ] ] } } ] };