How do you generate table content?

, ,
#1

Hi all,

I’ve created a table-procedure for the resizer widget

Now before I come up with a way to put content into these tables I would like to ask you if you have ideas how that should be done

Within the table procedures the column Index is accessible through <colIndex> or <column> and the row is accessible through rowIndex or <row>

I’m experimenting with filters that can be passed to the procedures and they are then evaluated within the procedures…

This is how the resizable-table looks like:

\procedure resizable-table-content(filter)
\whitespace trim
<%if [<editable>match[yes]] %>
	<$let state={{{ [[$:/state/edit-cell-]addsuffix<colIndex>addsuffix[-]addsuffix<row>addsuffix[-]addsuffix<qualify>] }}}>
		<%if [<state>get[text]!match[yes]] [<state>is[missing]] %>
			<div style.display="flex">
				<div style.flex="1">
					<$wikify name="content" text="""<$text text={{{ [subfilter<filter>get<field>] }}}/>""">
						<<content>>
					</$wikify>
				</div>
				<div>
					<$button class="tc-btn-invisible" set=<<state>> setTo="yes" actions=<<resizable-table-content-create-tiddler-actions>>>
						{{$:/core/images/edit-button}}
					</$button>
				</div>
			</div>
		<% else %>
			<div style.display="flex">
				<div style.flex="1">
					<$edit-text tag="input" tiddler={{{ [subfilter<filter>] }}} focus="yes" class="tc-width-100"/>
				</div>
				<div>
					<$button class="tc-btn-invisible" set=<<state>> setTo="no">
						{{$:/core/images/done-button}}
					</$button>
				</div>
			</div>
		<% endif %>
	</$let>
<% else %>
	<$wikify name="content" text="""<$text text={{{ [subfilter<filter>get<field>] }}}/>""">
		<<content>>
	</$wikify>
<% endif %>
\end

\procedure resizable-table(columns:"", rows:"", columnFilter:"", rowFilter:"", field:"text", editable:"no", tableHeight:"auto", class:"", headerClass:"", cellClass:"", stateTiddlerPrefix:"$:/state/resizable-table/")
\whitespace trim
<$let cellWidth={{{ [[100]divide<columns>addsuffix[%]] }}} stateTiddlerPrefix={{{ [<stateTiddlerPrefix>addsuffix<columns>addsuffix<qualify>addsuffix[/]addsuffix[col-]] }}}>
	<div class={{{ tc-resizable-table-wrapper [<class>] +[join[ ]] }}} style.height=<<tableHeight>> style.width="100%">
		<table class="tc-resizable-table" style.width="100%">
			<%if [<columns>!is[blank]] %>
				<thead>
					<tr class={{{ tc-resizable-table-header [<headerClass>] +[join[ ]] }}}>
						<$list filter="[range<columns>]" variable="column" counter="colIndex">
							<$let nextColIndex={{{ [<colIndex>add[1]] }}} row="0">
								<th style.position="relative" style.min-width=<<tf.get.min.column.width.percentage>> style.max-width=<<tf.get.max.column.width.percentage>> style.width={{{ [<stateTiddlerPrefix>addsuffix<colIndex>get[text]!prefix[Infinity]] :else[<cellWidth>] }}}>
									<div class="tc-resizable-table-cell" style.width="100%">
										<$transclude $variable="resizable-table-content" filter=<<columnFilter>>/>
									</div>
									<%if [<colIndex>!match<columns>] %>
										<$resizer
											class="tc-table-column-resizer"
											direction="horizontal"
											min=<<tf.get.min.column.width.percentage>>
											max=<<tf.get.max.column.width.percentage>>
											default=<<cellWidth>>
											unit="px"
											element="parent.parent"
											onBeforeResizeStart=<<resizable-table-on-before-resize-start-actions>>
											onResize=<<resizable-table-on-resize-actions>>
										/>
									<% endif %>
								</th>
							</$let>
						</$list>
					</tr>
				</thead>
			<% endif %>
			<%if [<rows>!is[blank]] %>
				<tbody>
					<$list filter="[range<rows>]" variable="row">
						<tr class={{{ tc-resizable-table-row [<cellClass>] +[join[ ]] }}}>
							<$list filter="[range<columns>]" variable="column" counter="colIndex">
								<td style.min-width=<<tf.get.min.column.width.percentage>> style.max-width=<<tf.get.max.column.width.percentage>> style.width={{{ [<stateTiddlerPrefix>addsuffix<colIndex>get[text]!prefix[Infinity]] :else[<cellWidth>] }}}>
									<div class="tc-resizable-table-cell" style.width="100%">
										<$transclude $variable="resizable-table-content" filter=<<rowFilter>>/>
									</div>
								</td>
							</$list>
						</tr>
					</$list>
				</tbody>
			<% endif %>
		</table>
	</div>
</$let>
\end

Here’s an example how to call this:

<<resizable-table rows:"5" columns:"5" columnFilter:"[tag[Table]!tag[Row]tag<colIndex>]" rowFilter:"[tag[Table]tag[Row]tag<colIndex>tag<row>]">>

I’m still not settled about how the content should be created, I’m lacking ideas
Maybe it should be possible to create the content like above or (with a switch) by passing a table in wikitext?

Another thing I’m struggling with is the editing mode if a tiddler is missing
I would really like to be able to create a tiddler based on a given filter expression, does anybody here have an idea how that could be done?

Thank you in advance for your help and your ideas,
best wishes from Southtyrol,
Simon

1 Like
#2

i don’t know if it is a way to put content into those tables, but maybe there is something to the tids-to-table plugin idea?

1 Like
#3

Hi @twMat and thanks for the hint!

The link to that plugin came up when I wrote these lines and I had a look at it! Very nice and solid!

Thanks

#4

Here is a dynamic table I have made with option to add categories and subcategories for the contents. It has more customisations options which can be seen on pressing the edit button at the left-top of the table

#5

@arunnbabu81 , your table is VERY impressive!

I’m trying to create a general-purpose resizable-table procedure… I hope I can make that possible somehow

That’s what I’m gathering ideas for

#6

I will look at this in detail tomorrow to see if I can add something.

I have a hunch.

perhaps there are two questions here. one is how to introduce resizable elements to tables and the other is how to make tables and include the first.

if they can be separated the first is finite and can be added to any table. both tiddlywiki markup and html tables have features to assign styles and classes to them. in fact most html elements may be?

PS I saw your dragable corners :clap::clap: bravo

#7

It seems in your example tiddlers you use a row/column numbering. I would change that to column / row and connect the content to a data-tiddler with a col-row numbering too. So the indexes can be the key and the data can be shown in the table. I think that should be straight forward to implement.

The procedure would only need a data parameter, that is connected to the data tiddler. Since data-tiddlers are easy to edit by humans it should also be relatively straight forward to fill them with data.

A second possibility would be a lookup parameter where the data-tiddler is a “lookup-table” so the key = col-row number and the value=tiddler title, that will be transcluded into the table. This will make it possible to have wikitext content within a table cell

IMO both configuration options should be available.

Hope that makes sense.

1 Like