How can I transpose a table?

sharpBCD

Hi.
I have many data with 1 possible value. I preffer to use datatable for the ease of page alligment and for using the editor to modify it.
Is there any way to do that?

Just to be 100% sure I'm well understood, I need a table like this:

ETA | ETD | Port | Ship |
01.02.2016 | 01.03.2016 | Hong-Kong | YKM-234 |

To look like this:

ETA: | 01.02.2016
ETD: | 01.03.2016
Port | Hong-Kong
Ship | YKM-234

Right now I just let the header empty and use the first column for name and second for value. But this wont work with the Editor and this is quite a usefull tool, I'm considering buying it if I can work this out.

Apezdr

Is this a good example of what you're talking about?

w3schools.com/html/tryit.asp?filename=tryhtml_table_headers

sharpBCD

Um... yes. Precisely. So now I guess I just look silly..
But that's ok, at least I got the answer.

As far as you know, does Editor have any trouble with this format?

sharpBCD

Oh, on a second thought, I could not made it work with datatable. As pure HTML is fine, but I can not initialize datatable with this type of code.

Apezdr

You can take a look at the API here
https://datatables.net/reference/api/tables().header()

Steps:

Access the variable that is containing the table.

ex.

var table = $(jquerySelectIt).DataTable();

Take note of your headers by adding this code.

console.log( table.table().header() );

The below code will be something you could try. Of course all of this is just an example. Try it out and report back if it helped you out.

table.table().header().outerHTML = '<th><tr role="row"><th aria-sort="descending" aria-label="Start Date: activate to sort column ascending" style="width: 51px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting_desc">Start Date</th><th aria-label="End Date: activate to sort column ascending" style="width: 49px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">End Date</th><th aria-label="Start Time: activate to sort column ascending" style="width: 49px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">Start Time</th><th aria-label="End Time: activate to sort column ascending" style="width: 49px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">End Time</th><th aria-label="TI Acct Code: activate to sort column ascending" style="width: 149px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">TI Acct Code</th><th aria-label="Task Title: activate to sort column ascending" style="width: 72px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">Task Title</th><th aria-label="Task Specific Notes: activate to sort column ascending" style="width: 97px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">Task Specific Notes</th><th aria-label="General Notes: activate to sort column ascending" style="width: 250px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">General Notes</th><th aria-label="Created: activate to sort column ascending" style="width: 76px;" colspan="1" rowspan="1" aria-controls="DataGroupingCollection" tabindex="0" class="sorting">Created</th></tr></th>';

allan

Sorry to say, DataTables does not have a transpose mode. You can simply transpose the table yourself of course, but filtering, sorting and editing would not be transposed.

Allan

sharpBCD

Thx Allan.
I got it. I will find a work-arround in the UX.

sharpBCD

Um.... I have a surprise.
Getting an idea from here: https://stackoverflow.com/questions/16918094/html-table-with-vertical-rows/16919439#16919439
I manage to create an transpose DT (with editor), only 1 line of values. I think it will work with more, but I do not need.
Editor is working just fine. Initial values were 1,2,3,..7 and I change them to "asdf" to test it
So the CSS is this:

table.dt_transpose tr { display: block; float: left; }
table.dt_transpose th, table.dt_transpose td { display: block;}
table.dt_transpose tbody { float: left;}
table.dt_transpose thead {float: left;}

Still needed on that width. I will just sort it out at 50% since I have only 1 line of values.
.