A Macro to Create TOC Like Table with Dot Leader

Tips & Tricks
1

Sometimes in your Tiddlywiki you like list tiddlers with specified field value and show the result in TOC like table (with dot leader) The below macro helps you to create such output

A table with dot leader to show linkable title with modified date

  1. Open https://tiddlywiki.com/
  2. Create a new tiddler
  3. Tag it with $:/tags/Macro
  4. Put the below script in your tiddler body and save
\define dleader(filter)
<$list filter="$filter$">
<div class="dot-leader">
    <!-- Left side -->
    <div><$link/></div>

    <!-- Dots -->
    <div class="dot-leader__dots"></div>

    <!-- Right side -->
    <div><$view field="modified" format=date template="YYYY.0MM.0DD"/></div>
</div>
</$list>		
\end
  1. create a second tiddler
  2. tag it with $:/tags/Stylesheet
  3. put the below styles inside it and save
.dot-leader {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
}

.dot-leader__dots {
    /* Bottom border */
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);

    /* Take remaining width */
    flex: 1;

    /* Spacing */
    margin: 0px 4px;
}

Now lets test it

<<dleader "[tag[About]]">>

produces

image
image828Ă—408 20.4 KB

Credits: All kudos goes to https://github.com/1milligram

6 Likes
How to Easily List items with columns!
How can we use CSS to fill to end of a table cell?
2
  • Try to modify the left and right values
  • Add macro parameters, to pass left/right values

The dleader macro is simple and hackable to shape it to your needs! Do and share here with TW community!

1 Like
3

Nice!

Don’t forget to change the second tiddler type to “text/css” :wink:

4

Hello @Mohammad,

I inserted an additional column for “tag” field.
How can this content be right-aligned?

grafik
grafik1879Ă—667 86.1 KB


Modified code of macro:

\define dleader(filter)
<$list filter="$filter$">
<div class="dot-leader">
    <!-- Left side -->
    <div><$link/></div>

    <!-- Dots -->
    <div class="dot-leader__dots"></div>

    <!-- additional column -->
    <span style="color: green"><$view field="tags"/></span>

    <!-- Dots -->
    <div class="dot-leader__dots"></div>

    <!-- Right side -->
    <div><$view field="modified" format=date template="0DD. MMM YYYY"/></div>
</div>
</$list>		
\end`

Thanks
Stefan

5

Stefan, this solution best works for two column layout and the dots will fill the remaining space. When you use three columns, the question is how much spaces need for middle column, so, we have to set widths.

6

TBH this will help if we can see it! :innocent:

7

Good evening,

I loved using this macron, except it no longer works properly with TW 5.27.
I can’t find the reason.
Do you have a solution ?

8

thousand excuses ! I’ve found !

1 Like