Generating HTML Table from Grid with rowspan and colspan (gridstack)

Question

I have a gui grid builder, which acts like a dashboard. For that I use gridstack javascript library. So I have stored the coordinates and values within my database how gridstack wants it. The format is for each value ax,y coordinate and a width/height data. all parameters are NOT pixel, instead they represent the cells for example the dataset:

{x: 1, y: 2, height: 2, width: 3}

Will generate a rectangle started at grid row 2 and at the column 1 and is 2 rows height and 3 columns width.

I think I do not need to provide example data, because they can be different everytime (user x creates dashboard in the way of A and user y in the way of B). Important is that cells can not overlap. So when we have a data entry at x:0,y:1, width: 4, height: 1 it is not possible that another data entry is at x: 2, y: 1 (width and height does not matter here)

That's for my data structure.

I can display it normaly with div's and absolute positioning, thats not the problem, the problem is I need to print this page as a pdf. For such task I use wkhtml2pdf. What it does is simple. I provide an url to this programm, it opens it with I think it was the webkit engine, get all the data and print that page like you do with "print this webpage" within a browser. However this tool I assume can not handle absolute positioning correctly.

I tested the printing with a static html table how I need it and this worked very well.

So what I want to do is, generating a HTML-Table based on my data structur with all the row and colspan I need to generate the exact visual output within the printed pdf as when visiting our site.

An answer "Why not just clicking 'print' within the browser" is not acceptable, because I need a downloadable pdf file which is very different in surrounding html and css as the normal page, I already tried in the first place to just use a "print layout" which can be used by the browser, but this is not possible, due to the fact that each browser handles it a bit different and it didn't worked how expected.

To generate a bit html table stuff within javascript is not a problem, my real problem is how I calculate which td's and tr's I need to create in order to generate a valid table which looks how it should be.

To give a quick test data:

[
{"title":"image1","y":0,"x":0,"width":3,"height":7,"configuration":{"title":"22344"}},
{"title":"Headline","y":0,"x":3,"width":2,"height":1,"configuration":{"text":"Headline"},
{"title":"image2","y":1,"x":3,"width":2,"height":6,"configuration":{"title":"Fdsfsd"}},
{"title":"text1","y":0,"x":5,"width":2,"height":6,"configuration":{"text":"bzend-framework-php/Zend/View.php:108"},
{"title":"text2","y":7,"x":3,"width":2,"height":4,"configuration":{"text":"Lorem ipsum dolor sit amet"}
]

Can anybody help me to create this damn table, I really have no glue to accomplish this task.

Valid languages are php and javascript with jquery library.

Thank you, prdatur

Answer 1

I figured it out. Absolute positioning is working but I need to set pixel instead of %-values within width and defining a max-width so wkhtml2pdf like it a bit more :)