New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
100% table width, with auto column sizing #344
Comments
Having just tried to use PDFMake myself, I find the inability to set the total width to 100% for the chosen page size and then setting setting the widths to say auto, *, * so that your first column is sized to the content and the rest of the page is evenly distributed between columns 2 and 3, to be a very limiting capability and makes the functional use of creating PDF based on a table nearly useless. I know this question has been posted a long time ago, is there is any feedback from the developer on this? @bpampuch |
I'm trying to use 100% width with datatables, anyone know how? |
From what I can tell a page is 600 wide less any margins. So:
|
bump! |
I found a good implementation for DataTables, I added a star auto sizing option for the table widths. It basically works by figuring out the full auto sized width of all the columns and than stretches that to 100% of the available width that is left. Star sizing kind of seemed weird to me because it gives all of the columns the same width when I think naturally they just want it to fit the page. Anyway its a starting point and it works great for me, let me know if it helps anybody and we can try to get it added to the repository Changes to pdfmake.js (version v0.1.33): line 23083 replace the buildColumnWidths function with this modified version:
The only difference is that it utilizes the isStarAutoColumn function if it is being used but I figured this would be easier than copying and pasting on different lines inside the funciton. line 23183 add:
And inside of your datatables options use this inside of your customize function for your pdf button:
|
doc.content[1].table.widths = But actually it wrongly distributing the width, column with less data taking more width than column with more data. Is there any solution? |
It works perfectly in mine, if you could provide an example maybe I could help out? |
My god I have been trying to find this solution for the longest time. You are a gentlemen and a scholar. Thanks for sharing that function. |
@Jbegley1995 , excellent solution. It seems to have a bug though if you use mixed fixed widths and star-auto columns, like this: |
Isn't there any generic way to get a 100% width table. |
any updates? how to set up the entire table to the 100% available width? |
This comment has been minimized.
This comment has been minimized.
I was/am in strict need of this feature as well, but I decided to try to add the support to pdfmake, inspired by this thread. If it's of interest to others I can potentially add a test etc as well and submit a pull request. The change itself is fairly basic and as nonintrusive as I could come up with. I added support for a new width type called "auto*" which kind of behaves as a combination of "auto" and "*", so whenever there is more space available than strictly needed any "auto*" columns will scale up proportionally until all space is filled. So essentially you get a full width table, but you can combine it with "auto" so certain columns won't grow. It fills my need so far, so I though I might ask what others think. Can be seen here: 8a7e430 |
If there is header in your table then
|
doc.content[0].table.widths = Array(doc.content[0].table.body[0].length + 1).join('*').split(''); |
doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split(''); |
customize: function (doc) { |
While looking to make my tables 100% width, I found #44:
So I tried setting all of the columns
*
but that results in all columns having the same width.So I tried
*
in the first item andauto
for the others:But that just added the extra width to the first column.
So I'm wondering if there is a way to have the auto column width, but with 100% table width.
Another option might be if there is a method to get the page width, I could compute the sizes to use based on my HTML table.
The text was updated successfully, but these errors were encountered: