CODEWITHSUNDEEP
htmlcordovapdfionic-framework
Nidhin Kumar
Nidhin Kumar

Reputation: 3589

How to align a column to right in a table in pdf make

I am using pdfmake to created pdf which is working fine I have used style to align the text to right which is also works fine but I would like to align one particular column in a table to be right aligned but it couldn't do it if I give the alignment it is taking for the entire table instead of single column can anyone tell me how to align a particular column to right in a table.

 var previousbillitems = invoice.Items.map(function (item) {
return [item.Date, item.Description, item.Amount];
});

{
        style: 'itemsTable',
        table: {
          widths: [75, '*', 75],
          body: [
            [
              { text: $translate.instant('{{"billdate_message" | translate}}'), style: 'itemsTableHeader' },
              { text: $translate.instant('{{"description_message" | translate}}'), style: 'itemsTableHeader' },
              { text: $translate.instant('{{"amount_message" | translate}}'), style: 'itemsTableHeader' },
            ]
          ].concat(previousbillitems)
        },
      },

Style for it:

itemsTable: {
        alignment: 'center',
        margin: [0, 5, 0, 15]
      },

Expected output is like:

Expected Output

Upvotes: 2

Views: 12921

Answers (2)

Matsuo Kodomo
Matsuo Kodomo

Reputation: 37

it work for me like this

   var previousbillitems = invoice.Items.map(function (item) {
return [
   {text: item.Date, style: 'cellCenter'},
   {text: item.Description, style: 'cellCenter'},
   {text: item.Amount, style: 'cellRight'},
  ];
});
 {
    style: 'itemsTable',
    table: {
      widths: [75, '*', 75],
      body: [
        [
          { text: $translate.instant('{{"billdate_message" | translate}}'), style: 'itemsTableHeader' },
          { text: $translate.instant('{{"description_message" | translate}}'), style: 'itemsTableHeader' },
          { text: $translate.instant('{{"amount_message" | translate}}'), style: 'itemsTableHeader' },
        ]
      ].concat(previousbillitems)
    },
  },

Styles

styles:{
    cellLeft: {
      //  fontSize: 13,
       // fillColor : 'gray',
        alignment : 'left'
      },
      cellCenter: {
        //fontSize: 13,
       // fillColor : 'gray',
        alignment : 'center'
      },
      cellRight: {
       // fontSize: 13,
       // fillColor : 'gray',
        alignment : 'right'
      }
}

Upvotes: 2

Nidhin Kumar
Nidhin Kumar

Reputation: 3589

By changing the code like this i got the solution to right align the data

 var previousbillitems = invoice.Items.map(function (item) {
return [
   {text: item.Date, alignment: 'center'},
   {text: item.Description, alignment: 'center'},
   {text: item.Amount, alignment: 'right'}
  ];
});
 {
    style: 'itemsTable',
    table: {
      widths: [75, '*', 75],
      body: [
        [
          { text: $translate.instant('{{"billdate_message" | translate}}'), style: 'itemsTableHeader' },
          { text: $translate.instant('{{"description_message" | translate}}'), style: 'itemsTableHeader' },
          { text: $translate.instant('{{"amount_message" | translate}}'), style: 'itemsTableHeader' },
        ]
      ].concat(previousbillitems)
    },
  },

Upvotes: 4

Related Questions