simonbengtsson / jsPDF-AutoTable

jsPDF plugin for generating PDF tables with javascript
https://simonbengtsson.github.io/jsPDF-AutoTable/
MIT License
2.33k stars 624 forks source link

Rewrite width options and distribution algorithm #1053

Closed mmghv closed 6 months ago

mmghv commented 6 months ago

Introducing new width options to give more dynamic control over the column widths

Old options:

  cellWidth: 'auto' | 'wrap' | number
  minCellWidth: number
  ---
  tableWidth: 'auto' | 'wrap' | number

New options:

  cellWidth: 'auto' | 'min-content' | 'max-content' | number
  minCellWidth: 'auto' | 'min-content' | 'max-content' | number
  maxCellWidth: 'auto' | 'min-content' | 'max-content' | number
  ---
  tableWidth: 'auto' | 'min-content' | 'max-content' | 'fit-content' | number

min-content : The minimum width required to fit the content in a readable manner (with no word-breaking). max-content : The full-width required to fit the content without introducing new line-breaks (which was previously wrap). fit-content : (tableWidth only) Same as max-content but limited to the available page width.

These are CSS properties, so aligning with CSS naming is a plus here, but they are actually implemented in a more consistent and capable way than HTML/CSS tables which has somehow limited support for them.

Supporting these options across the width styles gives the ability to customize the table layout based on the content without resulting to use hard coded values which could be fiddly and never works well with dynamic content.

The width distribution algorithm has been rewritten to support the new options and has been improved to minimize word-breaking by default in case there was long columns with no spaces, in this case it will prioritize breaking the long columns first one by one in size-order, usually there's only one long column so this works well and prevent the short columns from breaking.

Using the example in #1018, here's the before and after (no custom width styles are used)

Before:

318172315-abeb1663-180c-44b4-a9fb-d4e0b6928fa5

After:

image


I know this is a big change, so please take your time to review and let me know if you need any additional info.

Next this needs some work with horizontalPageBreak, it works but not fully, so to simplify the review I've decided to split it.

After that, I'll work on colSpans, which I actually started off by researching and refactoring for, but ended up with the new width options so finished it first. but I got the algorithm all planed thanks to CSS table layout specs & chromium source code.

mmghv commented 6 months ago

Fixed a bug and added examples, Ready for review!

simonbengtsson commented 6 months ago

Amazing! Have attempted to work this out a few times but never succeeded in something that I deemed worth shipping so awesome work. Will start review shortly!