pdfmake: Align table inside the column

Question

No matter what I tried, I'm not able to align table inside of second column.

var docDefinition = {
    content: [
        {
            columns: [
                {   text: 'Column 1',
                },
                [
                    {
                        text: 'Column 2',
                        alignment: 'right' // WORKS
                    },
                    {
                        alignment: 'right', // NO EFFECT
                        table: {
                            alignment: 'right', // NO EFFECT
                            body: [
                                ['Date', '07/21/2017' ],
                                ['Representative', 'Test' ]
                            ]
                        }
                    }
                ]
            ]
        }
    ]
};

pdfMake.createPdf(docDefinition).download();

https://jsfiddle.net/8kqnrduw/

I'm looking for any possible workarounds.

Please help

Expected result:

score 1 · Answer 1 · edited Nov 16 '17 at 07:02

1

How do you think about this idea?

   {
      alignment: 'right',
      columns: [
        {
           stack: [
              { table: {....}}
           ]
        }
      ]
    }

edited Nov 16 '17 at 07:02

adiga

34,372
9
61
83

answered Nov 16 '17 at 06:25

AnuchitO

11
2

score 1 · Answer 2 · answered Dec 10 '17 at 01:53

Your problem is not related to alignment, it is about nested columns and column widths. Alignment in pdfmake is used for aligning texts, just like you used alignment for text: 'Column 2' and alignment for every text inside the table cells.

In your case, you created two columns with being '*' star-width (fills remaining width) each, which is the default column width. So, you have a 50% width column with text: 'Column 1' and 50% width column with text: 'Column 2' and a table (which is not exactly what you desire) below text: 'Column 2'.

So, what you should do is you need to create a nested columns structure within the section just below second column text: 'Column 2' which is already half width of the page. This nested columns structure will involve two columns; one for the table, having width exactly as wide as the elements inside the table, and another column with empty content just to keep the table away in its proper place.

The working code for your expected result is below. You may also see the screenshot here for the code and its output at the pfdmake playground.

var docDefinition = {
    content: [
        {
            columns: [
                {   
                    text: 'Column 1',
                },
                [
                    {
                        text: 'Column 2',
                        alignment: 'right' // Aligns 'Column 2' text to right
                    },
                    {
                        columns: [
                            {
                                text:'',
                                width: '*'
                            },
                            {
                                table: {
                                    body: [
                                        ['Date', '07/21/2017' ],
                                        ['Representative', 'Test' ]
                                    ]
                                }, 
                                alignment: 'right', // Optional, for body texts
                                width: 'auto' // Changes width of the table
                            }
                        ]
                    }
                ]
            ]
        }
    ]
}

score 0 · Answer 3 · answered Dec 26 '17 at 11:28

0

Try to give like this:

body: [
       [{text: 'Date', alignment: 'right'},  {text: '07/21/2017', alignment: 'right'}],
       [{text: 'Representative', alignment: 'right'}, {text: 'Test', alignment: 'right'}]
      ]

answered Dec 26 '17 at 11:28

Nidhin Kumar

3,278
9
40
72

pdfmake: Align table inside the column

3 Answers3