A quick Form using Shiraz dynamic tables

[Ankit Mittal]

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 :) (looks like gif isnt supported on google groups so here is the link: https://gfycat.com/pointedcolossalfish )