Jspdf-autotable: how to align specific column left

[akshaybhoendie]

Hi,

I made a datagrid table using your plugin and everything went well till now. The only thing i wanted to know is how to align data in column left? I want to align the description column left.

[simonbengtsson]

Use the columnStyles option. Usage can be found in examples/examples.js in the vertical headers example. If you have further questions, please post the code you are using as well.

[akshaybhoendie]

Hi,

thank you for helping me, here is the code i am using :

function createPDF() {
if(vm.activeCompanyYear){
var url = "/coci/report/registry/"+vm.activeCompanyYear;
DataApiService.callApi(url,null,"GET").then(function(reportData){
if(reportData){
var doc = new jsPDF('p', 'pt');
var row = 45;
addPdfHeader(doc, row, "");

    doc.printingHeaderRow = true;
    var columns = [ "Description",

vm.activeCompanyYear,vm.activeCompanyYear-1,
vm.activeCompanyYear-2,vm.activeCompanyYear-3,vm.activeCompanyYear-4,"%
t.o.v.'13" ];

    var rows = [];

    for(var j=0; j<reportData.length; j++){
    var obj = reportData[j];

    if (!obj.description ) {obj.description = '';}

    if (!obj.year5 ) {obj.year5 = '';}

    if (!obj.year4 ) {obj.year4 = '';}

    if (!obj.year3 ) {obj.year3 = '';}

    if (!obj.year2 ) {obj.year2 = '';}

    if (!obj.year1 ) {obj.year1 = '';}

    if (!obj.delta ) {obj.delta = '';}


    var singleRow =

[obj.description,obj.year5,obj.year4,obj.year3,obj.year2,obj.year1,obj.delta];
rows.push(singleRow);

    }

    doc.autoTable(columns, rows, {
    theme : 'grid',
    styles: {
           halign: 'right',
            },
    headerStyles: {
                fillColor: [33, 150, 243],
                halign:'center'
    },
    margin : {
    top : 100
    }

    });


    vm.isLoading = false;
    blockUI.stop();
    /* doc.save(); */
    vm.reportData = doc.output('datauristring');
    }
   });

}
}

On Tue, Jan 17, 2017 at 2:08 PM, Simon Bengtsson [e-mail]
wrote:

Use the columnStyles option. Usage can be found in examples/examples.js
in the vertical headers example. If you have further questions, please post
the code you are using as well.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/simonbengtsson/jsPDF-AutoTable/issues/225#issuecomment-273232320,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXZNwwMj8UmDLUULDQQHi22E7DI7D0BYks5rTPWDgaJpZM4Ll6Rq
.

--
MVG,

Akhsaykumar Bhoendie
Hannaslustweg #6
Wanica, Suriname
+(597)8549488

"It's hard enough to find an error in your code when you're looking for
it; it's even harder when you've assumed your code is error-free."

[simonbengtsson]

Did you try the the columnStyles?

[akshaybhoendie]

no i did not try that, i will try that and then , tell you how ti went? is
there a example of it?

On Tue, Jan 17, 2017 at 2:16 PM, Simon Bengtsson [e-mail]
wrote:

Did you try the the columnStyles?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/simonbengtsson/jsPDF-AutoTable/issues/225#issuecomment-273234618,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXZNwzoz-lifVt9PaRma1LzuDJ1LWIuSks5rTPdkgaJpZM4Ll6Rq
.

--
MVG,

Akhsaykumar Bhoendie
Hannaslustweg #6
Wanica, Suriname
+(597)8549488

"It's hard enough to find an error in your code when you're looking for
it; it's even harder when you've assumed your code is error-free."

[simonbengtsson]

Mentioned an example in my previous comment.

[akshaybhoendie]

I just tried the following code, but still didn't work or am i doing
something wrong?

function createPDF() {
if(vm.activeCompanyYear){
var url = "/coci/report/registry/"+vm.activeCompanyYear;
DataApiService.callApi(url,null,"GET").then(function(reportData){
if(reportData){
var doc = new jsPDF('p', 'pt');
var row = 45;
addPdfHeader(doc, row, "");

    doc.printingHeaderRow = true;
    var columns = [ "Description",

vm.activeCompanyYear,vm.activeCompanyYear-1,
vm.activeCompanyYear-2,vm.activeCompanyYear-3,vm.activeCompanyYear-4,"%
t.o.v.'13" ];

    var rows = [];

    for(var j=0; j<reportData.length; j++){
    var obj = reportData[j];

    if (!obj.description ) {obj.description = '';}

    if (!obj.year5 ) {obj.year5 = '';}

    if (!obj.year4 ) {obj.year4 = '';}

    if (!obj.year3 ) {obj.year3 = '';}

    if (!obj.year2 ) {obj.year2 = '';}

    if (!obj.year1 ) {obj.year1 = '';}

    if (!obj.delta ) {obj.delta = '';}


    /*TODO : Align data right in grid*/

    var singleRow =

[obj.description,obj.year5,obj.year4,obj.year3,obj.year2,obj.year1,obj.delta];
rows.push(singleRow);

    }

    doc.autoTable(columns, rows, {
    theme : 'grid',
    styles: {
           halign: 'right',
            },
    headerStyles: {
                fillColor: [33, 150, 243],
                halign:'center'
    },
    margin : {
    top : 100
    },
    columnStyles:{
    halign:'left'
    }

    });


    vm.isLoading = false;
    blockUI.stop();
    /* doc.save(); */
    vm.reportData = doc.output('datauristring');
    }
   });

}
}

On Tue, Jan 17, 2017 at 2:19 PM, Simon Bengtsson [e-mail]
wrote:

Mentioned an example in my previous comment.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/simonbengtsson/jsPDF-AutoTable/issues/225#issuecomment-273235456,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXZNwzn9RyD5KkbVrMbHSExuc6EI8m6bks5rTPgUgaJpZM4Ll6Rq
.

--
MVG,

Akhsaykumar Bhoendie
Hannaslustweg #6
Wanica, Suriname
+(597)8549488

"It's hard enough to find an error in your code when you're looking for
it; it's even harder when you've assumed your code is error-free."

[simonbengtsson]

You have to specify which column, in your case it would be:

columnStyles:{
        0: {halign:'left'}
}

[akshaybhoendie]

It works!!! Why did you use 0 ? i dont understand?

On Tue, Jan 17, 2017 at 2:26 PM, Simon Bengtsson [e-mail]
wrote:

You have to specify which column, in your case it would be:

columnStyles:{
0: {halign:'left'}
}

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/simonbengtsson/jsPDF-AutoTable/issues/225#issuecomment-273237561,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXZNw7BZ9nlz7D8u8AFhkDi8g432Wr8sks5rTPnPgaJpZM4Ll6Rq
.

--
MVG,

Akhsaykumar Bhoendie
Hannaslustweg #6
Wanica, Suriname
+(597)8549488

"It's hard enough to find an error in your code when you're looking for
it; it's even harder when you've assumed your code is error-free."

[simonbengtsson]

Sweet! When you specify columns without naming them with dataKey the index becomes the dataKey. Since description is the first column it therefore has the dataKey 0.

[akshaybhoendie]

oke, now i understand. Thank you friend!!

On Tue, Jan 17, 2017 at 2:30 PM, Simon Bengtsson [e-mail]
wrote:

When you specify columns without naming them with dataKey the index
becomes the dataKey. Since description is the first column it therefore has
the dataKey 0.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/simonbengtsson/jsPDF-AutoTable/issues/225#issuecomment-273238761,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXZNw-nSHeDhezAdQGq8AxPiBCoaui0Tks5rTPrKgaJpZM4Ll6Rq
.

--
MVG,

Akhsaykumar Bhoendie
Hannaslustweg #6
Wanica, Suriname
+(597)8549488

"It's hard enough to find an error in your code when you're looking for
it; it's even harder when you've assumed your code is error-free."

[spider292]

how to get left and top position of specific
line in pdf?

[viraj4422]

@simonbengtsson Is there a way I can make column header alignment different than column
body ?

[msschechter]

set a class on the header and do it with a hook ?On January 30, 2019 at 5:13 PM Viraj Nimbalkar [e-mail] wrote: @simonbengtsson Is there a way I can make column header alignment different than column body ?—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or mute the thread.

[dydokamil]

You have to specify which column, in your case it would be:

columnStyles:{
        0: {halign:'left'}
}

Is it possible to do the same with the footer? I tried

willDrawCell: (data) => {
  if (data.section === 'foot' && data.column.dataKey === 'amount') {
    data.cell.styles.halign = 'right';
  }
},

but it moves it even farther to the left

Edit: use didParseCell instead

[midhulms]

here currentRow is row which given in auto table

`var res1 = doc.autoTableHtmlToJson(document.getElementById(m));
var idmm=document.getElementById(n);

    var clength=res1.columns.length;
     var crow=res1.rows.length;

doc.autoTable(res1.columns, res1.data, {margin: {top: vy+25},pageBreak: 'auto',styles: {cellPadding: 1.5,fontSize:fsize , },fontStyle: 'bold',drawRow: function (row, data) {
currentRow1 = row;
currentRow1.height =30;

if((currentRow1.cells[0].text[0].includes('Total')) || (currentRow1.cells[0].text[0].includes('Avg'))||(currentRow1.cells[0].text[0].includes('count'))||(currentRow1.cells[0].text[0].includes('Min'))||(currentRow1.cells[0].text[0].includes('Max')))

{ 1 for(var i=0;i

                      currentRow1.cells[i].styles.fontStyle = "bold";
                      currentRow1.cells[i].styles.font = "sans-serif" ; 
                      currentRow1.cells[i].styles.fillColor = [243,205,204];                 
                      currentRow1.cells[1].styles.columnWidth="wrap";
                      currentRow1.cells[1].styles.FontSize=30;

                      }

}

},columnStyles: {0: {columnWidth: columnwidthrgroup},},});
got it
i just take all cell in that row thats easy