Different width for each columns in jspdf autotable?

Question

My table has 13 columns. How can I get different width for each column? Can I give each column width like this?

styles: {overflow: 'linebreak' ,columnWidth: [100,80,80,70,80,80,70,70,70,70,60,80,100]},

My table Syntax:

> var res = doc.autoTableHtmlToJson(document.getElementById(tableID)); 
> doc.autoTable(res.columns, res.data, {  styles: {overflow: 'linebreak'
> ,columnWidth: [100,80,80,70,80,80,70,70,70,70,60,80,100]},  startY:
> 60,  bodyStyles: {valign: 'top'},  });

Why do you need to specify the width of each column? Does the auto width calculation not work for your use case? — Simon Bengtsson, Aug 05 '16 at 13:20

Simon Bengtsson · Accepted Answer · 2020-04-09T10:24:46.597

55

You would have to transform your columnWidth array to look like this:

doc.autoTable({
  html: '#table',
  columnStyles: {
    0: {cellWidth: 100},
    1: {cellWidth: 80},
    2: {cellWidth: 80},
    // etc
  }
});

Note the use of columnStyles instead of styles.

edited Apr 09 '20 at 10:24

answered Aug 05 '16 at 13:19

Simon Bengtsson

7,573
3
58
87

Hi Simon, this is what I was looking for. Thank you ! – Abdu Rahiman Aug 12 '16 at 11:05
1

Just noticed an error in your code, it must be `columnStyles: { 0: {columnWidth: 60}, 1: {columnWidth: 40}, 2: {columnWidth: 100} // etc }` – Abdu Rahiman Aug 19 '16 at 06:21
Yes @Becky! It got resolved. Your code also works fine. – Abdu Rahiman Aug 19 '16 at 10:15
Hi sir,Its Useful for me.I want another Option.How to set column text align right??? – Raja Priyan Apr 28 '17 at 03:49
In the new version, columnWidth is deprecated, this necessary change to cellWidth. – Darlan Dieterich Jan 17 '20 at 11:09
I have a common logic for jspdf export as there are tons of pages where I need export functionality, then do I need to add columnstyles for each page ?? Can I not set the width dynamically ? – Krunal Shah Jul 08 '21 at 09:40

score 10 · Answer 2 · answered Aug 17 '17 at 11:22

In previous release (1.3.4) it could have done like below:

var columns = [
          {title: "Signum", dataKey: "signum"},
          {title: "Name", dataKey: "name"},
          {title: "Role", dataKey: "role"},
          {title: "Location", dataKey: "location"} 
          ]

But the latest one i.e. 2.3.2 requires the below format

doc.autoTable(colums,data,{
    addPageContent:pageContent,
    margin: {horizontal:5,top: 20},
    startY: 0.47*doc.internal.pageSize.height,
    styles: {overflow: 'linebreak'},
    columnStyles: {
     id: {columnWidth: 25}, 
     name:{columnWidth:40}, 
     role: {columnWidth: 15}, 
     location: {columnWidth: 30}
    }
  });

This will fix only id, name, role, and location to the specified limits. Rest other headers will be adjusted accordingly by autotable.js

In the new version, columnWidth is deprecated, this necessary change to cellWidth — Darlan Dieterich, Jan 17 '20 at 11:10

Beckham_Vinoth · Answer 3 · 2016-09-06T10:05:57.603

4

Let's say,[ steps,Methods,process,Delivers,Results ] are all my Table Headers.If i want to increase or decrease table width mean's ,

columnStyles: {
    steps: {columnWidth:215},
    Methods: {columnWidth: 60},
    process: {columnWidth: 100},
    Delivers: {columnWidth: 90},
    Result: {columnWidth: 90}
}

Here you can specify the each column width.

edited Sep 06 '16 at 10:05

answered Aug 18 '16 at 10:02

Beckham_Vinoth

701
2
13
39

In the new version, columnWidth is deprecated, this necessary change to cellWidth – Darlan Dieterich Jan 17 '20 at 11:10

score 2 · Answer 4 · answered Jan 22 '19 at 10:46

2

By default the 'columnsStyles' dont have in 'Options', that's necessary create it and next step you define the 'columnWidth'.

Options['columnStyles'] = {
  0: {columnWidth: 50},
  1: {columnWidth: 'auto'},
  2: {columnWidth: 'wrap'},
  3: {columnWidth: 150}
}
JSPDF.autoTable(columns, values, Options)

answered Jan 22 '19 at 10:46

Darlan Dieterich

2,369
1
27
37

1

In the new version, columnWidth is deprecated, this necessary change to cellWidth – Darlan Dieterich Jan 17 '20 at 11:10

Different width for each columns in jspdf autotable?

4 Answers4

Linked