Jspdf-autotable: Align text in the cells of autotable grid right (right align)

[akshaybhoendie]

Hi,

Is there a way to right align the the text in the cells of the autotable grid? I am new to javascript and i really like your plugin.

Above there is a screenshot of the autotable grid i have till now and i want to align the text right. How can i do that? Here is the function i wrote for it :

function createPDF() {

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



                    /* doc.addPage(); */
                    doc.setFillColor(33, 150, 243); 
                    doc.printingHeaderRow = true;
                    var columns = [ "Description", "2014", "2013", "2012","2011","2010","% t.o.v.'13" ];

                    var rows = [];

                    for(var j=0; j<reportData.length; j++){
                        var obj = reportData[j];
                        /* remove null*/
                        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',
                        margin : {
                            top : 100
                        }

                    });

[simonbengtsson]

Hey! Sure, simply add halign: 'right' to your styles like so:

doc.autoTable(columns, rows, {
    theme : 'grid',
    styles: {
        halign: 'right'
    },
    margin : {
         top : 100
    }           
});

[akshaybhoendie]

Hi,

Many thanks friend, although i have 2 more questions?

1. how can i change the header color of the grid?
2. How can i align 1 specific cell of the table?

On Fri, Jan 13, 2017 at 1:54 PM, Simon Bengtsson [e-mail]
wrote:

Hey! Sure, simply add halign: 'right' to your styles like so:

doc.autoTable(columns, rows, {
theme : 'grid',
styles: {
halign: 'right'
},
margin : {
top : 100
}
});

—
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/221#issuecomment-272487549,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXZNwzZgrirSpABWmzQA1sFEK4SNHTexks5rR6xUgaJpZM4Li3Ex
.

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

Check the readme for available styles and the custom styles example in the examples/examples.js on github for information about how to apply them. There is a fillColor style for background color and you can use headerStyles to only apply in the header. Use the createdCell hook to apply styles for specific cells.

[simonbengtsson]

If need further assistance, feel free to open a question on stackoverflow with the tag jspdf-autotable.

[ghost]

Hi,
How can I change a specific header cell alignment?

Many thanks.

[betsonserviceportal]

I'm trying it this way br7, but having a little difficulty.

  doc.autoTable(me.getColumns(), me.getData(), {
        theme: 'grid',
        startY: 32,
        styles: {
            cellPadding: 0.5,
            fontSize: 8
        },
        drawCell: function(cell, data) {
            if (data.column.dataKey === 'price' || data.column.dataKey === 'qty' || data.column.dataKey === 'price') {
                cell.styles.halign = 'right';
            }
        }
    });

[ravindragullapalli]

Hello it is given in the Read Me under Usage with options in the page https://github.com/simonbengtsson/jsPDF-AutoTable

There is an option columnStyles. I used it and it is working. Hope this helps.

[Coobers]

_header cell alignment_ is not affected by columnStyles.
How to modify halign of header for given cell?

options used on screenshot:
{ startY: 80, columnStyles: { id: {halign: "center",fontStyle:"bold",fillColor:40} }, headerStyles: { fillColor: false, textColor: 0, } }

[PascalFurniture]

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

To set the alignment of a specific column you need to specify its index value

[MayurGVarma]

Hi, Many thanks friend, although i have 2 more questions? 1. how can i change the header color of the grid? 2. How can i align 1 specific cell of the table?
…
On Fri, Jan 13, 2017 at 1:54 PM, Simon Bengtsson @.> wrote: Hey! Sure, simply add halign: 'right' to your styles like so: doc.autoTable(columns, rows, { theme : 'grid', styles: { halign: 'right' }, margin : { top : 100 } }); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#221 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AXZNwzZgrirSpABWmzQA1sFEK4SNHTexks5rR6xUgaJpZM4Li3Ex .
-- 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."*

[
{
content: 'DATA LOGGING REPORT',
colSpan: 8,
styles: { halign: 'center', fillColor: [22, 160, 133] },
},
],