jsPDF-AutoTable icon indicating copy to clipboard operation
jsPDF-AutoTable copied to clipboard

minCellWidth is not respected when using colspan other than 1

Open Nervniyak opened this issue 5 years ago • 13 comments

Here's my example, I need an explanation of this behavior and possible solution. image

The layout consists of 6 logical columns (but because there is not enough data the last visual column took all remaining ones using colspan, for example Multi File Upload has colspan of 3 and A or B Single took a colspan of 2)

The whole table has width of 190, every visual column has minCellWidth of 22.62, except for Multi Image which was set to 67.5.

Multi Image

          const paramCell: CellDef = {
            colSpan: 2,
            styles: { minCellWidth: 67.5, cellPadding: 1.76},
          };

The issue is, it didn't get it's 67.5 but gets 62.1284178912133 for some unintuitive reason. Even when I try to set it manually in didParseCell or willDrawCell it still is being rendered with less width and image gets cut.

   const cellWidth = data.cell.width;
   const minCellWidth = (data.cell.raw as CellDef).styles.minCellWidth;
   data.cell.width = cellWidth < minCellWidth ? minCellWidth : cellWidth;

I don't understand why doesn't it get it's desired width!? 190 - 22.62 * 5= 76.9, which is higher than 67.5, meaning that there's still some space left after giving every visual column it's desired minCellWidth And why setting width manually also doesn't work...

My suspicions are that next rows somehow override values, making previous rows to recalculate stuff wrong.

P.S. If I set colspan of Multi Images to 1, the minCellWidth is respected (but the whole layout gets logically broken)

Nervniyak avatar Jun 26 '20 17:06 Nervniyak

Everything gets even worse if I reduce minCellWidth of every visual column except for Multi image for example 13.2, it should've allowed more dynamic space to be filled fluidly, but instead ruined image cell even more... image

Nervniyak avatar Jun 26 '20 17:06 Nervniyak

The only workaround I found is to grab extra column, in this case Multi image has colspan of 3, which wastes a lot of useful space. In this case Multi image gets cellWidth of 110.97 when minCellWidth was set to the same 67.5

image

I really want to use adequate cell size, instead of this workaround, please help!

Nervniyak avatar Jun 26 '20 17:06 Nervniyak

This issue has been automatically closed since the issues in this project are mainly used for bugs and feature requests. Questions are directed to stackoverflow.

stale[bot] avatar Jul 04 '20 20:07 stale[bot]

Please, this is crucial. It wastes a lot of space and is bug prone

Nervniyak avatar Jul 06 '20 10:07 Nervniyak

@simonbengtsson this bug is really critical, it destroys even the most simple layout. Here's really clear example:

    const doc = new jsPDF();

    const body: CellDef[][] = [];
    const head: CellDef[][] = [];

    head.push([
      {
        content: `Header`,
        colSpan: 4,
      }]);

    body.push([{
      content: 'A',
      colSpan: 2,
      styles: { minCellWidth: 55 },
    },
    {
      content: 'B',
      colSpan: 2,
      styles: { minCellWidth: 35 },
    }
    ]);

    autoTable(doc, {
      head: head,
      body: body,
    });

    doc.save('test.pdf');

Result: image

colspan is completely unusable with minCellWidth, it is not respected at all, is there any workaround you can imagine?

Even setting columnStyle doesn't help at all

autoTable(doc, {
      head: head,
      body: body,
      columnStyles: {
        0: { minCellWidth: 55 },
        1: { minCellWidth: 55 },
        2: { minCellWidth: 55 },
        3: { minCellWidth: 55 },
      },
    });

Nervniyak avatar Jul 29 '20 15:07 Nervniyak

@simonbengtsson is it just not implemented? image

Nervniyak avatar Aug 04 '20 20:08 Nervniyak

Oh, right. If I remember correctly I didn't find a good way to do it It at the time.

simonbengtsson avatar Aug 05 '20 00:08 simonbengtsson

@simonbengtsson I need some simple solution, for example just applying minWidth / cell.colspan. I edited source code to something like this and it seems to be working fine for 95% of my cases (sometimes I get last column unnecessarily squished for some reason).

image

1st question is what do you think about such solution, just applying equal parts proportionally 2nd question is how to improve the code above, you know more about the logic, I feel like I am doing something wrong. 3rd: I'd like having solution merged to this repo and published to npm, so we need some consensus on how to calculate this stuff, I don't want to use local edited version of the lib in my project.

Nervniyak avatar Aug 19 '20 00:08 Nervniyak

Sounds like a reasonable solution. If you submit a PR I'll review it and likely merge and release new version with it right away.

simonbengtsson avatar Aug 19 '20 08:08 simonbengtsson

@simonbengtsson review PR please.

Nervniyak avatar Aug 21 '20 10:08 Nervniyak