CODEWITHSUNDEEP
javascriptpdfmake
scorpio1441
scorpio1441

Reputation: 3088

pdfmake: Align table inside the column

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: output

Upvotes: 3

Views: 9687

Answers (3)

Nidhin Kumar
Nidhin Kumar

Reputation: 3579

Try to give like this:

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

Upvotes: 0

Kartal Erkoc
Kartal Erkoc

Reputation: 290

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

Upvotes: 1

AnuchitO
AnuchitO

Reputation: 11

How do you think about this idea?

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

Upvotes: 1

Related Questions