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:
After:
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.
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!
Introducing new width options to give more dynamic control over the column widths
Old options:
New options:
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 asmax-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:
After:
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.