Jspdf-autotable: Colspan in First Row

[sirhcybe]

I am using version 3.1.1 and my table needs 4 columns but the first row of my form has only 2 columns so I need to use colspans in the first row. AutoTable doesn't seem to do colspans right if the first row doesn't have all the columns there will be. If my first row contains 4 blank cells, everything works fine but I get an unnecessary row on the top of my table. Here's some code that demonstrates the issue:

var doc = new jsPDF();
var desiredDefinition = [
  [{"content":"Field 1","colSpan":2}, {"content":"201901300654","colSpan":2}],
  [{"content":"Field 2"},{"content":"Field 3"},{"content":"Field 4"},{"content":"Field 5"}],
];
doc.autoTable({ body: desiredDefinition }); 

var workaroundDefinition = [
  [{"content":""},{"content":""},{"content":""},{"content":""}],
  [{"content":"Field 1","colSpan":2}, {"content":"201901300654","colSpan":2}],
  [{"content":"Field 2"},{"content":"Field 3"},{"content":"Field 4"},{"content":"Field 5"}],
];
doc.autoTable({ body: workaroundDefinition }); 
doc.save("table.pdf");

Here's a codepen with the issue: https://codepen.io/sirhcybe/pen/rgpKEJ

I played around with the columns property but couldn't find any way to tell AutoTable how many columns I need without creating an extra row.

[sirhcybe]

I'm taking a look into this. Looks like inputParser line 179 might be the place to put in a fix?

[sirhcybe]

@simonbengtsson Removing the cell.colSpan === 1 check from line 181 for inputParser makes the colSpans work but then the columns are autosized proportional to the length of the cells in the column. I actually want the columns to be sized evenly so I added a evenlySpacedColumns property to the settings and added this to the code to the widthCalculator distributeWidth method:

if (settings.evenlySpacedColumns) {
     column.width = (diffWidth + wrappedAutoColumnsWidth) / autoColumns.length;
} 

This got me where I want to be but is it a solution that you would accept for the library?
You can see the code I'm talking about in my fork: https://github.com/sirhcybe/jsPDF-AutoTable

[simonbengtsson]

Sounds great! But what do you think of adding it as an even option to the cellWidth style?

[sirhcybe]

So with the even option the table definition would look like this?

var desiredDefinition = [
  [{"content":"Field 1","colSpan":2,"styles":{"cellWidth":"even"}}, {"content":"201901300654","colSpan":2,"styles":{"cellWidth":"even"}}],
  [{"content":"Field 2"},{"content":"Field 3"},{"content":"Field 4"},{"content":"Field 5"}],
];

[shubhamyugtia001]

i have same problem how to set row span for 2 row

I have created a table for the same but how to center it on specific time??
@simonbengtsson

[shubhamyugtia001]

i have tried rowspan for the specific column but not getting the value

[simonbengtsson]

Fixed in v3.2