Formatting list results as a table - no CSS

,
#1

I have been working out how to format list results as tables. The documentation offers three options, no CSS and two with CSS.

I have found a simpler method, most probably obvious to most of you but it may be useful to update the documentation to include this simple method.

Just insert table tags around the <$list>… tags as follows:

<table>
<tr><td>Type</td><td>Item</td><td>Quantity</td><td>Serial Number</td><td>Components</td><td>Approximate Value</td></tr><$list filter="[tag[Assets]!<currentTiddler>sort[title]sort[asset-type]]" emptyMessage="There are no assets recorded as yet"> <tr><td>{{!!asset-type}}</td><td><$link/></td><td>{{!!asset-quantity}}</td><td>{{!!asset-serial-number}}</td><td>{{asset-components}}</td><td>{{!!asset-approximate-value}}</td></tr></$list>
</table>

This renders found tiddlers as a normal table as per the |a|b| markup.

By adding a row before the <$list tag, creates column headings.

3 Likes
#2

Yes I do this too, in preference to the wikitext table method.

But I space it out for readability

<table>
<tr>
   <td>Type</td>
   <td>Item</td>
   <td>Quantity</td>
   <td>Serial Number</td>
  <td>Components</td>
  <td>Approximate Value</td>
</tr>
<$list filter="[tag[Assets]!<currentTiddler>sort[title]sort[asset-type]]" emptyMessage="There are no assets recorded as yet"> 
   <tr>
      <td>{{!!asset-type}}</td>
      <td><$link/></td>
      <td>{{!!asset-quantity}}</td>
      <td>{{!!asset-serial-number}}</td>
      <td>{{asset-components}}</td>
      <td>{{!!asset-approximate-value}}</td>
   </tr>
</$list>
</table>

You can also use <th></th> in the first row rather than <td></td>

1 Like
#3

Or, thead containing the tr/td block.

1 Like
#4

Yes, actually thead and tfoot are useful if you want either display or printing to handle page breaks or overflow.

Whilst such HTML tables is what I commonly use we must point out there are few smart table tools and plugins available and it is well worth searching.

Never the less here is a filtered table work in progress

  • I intend to add smarts to minimise the info or filters required by default but that can be replaced.
\define filtered-table(rows columns headings footers)
* no headings filter make from columns
 <table>
  <thead>
    <tr>
      <$list filter=<<headings>> variable=each-heading>
         <th><<each-heading>></th>
      </$list>
    </tr>
  </thead>
  <tbody>
    <tr>
      <$list filter="""$rows$""" variable=each-row>
         <$list filter="""$columns$""" variable=each-column>
            <td><<each-row>></th>
         </$list>
      </$list>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <$list filter="""$footers$""" variable=each-footer>
         <th><<each-footer>></th>
      </$list>
    </tr>
  </tfoot>
</table> 
\end

But I cant speak to highly of some of the smart table solutions out there.