My only wish in tiddlywiki: is this possible? Where should I start from?

,
#5

This is defiantly a good start, these can be used to list and visualise many different things within TiddlyWiki, one way to look at it is going from the “list widget” to a “table view” with feature’s in the table to manage columns and rows, sort and selection.

  • I hope in time we can have a solution that meets with your ideas and all you have to give it is the filter (for the rows) and let it find the columns (fields) but allow columns to be hidden as desired.
  • As generic as possible so we can all just use it as an alternate way to view and manage tiddlywiki content.

Let us be able to move from Lists to tables as we need.

1 Like
#6

Experience TiddlyWiki Fluency: Creating a Reading List - YouTube – this video by @sobjornstad covers some of the things you are looking for. The whole video is quite long, but you can take a peek at the result towards the end of the video (a table with a list of books, including some dynamic filtering of the contents of the table) and see if it is of any help to you.

1 Like
#7

Great, now I really have a lot of ideas, I’ll get to work. It will take a while but in the meantime if I find something interesting, I will update you

#8

Here’s a quick and dirty approximation, perhaps helpful to @SnapSam or others – automatically setting up rows for all of the fields associated with tiddlers under the tag-category in question (or whatever other filter-condition you want)…

Put this in a tiddler tagged $:/tags/ViewTemplate

<$list filter="[tag<currentTiddler>limit[1]]" variable="">

<$macrocall $name=table-dynamic filter="[tag<currentTiddler>]" fields="""[tag<currentTiddler>fields[]] -modified -modifier -creator -created -text -[<currentTiddler>get[remove-fields]enlist-input[]]""" caption="''Tiddlers tagged @@{{!!title}}@@, and their fields''" />

</$list>

You can add a field called remove-fields to take out any fields you don’t want to see (specific to the tag whose contents you’re looking at). And of course, edit the above if you do want to see things like text, modifier, etc., in the dynamic table.

-Springer

2 Likes
What is in a tiddler? tiddler types and how we handle them
#9

I believe this is responding to the Original Topic. An Overview.

For those passing @Springer is referring to a way to make use of Dynamic Tables, Part of @Mohammad’s Shiraz Plugin

Example under development;

1 Like
#10

@TW_Tones,

I don’t see Shiraz plugin installed at that demo site…

I exported your tiddlers into a site with Shiraz, and the tables seem to work fine:

https://minimalist-test-mode.tiddlyhost.com/#Using%20Shiraz%20Dynamic%20tables%20and%20discovering%20fields

-Springer

1 Like
#11

@TW_Tones and others,

Note that when field names are wider than their contents, dynamic tables can get cumbersome.

At the link above, note that I’ve also added a demo of a generic solution (described here): a way to make column headers look for tbl-caption variant, and a dynamic table listing all the fields, so that tbl_caption can be quickly assigned to them (an abbreviation, unicode symbol, whatever).

This way your dynamic table can be more horizontally compact, without modifying your actual field names.

and… Fixed sorting issue

One thing I don’t quickly know how to solve, @Mohammad: how to get a dynamic-table column to sort as numeric, rather than alphabetically. (See how the atomic number column sorts as 1, 10, 100, 101…)

FIXED: Setting the whole dynamic table to specify sortOp="nsort" is plenty good enough!

-Springer

1 Like
#12

OOPs, too many wikis :frowning: Corrected

  • I have some CSS somewhere that extends column names up at an angel of 45% from their column, leaving the column to be “only” as wide as its content. You just need to add some whitepace above the table to accommodate them.
1 Like
#13

Ah, found the answer to the sorting problem. It applies to the whole table, but surely is worthwhile, since it allows you to sort by atomic number. Your whole table would look something like this:

<$macrocall $name=table-dynamic sortOp="nsort" filter="[all[shadows+tiddlers]has[element]sort[element]]" fields="""[all[shadows+tiddlers]has[element]fields[]] -modified -modifier -element -creator -created -text -[<currentTiddler>get[remove-fields]enlist-input[]]"""  caption="''Tiddlers tagged @@{{!!title}}@@, and their fields''" />
#14

I did too, using the filter only ie nsort
filter= [[all[shadows+tiddlers]has[element]] -[[Headers_Tiddler]] +[nsort[element]]"
but with inconsistent results? It works in preview not view :thinking:

I notice dynamic tables assumes we are selecting by tag and says this in a heading :frowning:

Note: there are also overflow options to scroll a table however for the element example I found zooming out sufficient although not perfect. Simply overflow hidden would help (Until zoom displays it) on large screens.

1 Like
#15

Interesting discussion, I will keep this in mind in my efforts. Anyway, if you work on tables, even if you probably already know it, I recommend that you also look at TiddlyTables, the plugin Mohammad relied on for his.

#16

It would be very interesting to see if we could add some dynamic scrolling of columns. For instance, in this case, keep the name, weight, and symbol fixed, but only show as many of the others that fit inside the current container, with some scroll gesture to hide some of the visible ones and show more of the hidden ones. I have no idea how to do that, not only in Tiddlywiki but in HTML tables, but I’m sure others have solved that issue for HTML, so we might be able to incorporate it here. It’s not a high priority for me now, but I have a project coming up where it might be useful. Hmmm.

#17
  • This is possible, I have done it to a sophisticated level in the past.

If you build tables with the html tags thead / tbody and tfoot it is quite easy to introduce scrolling or pages. Using html table layouts, with listwidgets to iterate rows and columns within the table definition is quite easy and very powerful.

#18

Do you have links to any of this?

Well, it’s quite easy to introduce vertical scrolling. Horizontal would take something more, especially if you wanted smooth scrolling that showed partial columns. It would make @Springer’s demo look much nicer. I know I’ve seen it done in HTML, but have no idea where. I may take a look, but this is low priority for me.

– Scott

#19

Unfortunately no, all the work I did was inside a commercial solution for a client.

  • I did get a Horizontal scroll as well.
  • I also allowed one to go from an interactive table to generating PDF’s

There may be other ways, just keep in mind if an when this becomes a priority my experience suggests;

Happy coding :nerd_face:

#20

Of course there’s the trivial solution of wrapping the table in a container with overflow-x: auto. But that doesn’t keep what I think of as the spreadsheet solution that keeps certain row or column headers fixed as you scroll.

More to think about!

#21

A little looking and I found this: DataTables example - Complex headers

So it’s certainly doable, although that solution has a fair bit of complexity!

Edit: Even better: position: sticky: https://jsfiddle.net/qwubvg9m/1/. This one is fairly simple.

#22

The latest version of this looks really nice. The bit where the atomic number disappears but the element name stays visible when scrolling sideways is a gorgeous touch. I’ll have to dig in to find out how you did that (Or is that something from Mohammad’s plugin?

#23

@Scott_Sauyet: all I did was to begin building on the tips in the link you posted above from jsfidle.net.

It’s not quite polished (I had intended for both atomic number and title to remain at left, during horizontal scroll, but for some reason only one column body remains, and the column headers behave inconsistently.) Still, I hope it’s a proof of concept for what you were looking for.

#24

Then a beautiful mistake!

Very much so. Now the element table can fit in the tiddler. I will probably be using something like this in a few weeks.

Thank you for investing the time in it.

1 Like