Datatable Integration in TW5

[joost van den Dool]

Goodafternoon,

I started since a while to play with TW5 and I love it. I created a personal planning tool with weekly logs, journal items and stakeholder pages. My next step is to create an activity overview. Each activity is a tiddler and in the overview I show title, category, assignee and quarter (in which the activity should be done e.g. 2021Q2).

Now i would like to use the JavaScript framework datatables (https://datatables.net/) to enhance this table with sorting and grouping. For instance I want to group on category or quarter to get better insight.

I made a tiddler which I tagged as $:/tags/RawMarkup and set the type to: text/vnd.tiddlywiki the content of the tidder is:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>

<script type="text/javascript">

    $(document).ready( function () {

debugger;

        $(table).DataTable( {

            paging: false,

            order: [[2, 'asc']],

            rowGroup: {

                dataSrc: 2

            }

        } );

    } );

</script>

this is the logic I tested first in a standalone html page to test the datatable.  Running this I get an uncaught exception. When I look in the develop console of my Chrome browser I see that table is not defined. Also when I try other jQuery commands on table it fails. Although jQuery on the document works. 

Anyone an idea how to include this great library to enhance my tables?

Kind regards, Joost

[PMario]

Hi Joost,

And welcome!

If you have a look here https://links.tiddlywiki.com/topics/tables/ you may find something useful, that already works for TW?

Including jQuery plugins isn't the best way to go with TW, because the step on each others toes.

-mario

[Mark S.]

Like pMario says, its always better if you can get a native solution. Your JS script isn't going to know about tiddlers, fields, filters, etc.

"Datatables" looks a lot like Dynamic Tables (https://kookma.github.io/TW-Shiraz/#Tutorial%20Dynamic%20Tables). 

[joost van den Dool]

Thank you for your feedback. The alternatives look nice but i miss grouping. So tioday I wrote my own javascript version without jQuery. I hope to integrate it in TiddlyWiki on Monday. For a demo see: https://jsfiddle.net/Joost75/0tad8hgu/#&togetherjs=OzCsdP3kCO

Kind regards, 

Joost

Op zaterdag 24 april 2021 om 19:18:41 UTC+2 schreef Mark S.:

[PMario]

On Saturday, April 24, 2021 at 9:34:35 PM UTC+2 dode...@gmail.com wrote:

Thank you for your feedback. The alternatives look nice but i miss grouping. So tioday I wrote my own javascript version without jQuery. I hope to integrate it in TiddlyWiki on Monday. For a demo see: https://jsfiddle.net/Joost75/0tad8hgu/#&togetherjs=OzCsdP3kCO

Nice code and nice looking table!

But that's not, how TW works. TW has it's own rendering mechanism, similar to react, which constantly updates the DOM according to tiddler state. TW stores everything in tiddlers.

The whole UI state, is stored in tiddlers. The TW DOM is rewritten with every key press or UI interaction if needed.

So as soon as you click a button, or edit a tiddler, your DOM structure will be destroyed and your sorting will start from zero.

You'll need to create a TW widget, if you want to use JS code. But I think that's not necessary.

From your OP and JsFiddler 1 journal entry is 1 tiddler. ad looks similar to this. eg:

title:  CC Vision

category: CC SA

period: Q2

assignee: abc

A sorted "by period" table should look like this:

That's nice. .... I'm not sure, what the "selector" is for.

I'm pretty sure, that all of this can be done with pure wikitext, without any javascript code. ...

I personally would add a tag to every tiddler eg: journal, which will allow me to easily select "all" jouernals. It's also possible, to select all tiddlers that have a field "period" or "category" ... It only needs to be sure, that those fields exist. ...

Your table looks very similar to the core "timeline" macro. So I'd start from there: https://tiddlywiki.com/#timeline%20Macro:%5B%5Btimeline%20Macro%5D%5D%20%24%3A%2Fcore%2Fmacros%2Ftimeline%20%5B%5Btimeline%20Macro%20(Examples)%5D%5D

Just some thoughts.

-mario

[joost van den Dool]

Thank you for you support and ideas. I took them together, spent a day JavaScript hacking and published the result here: http://tiddlywiki.doolplex.org/#GroupedTable%20Macro

I will ananimize the planning tool and publish it later as well as well as other macro's and tweaks I made.

Thank you for you help

Op zondag 25 april 2021 om 00:07:42 UTC+2 schreef PMario:

[PMario]

On Tuesday, April 27, 2021 at 10:45:57 AM UTC+2 dode...@gmail.com wrote:

Thank you for you support and ideas. I took them together, spent a day JavaScript hacking and published the result here: http://tiddlywiki.doolplex.org/#GroupedTable%20Macro

Very well done!

I will ananimize the planning tool and publish it later as well as well as other macro's and tweaks I made.

We are looking forward to your contributions!

 

Thank you for you help

You are welcome

have fun!

mario