TW5 Sortable Tables

[reakt...@gmail.com]

I have been searching for a way to create tables in TW5 in such a way that when clicking on the table header, it will sort the table by that column. There was a plugin to do this in TWC but I have not been able to find any way to do this in the current TW5. Has anyone seen a plugin or does anyone know how to accomplish this?

[Tobias Beer]

Hi Jed,

 

Otherwise you can do it without too much trouble using html:

While that works, the table data need not necessarily come from individual tiddlers, so a more generic approach to table sorting as well as filtering seems desireable. Sure, the sorting and filtering state(s) could be persisted in some state tiddler.

Best wishes, Tobias.

[reakt...@gmail.com]

I keep checking for this particular functionality as it's the only thing that ever keeps me from using TW full time. Has anyone happened to find a plugin or method to make tables sortable?

[Danielo Rodríguez]

El miércoles, 25 de febrero de 2015, 18:49:05 (UTC+1), Jed Carty escribió:

There is a site that has some things it says works, but it doesn't work for me, I am not sure why but you can check it out and see: http://braintest.tiddlyspot.com/#Inline%20editable%20tables

That it's quite old. I want to review and update the code. But the only thing it is not working is the sort thing. Sorry for it. 

 

Otherwise you can do it without too much trouble using html:

Just to be clear. My solution is "complex" because it is very configurable and very generic. If you only want sortable table and anything else, you definetively need something easier. 

[reakt...@gmail.com]

I agree, I just have not found anything yet that works. Having the explanations of the data in TW and having to link to an outside excel file is not quite what I am looking to continue doing because it defeats the purpose of everything in one file.

I'll have to keep poking around and see what I can find.

[Jed Carty]

Would something like this work if I made it so that clicking on a column header sorted the table using that column? I am not really sure what people are looking for with these tables.

I should probably add sorting and some filtering operations like I use here to those macros anyway.

[Danielo Rodríguez]

There is a plugin that creates some kind of Excel sheet within the tiddler. I don't remember the name but it is quite impressive.

[Birthe C]

Hi Jed,

Waw, that is definitely something I can use, sorting by clicking column header would make it even better.



Birthe

[reakt...@gmail.com]

Jed,

That would work great! Creating and maintaining them easily (creating them and editing in-line in your example) is excellent. Adding a sorting by clicking column header is a welcome addition as it allows for interpreting the data much easier. The sorting and filtering options you provided would also be a welcome addition I think.

[reakt...@gmail.com]

I'd be interested in finding this. I'll see what I can dig up, in the meantime if you happen to come across the plugin again and you remember this post, see if you can include it. That sounds quite interesting!

[Jed Carty]

You can sort the simple tables I made, but unfortunately only by columns for row tables and by rows for column tables because I can't find a way to sort different fields by their value as opposed to sorting tiddlers based on the value of the same field in each tiddler.

Filtering table entries and adding anything to the more complex tables takes more work, so it may happen later.

[Danielo Rodríguez]

El viernes, 26 de junio de 2015, 19:08:15 (UTC+2), reakt...@gmail.com escribió:

I'd be interested in finding this. I'll see what I can dig up, in the meantime if you happen to come across the plugin again and you remember this post, see if you can include it. That sounds quite interesting!

Hello, it took me some time, but at the end I found it. Check it out this:

http://rboue.tiddlyspot.com/#SocialCalc%2FDemos%2Fone-plus-one--demo

 And the original thread:

https://groups.google.com/forum/#!searchin/tiddlywiki/three.js/tiddlywiki/4pduHLadB8M/5LtoyO7ArHgJ 

[Jed Carty]

There is a site that has some things it says works, but it doesn't work for me, I am not sure why but you can check it out and see: http://braintest.tiddlyspot.com/#Inline%20editable%20tables

Otherwise you can do it without too much trouble using html:

<table>
<tr>
  <th>
    <$button class='tc-btn-invisible' style='width:100%;height:100%'>Table header 1<$action-setfield sort_by='field_1'/>
    </$button>
  <th>
    <$button class='tc-btn-invisible' style='width:100%;height:100%'>Table header 2<$action-setfield sort_by='field_2'/>
    </$button>
  </th>
</tr>
<$list filter='[tag[someTag]has[field_1]has[field_2]sort{!!sort_by}]'>
<tr>
  <td>
    <$view field='field_1'/>
  </td>
  <td>
    <$view field='field_2'/>
  </td>
</tr>
</$list>
</table>

There is a demo on my site. Note that this only works if you generate the table using data from tiddlers, I don't know if there is currently a way to sort static tables in tiddlywiki 5.

[Dave]

is there a way to use this to generate a table based on a filter, but specify the fields included in the table rather than including all the fields?

[Jed Carty]

At the moment you would have to modify the macro to make that work. The good news is that since I was planning on including that feature it wouldn't be too huge a change. The bad news is that I have been playing with some of the other 128468952 projects I have and have been ignoring tiddlywiki a bit. This shouldn't be a big change so I will hopefully get around to it later today.

[Jed Carty]

Or I will do it now. That works too. Here are the updated examples. I guess the next task is to let something other than the tiddler or field name be the column/row header.

[Dave]

That's really cool! (and useful)

[Stephen Kimmel]

Jed. I hate to be so remarkably dense but I would like to do some minimal format change on the generated tables. Specifically I would like the cell entries to be left aligned rather than centered. But I'm not finding where that is done.

[Jed Carty]

Stephen,

The problem is that there are two places that need to be changed. One is the td tags and the other is the buttons that allows inline editing. Putting <div style='text-align:left'> </div> around the macro call will make the some of the table headers properly aligned. The rest are using the class tc-btn-invisible, so you need to make a tiddler tagged with $:/tags/Stylesheet with something like this in it:

.tc-btn-invisible {
text-align:left;
}

[Stephen Kimmel]

Thanks. That will get it. The variation I've actually settled on is directly implied by your suggestion.

.tc-btn-invisible-left {
text-align:left;
padding: 0;
margin: 0;
background: none;
border: none;
}

That way, the other .tc-btn-invisible items continue to function as intended and only my specified ones are left aligned.

[reakt...@gmail.com]

I haven't had much luck with the examples here but that's very much attributed to me being a TW noob. I caught on late to TW at the end of classic when I had something working but TW5 has been fairly frustrating for me to get learning. The only real issue that keeps me from using this and progressively learning really are tables that I can sort. I'm not sure if I'm just a complete and utter noob at this or I miss the true value/function of what TW5 should be used for.

What I was hoping to accomplish were sortable tables like the ones here - http://www.kryogenix.org/code/browser/sorttable/. Notice how the table in the 2nd example has sortable headers that when clicked or clicked a second time will sort ascending or descending and display an arrow? Is something like this even possible?

Maybe I'm going about this wrong however, allow me to explain my usage for such a thing and perhaps it may help to understand what I'm trying to accomplish. I currently have to manage roughly 50 users who I need to keep track of what level of access, training, and development they have. These are such small tables I've made in Excel and generally don't require math however, I'm looking to be able to use TW5 to do this since I think I can keep notes on each incident/training/coaching in a bit more intuitive way with TW5.

Any thoughts?

[MaxGyver]

I know that this is a very old thread but it's still interesting (at least for me). I was looking for the same feature.

I played around with that linked sorttable.js and TiddlyWiki. This is how you can do it:

Add a tiddler tagged $:/tags/RawMarkup with this content:

<script type="text/javascript" src="https://kryogenix.org/code/browser/sorttable/sorttable.js"></script>

You could also download the javascript file and link it locally.

Save and reload your TiddlyWiki.

Now you can create sortable tables like that:

@@.sortable
| letter | DE | EN |h
| y | 0,04 % | 1,97 % |
| x | 0,03 % | 0,15 % |
| q | 0,02 % | 0,10 % |
@@

There is one drawback: The wiki must be saved and reloaded after editing a tiddler that contains a sorted table.

Best regards

Max

[Reaktorblue]

Neat!

Out of curiosity, how are you hosting the TW file? It it a standard .html file or are you perhaps using Node.js?

[TonyM]

Max

This is a great solution. I plan to use it right away. The source site has a lot more information.

Looking at the source site I think it would not be right to pull it from his address every time its used. He Actualy asks you to copy it locally. I think we may be able to place the whole script in a raw tiddler. But I am yet to test it.

Regards
Tony

[TonyM]

Max,

My HTML table is not responding to this 

<table width="100%" class="sortable">

Have you any experience with that and tiddlywiki

Regards

Tony

[Max Schillinger]

Have you reloaded the page after editing the tiddler?

I only tried it using the WikiText syntax.

[Taylor Worthington]

The source can be included at the end of practically any of the .js files. I put it at the end of $:/core/modules/widgets/tiddler.js (I assume many will not want this, because updates might write over it.)

Reloading the TiddlyWiki neglects opening the tiddler your table is in unless it is a default tiddler.

To fix this:

1. Open the control panel ($:/ControlPanel)
2. Go to tab: Settings
3. Scroll down to heading: Navigation Address Bar
4. Select the radial button: "Include the target tiddler and the story sequence"
5. Thus, you can reload the wiki, tiddlers, and tables in one click/keystroke
   

With the following formatting, it is visually easy to tack on rows to the bottom of the table as needed.

|sortable|k
|This is a caption |c
|Footer|Footer|f
|Header|Header|h
|Cell1 |Cell2 |
|Cell3 |Cell3 |

[@TiddlyTweeter]

Ciao Max

https://kryogenix.org/code/browser/sorttable/ has been around nearly as long as I have used computers.

It is a stunning piece of work the author has continuously honed over many years and gives away.

I have used it many times already.

TBH, I think its simply the best available table sorter. Its lightweight and effective.

The need to refresh after Tiddler edit is simply because of the way TW copes with that kind of JS. Hardly any kind of problem really.

TT

[Jed Carty]

I made some pure wikitext sortable tables https://ooktech.com/jed/ExampleWikis/DynamicTables/ but it doesn't have the sorting based on content type.

And that is a very fragile way to include javascript in a tiddlywiki. It would be a much better idea to put it into a plugin or startup module, or an easier way would be to copy the javascript into a tiddler and give the tiddler the tag $:/tags/RawMarkup

But regardless of which method you use tiddlywiki does not play well with javascript that relies on dom manipulations. There are a few places in the code that you could change to make it play better with tiddlywiki but I am not sure how much better.

[@TiddlyTweeter]

Jed

I'd prefer a TW intervention to JS imports.

In THIS case I don't see the point.

https://kryogenix.org/code/browser/sorttable/

... is excellent. Maybe we could integrate it better?

Otherwise why bother?

TT

[@TiddlyTweeter]

Why is this thread marked "Completed" & shows this nonsense on first post? ...

[Jennifer S]

I've been successful with this script:

https://github.com/tofsjonas/sortable

I'm just including a link to it in the head via $:/tags/RawMarkup. It's lightweight and fast.

[TiddlyTweeter]

Ciao Jennifer

Very interesting! Tx. There are other solutions but this looks nicely lightweight. I will test and comment

Best, TT

[TiddlyTweeter]

Ciao Jennifer

https://github.com/tofsjonas/sortable

I tested it and it seems v. good for simple sorting of tables. 

Of course there are serious plugins now in TW for tables that sort via TW filters. 

But for many use cases your found solution will be good.

I wrote some notes to myself on how to use it that I include an image of...

Best, TT

On Sunday, 20 March 2022 at 04:57:15 UTC+1 Jennifer S wrote: