mod to sortable table headers

54 views
Skip to first unread message

barro...@gmail.com

unread,
Oct 1, 2018, 2:46:17 AM10/1/18
to TiddlyWiki
A slight mod to Jed McCarty's (iirc) code for clickable table column headers-- basically tacking on a second line/field value within a table cell that is independent from from the first line in the table cell and both are independently sortable by mouse click.

For a result like this:
(shortened version shown, this is normally used with 10 column tables)

----------------------------------------------------------------------------------
         NAME          |             City section              |
         ALIAS          |            Neighborhood           |
----------------------------------------------------------------------------------
      Name 1            |    city section for Name 1     |
  Alias for Name 1  |   neighborhood for Name 1  |
----------------------------------------------------------------------------------
      Name 2            |    city section for Name 2     |
  Alias for Name 2  |   neighborhood for Name 2  |
----------------------------------------------------------------------------------

NAME, ALIAS, City section & Neighborhood are separate buttons within the table header cells, separately sorting their respective values (which are  separate field values within the table cells, which keeps them in the same table row)

Using the tiddler "title" field and 3 custom fields ("secondaryname", "location", "location2"),
this mod just adds a line break and second sort button to the header cells...

<th><$button class='tc-btn-invisible' style='width:100%;height:100%'>Name<$action-setfield sort_by='title'/><<ToggleDirection>></$button><br/>
<$button class='tc-btn-invisible' style='width:100%;height:100%'>Alias<$action-setfield sort_by='secondaryname'/><<ToggleDirection>></$button></th>

and a second field value to the table cells for that column

<td><$link><$view field="title"/></$link><br/><$view field="secondaryname"/></td>

complete table code

\define FilterYOURFILTERNAME()
[tag[*YOURTAGNAME]$(SortType)$sort{!!sort_by}]
\end
\define ToggleDirection()
<$list filter='[<currentTiddler>sort_type[!]]'
 emptyMessage="""<$action-setfield sort_type='!'/>""">
<$action-setfield sort_type=''/>
</$list>
\end
<$set name=SortType filter='[<currentTiddler>get[sort_type]]'>
<table>
<tr>
<th><$button class='tc-btn-invisible' style='width:100%;height:100%'>Name<$action-setfield sort_by='title'/><<ToggleDirection>></$button><br/>
<$button class='tc-btn-invisible' style='width:100%;height:100%'>Alias<$action-setfield sort_by='secondaryname'/><<ToggleDirection>></$button></th>
<th><$button class='tc-btn-invisible' style='width:100%;height:100%'>City section<$action-setfield sort_by='location'/><<ToggleDirection>></$button><br/><$button class='tc-btn-invisible' style='width:100%;height:100%'>Neighborhood<$action-setfield sort_by='location2'/><<ToggleDirection>></$button></th>
</tr>
<$list filter=<<FilterYOURFILTERNAME>>>
<tr>
<td><$link><$view field="title"/></$link><br/><$view field="secondaryname"/></td>
<td><$view field="location"/><br/><$view field="location2"/></td>
</tr>
</$list>
</table>
Reply all
Reply to author
Forward
0 new messages