Support for custom column width

[rebizu]

Hi
It would be nice to add support for custom column width.

like below

doc.autoTable( 
[ 
  { title : "ID", key : "id" , width: 30} ,
  { title : " Name" , key : "name"}
] , data , {});

This way I can define the width of some columns and let the plugin use the rest of the space dynamically

And thanks for the great plugin 👍 :-)

[simonbengtsson]

Sounds like a good idea and will probably be added at some point! I'm curious about your specific use case though. For now there is a feature to specify overflowColumns. This is probably the most common use case and when set, it makes all columns fixed width, but the ones specified which will either shrink or grow depending on the width available. An example how to use this option is in the long text example.

[rebizu]

My usecase is that i have a table with five columns like:

{title:"ID"}, {title:"Name"}, {title:"Total time"}, {title:"allowed time"},{title:"dif"}

and i want the columns ID,Total time, allowed Time, diff to have specific widths

this way i have full control of the layout of the table. I think that the behavior of the columns without a width should be sharing the remaining space

[rebizu]

For instance if i know that ID wont be larger than 50 pt and that way have the rest of the space for the other columns.

Once again thanks for the great plugin :)

[simonbengtsson]

Thanks! Sounds good, something I will implement. Will write here once it's done.

[PolygeneLubricants]

Awesome! Thank you for a great plugin.

[rdbauer]

I have another use case to add to the mix. It might already be there but don't know where as I just found this plugin today.

I have 7 columns with one being the description (which the content will take up a lot of space) and another is the hours (as in Hours worked for a timesheet). The issue is that because the hours is a number that at most will be ##.# (i.e. 10.5), the title only shows "H..." instead of "Hours". I have another field (Job Code) that is similar. Basically, the header text is longer than the data and it is being sized by the data it seems.

For my case, maybe just checking the header text as well for sizing might work.

Anyway, great plugin! So much easier to use than the other libraries I was trying!

[simonbengtsson]

After reading your comment I realized there was a bug that the header width wasn't calculated correctly. This should now be resolved in version 1.2.4. Also you should probably set the overflowColumns property to an array with the description column to only allow that column to shrink or extend it's width. You can check out the long text example for an example how to do this. Let me know if it works for you!

[rdbauer]

Thanks for the quick response. This does fix the header issue for sure. I was already doing the overflowColumns and that worked great for that part but still had the header issue which you have now fixed. I have an issue now where some columns are getting really narrow but even an "overflow" column is giving it the full length. Not sure if it is my issue or not, but the defined width option like this post is about would still help and combined with the "overflowColumns" that you already have in there, it would provide the solution to my needs and provide great flexibility for everyone.

Looking forward to what you do next as everything you have already done works amazing. Fast, easy to use, and looks great right out of the gate. I spent countless hours trying to get other things to work but just couldn't. Great work!

[simonbengtsson]

Hmm that sounds strange. Feel free to post a new issue with more information if you are still having problems.

Thanks! I also spent many hours searching for a good solution before I figured that the easiest way would probably be to make something myself. I have some interesting things coming up for version 2. Including much easier custom styles, custom column widths, support for more units and easier row and column span.

[reachwasim]

Hi @someatoms have you got a chance to implement @rebizu suggestion on doc.autoTable(
[
{ title : "ID", key : "id" , width: 30} ,
{ title : " Name" , key : "name"}
] , data , {}); ?

[simonbengtsson]

Support for custom column width is now added (version 1.3). It works just as has been propused in this issue by @rebizu and @reachwasim and there is an example in the long text example. Let me know if you have any issues with it or other feature request!

[dren79]

Hey guys, great job on implementing the column widths, bud could you tell me how many points across is a table in landscape?

Percentages don't work, before someone suggests it :)

[simonbengtsson]

Hi! An A4 page is 595x842 pt and minus the default margins the table should be 842-40-40 = 762 pt wide.

[Pikesh]

Hey Simon, the example link is not working. Can you check it.

Thanks for an amazing plugin!

[Pikesh]

I think those were older configurations. I went throught the releases, and found the proper way now, is:

doc.autoTable(columns,rows,{
        addPageContent:pageContent,
        margin: {horizontal:5,top: 20},
        startY: 0.47*doc.internal.pageSize.height,
        styles: {overflow: 'linebreak'},
        columnStyles: {id: {columnWidth: 25}, name:{columnWidth:40}, role: {columnWidth: 15}, location: {columnWidth: 30}}
      });