Challenge: Table consisting of tiddlers

[Mat]

Inspired by the really high quality discussions/help lately, I wanted to take the opportunity for a little challenge:

What's the best way to construct a table consisting of tiddlers?

You should also be be able to "target" an arbitrary tiddler therein, i.e so you can access its fields data.

Bonus challenge: Target a specific row or column, i.e all tiddlers therein.

The formulation above is intentionally vague so different ideas can be put forth and trigger thoughts one might not get otherwise BUT 

Background:

The question came up as I'm fiddling around with ideas for the Graphs plugin framework. If I'm lucky you guys pick up on this (stand-alone) challenge, but just maybe I'd be able to incorporate something of it into Graphs. 

Also, I recall Jeremy long ago expressed a desire for tables-from-tiddlers. I guess now is as good a time as any.

<:-)

[Jan Johannpeter]

Hey Mat,
I have an example working here: http://roguelike.tiddlyspot.com/...See the dungeoneditor.
It should be easy to adapt to your purpose. (Graphs is a great plugin by the way...).

Cheers Jan

--
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 tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a57da8b1-2718-4845-ac61-016c2c64d3a7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Stephen Kimmel]

Looking at your challenge again, I stumbled into what I'll refer to as the FlexBox solution. This may not be quite what you were looking for but you may find it interesting.

The listing of the tiddlers is a filtered list displaying a link to the individual tiddlers and a display of the tiddler itself using a template. What makes it look like a table is the styling. The flex-container sets the table to the full width allowed in the tiddler area and wraps the listing to the next line. The flex-item controls the basic dimensions of the tiddler display while the overflow:hidden limits the tiddler display to a thumbnail of the tiddler. I threw on the outset border style just to be cute. The flex-item:hover causes the thumbnail to expand to a larger version with the overflow set to auto so that the entire tiddler can be viewed.

<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    background-color: <<colour background>>;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-item {
    width: 150px;
    height: 200px;
    margin: 10px;
    overflow:hidden;
    padding: 5px;
    border-style: outset;
}

.flex-item:hover{background-color:black;
    width: 300px;
    height: 300px;
    overflow:auto;
}
</style>

<div class="flex-container">
<$list filter="[tag[series]sort[title]limit[50]]">
<div class="flex-item">
<$link>
<h3><$view field="title"}}/></h3>
</$link>
{{||Fields}}
</div>
</$list>
</div>