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();

/

I'm looking for any possible workarounds.

Please help

Expected result:

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/8kqnrduw/

I'm looking for any possible workarounds.

Please help

Expected result:

• javascript
• pdfmake

Share Improve this question Follow asked Jul 23, 2017 at 22:08 scorpio1441scorpio1441 3,0881010 gold badges4141 silver badges7979 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

How do you think about this idea?

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

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
                            }
                        ]
                    }
                ]
            ]
        }
    ]
}

Try to give like this:

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