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\' ,columnWidt

Answer 1

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

Answer 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)

Answer 3

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.

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