question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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. capture

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
PascalFurniturecommented, Jan 23, 2021

columnStyles: { 0: { halign: ‘left’}}

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

3reactions
simonbengtssoncommented, Jan 13, 2017

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

doc.autoTable(columns, rows, {
    theme : 'grid',
    styles: {
        halign: 'right'
    },
    margin : {
         top : 100
    }			
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

jsPDF autotable right align x position bug - Stack Overflow
When using "didParseCell" (v3.x) the right align positions the elements properly. ... You can align cells using the columnStyles property
Read more >
Box alignment in grid layout - CSS - MDN Web Docs
Another way to align items inside their area is to use auto margins. If you have ever centered your layout in the viewport,...
Read more >
jsPDF AutoTable example – Table to PDF - Phppot
It allows adding styles to the table columns with the columnStyles property. In the below example, it aligns the price column data to...
Read more >
To Align Text in Database Table Columns | AutoCAD 2020
Select one or more columns in the Data View window in which to align text. Right-click any column header. Click Align.
Read more >
Table Layouts - W3C
The next rules align the text of the header cells on their baseline and vertically ... The first column box may be either...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found