[SOLVED] Transposed tables

[pubmania]

SOLVED

I was wondering if it is possible to have an enhancement on tables and dynamic-tables whereby Columns and rows are interchanged. I checked on stackoverflow and it is possible to do it using just css as per this post so I tried to give it a go but it only works partially.

I am assuming it is perhaps down to something minor but I am not knowledgable enough to work out what. Would you be able to either include it as a style or perhaps provide some guidance on this please?

[kookma]

@pubmania
Many Thanks! Good suggestion, I add it to todo list and will implement it hopefully for next release!
But I think I had to rewrite the dynamic-table code I am not sure if css can transpose the table!

There are loops to iterate on tiddlers and create one row at a time! Now I have to iterate on fields instead of tiddlers!
So, it take times and needs rewrite the dynamic table codes

[pubmania]

See the thing is I used that stackoverflow css solution on TW-Shiraz demo site and it did work in transposing the rows but problem was that it did not align the column headers transposed as rows with rest of the cells... once I am on the laptop later today, I will post the css change I applied on the demo site to make it work.... seeing that might trigger an idea perhaps.

[kookma]

@pubmania
The issue is not related to css, the issue is the way rows are populated in the code

[pubmania]

hmm you ofcourse know better so I can't add much value but see what I mean in screenshots below after I added a style called table-custom on stylesheet:

.table-custom, 
.table-custom thead td, 
.table-custom th, 
.table-custom td{
  display: block;
} 
.table-custom tr{
  display: block; 
    float: left;
}

Then on a new tiddler I used following macro call:

<<table-dynamic filter:"[tag[sample]]" fields:"title fa fb email created tags" stateTiddler:"exmp02" class:"table-custom thead-dark" caption:"''Table 2. Dynamic table example''">>

The columns were all changed to rows as shown below:

Problem as I mentioned before is the header is not aligned to rest of the data. Now this I did was quick and dirty but when I was doing it last time i managed to apply css such if "table-custom" was not applied to a table it remained like a normal table. I changed the css such that only table with table-custom css applied will be impacted.

I also checked and editing deletion all works perfect - just the alignment that is screwed up :(.

[pubmania]

Hey I did it with custom CSS. 😃

I added the following style in the system tiddler: $:/plugins/kookma/shiraz/styles/tables

(The only thing missing in previous time was .table-custom thead, as I don't think .table-custom tbody td, is adding any value but I just left it there just in case.)
EDIT 1: Included .table-custom caption too as that ensures caption is also displayed properly.

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

and then when I call with following macro on a new tiddler:

<<table-dynamic filter:"[tag[sample]]" fields:"title fa fb email created tags" stateTiddler:"exmp02" class:"table-custom thead-dark">>

I get the transposed table:

[kookma]

@pubmania
Many thanks for your efforts. I will consider to add this in new release! I am very busy now and hopefully I will find time to do it.
I will write you then to see how we can add this in an optimum way!

[pubmania]

@kookma you are very kind and I do not believe I am worthy of thanks from the creator of the tool.

All thanks are only for your hard work and generosity to share these tools.

I will be glad to help in anyway I can. :)