Hi I have been messing around a bit with creating form for capturing data 
and the TW-Shiraz plugin is just great with the lovely "dynamic table" 
option but the one issue with having a form with dynamic table was it 
always has fields in column header but with following code it is possible 
to transpose the table and also it allows for adding fields dynamically.

One known issues with the approach though is that if the size of screen 
reduces it causes the entry to wrap text in view mode which then result in 
misalignment of the data and field.

You can try it directly on the https://kookma.github.io/TW-Shiraz/ site by 
creating a new tiddler and pasting the code below:

\define db() $(currentTiddler)$-db
\define dbformstate() $(currentTiddler)$-formstate
\define indexfilter() [[$(currentTiddler)$-db]indexes[]sort[title]]
\define dbfilter() [title[$(currentTiddler)$-db]]

<style>
.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;
border: 1px solid #dddddd;
}
</style>

<$edit-text tiddler="db-form-fieldname-temp" placeholder="Input Filed Name" 
index="fieldName" size="30" tag=input/>
<$set name="myVariable" tiddler="db-form-fieldname-temp" index="fieldName">
<$button type="button" class="btn btn-danger" setTitle=<<db>> 
setIndex=<<myVariable>>  setTo=" - ">Add Field
<$action-setfield $tiddler="db-form-fieldname-temp" $index="fieldName" 
text=""/>
</$button>
</$set>

---

<$macrocall $name="table-dynamic" filter=<<dbfilter>> 
indexes=<<indexfilter>>  stateTiddler=<<dbformstate>> class="table-custom 
thead-success" caption="''Table: You can define the Caption by replacing 
this text in edit mode''"/>


A working example gif is as shown below. Hope some might find this useful :)

[image: shiraz_tiddlywiki_transpose_table_based_form.gif]


-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/b25e3d2f-73d1-4269-9b5d-f57f04a1a477o%40googlegroups.com.

Reply via email to