div Builder

Tables

Simple way to build HTML tables from JSON data or arrays. You can set headers, add rows, or build a full table in one go. The table data is provided inside a dictionary with the keys "headers", "rows", "cols" or "json" representing the table structure. The following examples are beased on:

headers and rows

The most simple way is an empty table. With the following code you get a table with three headers "header 1", "header 2", and "header 3" and four empty rows:

Next we create a table with headers and rows, provided by arrays:

And also with headers and cols, provided by arrays. The table will be built column-wise in this case:

json

Now we build a table from JSON data. The keys of the JSON objects will be used as headers and the values as rows. The keys are commulated from all json items to build the full header list. Note in the example below that eacht JSON item does not need to have all keys. Missing values will be filled with empty strings, i. e. blank table cells.

Tables Handler

InsertRow

InsertRow let's you insert a row into a table.

Make Rows Editable

Make Rows editable adds the contenteditable="true" attribute to each cell of the table rows.

Set Table Style - col Widths

Set Table Style - col Widths sets the width of each column of the table.