Table with several outputs in one row

#1

Consider this code:

<table>
<$list filter="[tag[Contact]]">
<tr><td><$link /> </td>
<td>{{!!telephone}} </td></tr>
</$list>
</table>

This produces a two-column table. Details of one contact in one row. Is this the best/ standard way of doing things?

And what if I wan to have details of two contacts in one row? Something like this:

|Contact 1 | 11111111|Contact 2 | 22222222|

Merely adding another does not work. Because the list is still pointing to the same tiddler.

How do I make list advance to the next item?

Moreover, what if I find even two in a row table too narrow and want to have three/ four/ five contacts in a row?

#2

That’s how I’d do it - yes.

Woo, that’s going to be a little more complex I suspect. I think your best bet is the nth[] operator. Once you have a list (such as a filter that starts with [tag[Contact]... you can refer to a single position with nth[] In order to use that, you’d probably need to wrap in some more nested lists using the range[#,#] type filter, and if you needed X rows of 5 for example (to get 5 per row to know where to put the <tr></tr> values you’d need to do some math. I don’t have time at the moment to fully flush out, but maybe that gets you started?

#3

You would need to stop adding a tr for each element of the list, in your case you would have to open or close the label depending on whether it is even or odd.

I think that you need to play with the combination of operator remainder, compare and then to add the necessary part of the tag. If it odd then remainder returns 0, use compare with 0 that return true, so you can use then for return the closing tag

You have all filter operators here

#4

I’ve been playing with it and thought it’s something like this, but I’m missing something simple…

This is for 3 rows 5 of

<table>
<tr>
<$list filter="[range[0,2]]" variable="row">
<$list filter="[range[1,5]]" variable="col">
<$set name=mycount value={{{ [<row>multiply[5]add<col>] }}}>
<$list filter="[tag[Contact]nth<mycount>]">
<td><$link/></td>
<$list filter="[<mycount>remainder[5]match[0]limit[1]]" variable="x"></tr><tr></$list>
</$list>
</$set>
</$list>
</$list>
</tr>
<table>

There’s some problem where it’s not recognizing the </tr><tr> in that middle row that I can’t figure out…

#5

Is the left-to-right then top-to-bottom layout a requirement?

If you want columns, CSS columns are very easy:

<div style="column-count: 3;">

{{{[is[system]]}}}

</div>

Here is an example using CSS grid. It lacks the borders that a table has, but the inner divs can be styled with a border. Paste in a new tiddler at tiddlywiki.com to see the example.

<style>
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  grid-column-gap: 1em;
}
</style>

<div class="grid-4">
<$list filter="[tag[Filter Operators]]">
<div>{{!!title}}</div>
<div><$view field=created format=date template="mmm 0DD"/></div>
</$list>
</div>
#6

Cool - learned something new, thanks @amreus!

I’m still puzzled why my solution is acting the way it is in case anyone is bored and/or has seen something like that before…

#7

First - clarification

@deshmukh as @amreus suggests below we can use multiple columns. I would have suggested it myself. In some ways the raw requirement is to increase the density of the information displayed within a tiddler. On wide screens we see the opportunity to extend the display of content in the horizontal direction.

A possible solution?
Modern websites now tend to avoid tables for the presentation of data that may need to vary in layout depending on different devices, that is responsive design. The strategy is to make use of flexboxes and other design methods. Then if the tiddler is wide it would automatically make use of more columns or reduce to one on a mobile.

Overflow in Tiddler and Table
#8

@amreus Thanks. This works superbly, especially the <div style="column-count: 3;"> part.

Just one question. The code below when implemented, shows </vars> tag and subsequent formatting breaks.

<$vars value="[[Something]]">
<div style="column-count: 2;">
  <$list filter="[sr-type<value>!sort[sr-published-on]]">
    <div><$link /></div>
    <div>{{!!sr-published-on}}</div>
  </$list>
</div>
</vars>

What am I doing wrong? How do I set this right?

1 Like
#9

@TW_Tones You perfectly capture it!

And when you say,

are you referring to what @amreus said or is there some other idea?

By the way, I stumbled when I tried using <vars along with the <div solution. I have posted that here in a reply.

#10

If you did not correct the typo already… the $ is missing in the closing </$vars>

#11

@amreus Thanks! That was embarrassing! I will be more careful.

#12

Yes one possible solution is in the word I used “flexbox”. I will be see if I can share more but it is another way of presenting content in html/css.

#13

While researching this I made a related discovery. Please see; Smart columns to make use of wide screens

If you had a narrow table you wanted to break over multiple columns you would have to remove the mention of “table” in the stylesheet, or do a local override.

div, ol, ul, img, table, { break-inside: avoid; }

You could perhaps replace it with “tr” to stop the table breaking in table rows.