Error using jsPDF cell table() method

[tmmsmoreira]

Hello,

First, I want to say, what an amazing framework!
I was testing it to implement in a current project that I am working on and I am having some issues creating tables on the document. Based on your documentation, I am doing everything correctly. Here is a piece of code so you can check the problem that I am having:

JS File

var data = [
  {
    coin: "100",
    game_group: "GameGroup",
    game_name: "XPTO1",
    game_version: "25",
    machine: "20485861",
    vlt: "0"
  },
  {
    coin: "100",
    game_group: "GameGroup",
    game_name: "XPTO2",
    game_version: "25",
    machine: "20485861",
    vlt: "0"
  }
];

var header = ["coin", "game_group", "game_name", "game_version", "machine", "vlt"]

function save() {
  var doc = new jsPDF()
  doc.text(20, 20, 'Hello world!')
  doc.table(1, 1, data, header)
  doc.save()
}

HTML File

<button onclick="save()">Save</button>

The error that I am having is this:

jspdf.min.js:29 Uncaught Error: Invalid arguments passed to jsPDF.rect
    at Object.l.__private__.rect.l.rect (jspdf.min.js:29)
    at Object._.cell (jspdf.min.js:88)
    at Object._.printHeaderRow (jspdf.min.js:88)
    at Object._.table (jspdf.min.js:88)
    at save (pen.js:25)
    at HTMLButtonElement.onclick (index.html?editors=1111:6)

Here is the codepen link so you can check the problem on your console:
https://codepen.io/anon/pen/EGQzNr

Thank you for your attention and support, and keep up the good work!

[viraj4422]

Try this:

  {
    coin: "100",
    game_group: "GameGroup",
    game_name: "XPTO1",
    game_version: "25",
    machine: "20485861",
    vlt: "0"
  },
  {
    coin: "100",
    game_group: "GameGroup",
    game_name: "XPTO2",
    game_version: "25",
    machine: "20485861",
    vlt: "0"
  }
];
var header = createHeaders(["coin", "game_group", "game_name", "game_version", "machine", "vlt"]);

function createHeaders(keys) {
    return keys.map(key => ({
      'name': key,
      'prompt': key,
      'width':65,
      'align':'center',
      'padding':0
    }));
}

function save() {
  var doc = new jsPDF()
  doc.text(20, 20, 'Hello world!')
  doc.table(1, 1, data, header)
  doc.save()
}

[tmmsmoreira]

Try this:

  {
    coin: "100",
    game_group: "GameGroup",
    game_name: "XPTO1",
    game_version: "25",
    machine: "20485861",
    vlt: "0"
  },
  {
    coin: "100",
    game_group: "GameGroup",
    game_name: "XPTO2",
    game_version: "25",
    machine: "20485861",
    vlt: "0"
  }
];
var header = createHeaders(["coin", "game_group", "game_name", "game_version", "machine", "vlt"]);

function createHeaders(keys) {
    return keys.map(key => ({
      'name': key,
      'prompt': key,
      'width':65,
      'align':'center',
      'padding':0
    }));
}

function save() {
  var doc = new jsPDF()
  doc.text(20, 20, 'Hello world!')
  doc.table(1, 1, data, header)
  doc.save()
}

Now it's working. Documentation is not very explicit about this point. Thank you so much @viraj4422

[Uzlopak]

I did not refactor cell.js till now. Try autoTable plugin as an alternative ;)

[viraj4422]

@arasabbasi There is also an issue regarding table header overlapping page header on page 2 onwards.

Page 2:

Is this a known bug ? Would you recommend going with auto-table ?

[lexcode]

@viraj4422 I am having same issue of table line overlapping on second page, have you found a solution, would you mind share it if you did, please?

Thanks

[Uzlopak]

Maybe you should use autotable plugin by @simonbengtsson

It is much more into table representation than jsPDF will be.

[Uzlopak]

@viraj4422
@lexcode
Yes, it was an annoying bug. Refactored cell.js #2412

Will be fixed in next release.

[stiofand]

This remains broken, and also the doc for the table() method suggests headers should be an array of strings, but the examples show an array of objects,

Feb 2021

[HackbrettXXX]

@stevematdavies this should have been fixed in #3087, but is not yet released on npm.