minCellWidth is not respected when using colspan other than 1

[Nervniyak]

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

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 didParseCellor 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]

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

[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

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

[stale[bot]]

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.

[Nervniyak]

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

[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:

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]

@simonbengtsson is it just not implemented?

[simonbengtsson]

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

[Nervniyak]

@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).

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.

[simonbengtsson]

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.

[Nervniyak]

@simonbengtsson review PR please.

[rdamazio]

Also hitting this issue pretty hard, any chance someone is still looking into it? :) (thanks for all the other work on this library though!)

[rdamazio]

Here's how it looks for mine (first column has colSpan=2):

Code is available here: https://github.com/rdamazio/efis-editor/blob/0ba1fcc0ed55d86ce1fefe142f6cb5586468a334/src/model/formats/pdf-writer.ts, function _checklistTableBody. (note that's not the head commit, since I had to work around it)

[Nervniyak]

Also hitting this issue pretty hard, any chance someone is still looking into it? :) (thanks for all the other work on this library though!)

Back in 2020 we made a local fork with some changes to library specific to us to handle how width gets distributed wit colspan.