I found this plugin: http://rboue.tiddlyspot.com/#SocialCalc%2Fintroduction:SocialCalc%2Fintroduction%20SocialCalc%2FDemos%2Fone-plus-one--demo
This seems to be quite good actually so I think this query can now be closed. On Thursday, 4 July 2019 15:47:06 UTC+1, Ankit Mittal wrote: > > I asked the following question on general discussion forum > <https://groups.google.com/d/msg/tiddlywiki/vmXmguEeIEM/Nz3EFwS7DAAJ> and > was told that it is better suited for this forum as it needs a plugin to be > created - clearly I am dealing with something I have no idea about and any > help on how can that be achieved or if some kind soul can create a plugin > it will be grand indeed. I am sure it will be useful addition to an already > wonderful solution that Tiddlywiki is. > > I am wondering if there is some way to use the tabulator javascript > library and if there is any tutorial you could point me to. I tried to > understand javascript related topic on tiddlywiki.com but I guess it was > too much for my simplistic brain to comprehend. > > What I am really trying to achieve is: > > > - On the home page of http://www.tabulator.info/ they have given a > table where you can dynamically add, remove cells etc as also shown in > screenshot below > > [image: tabulator.PNG] > > > - I want to embed such a table on a tiddler in first instance. > - If that works I was thinking maybe I can make a template tiddler > which can then be used to create such a new tiddler using a button or > something similar. > > Any guidance will be hugely appreciated. > > Added Info: > > I tried creating a tiddler using following code and making the tiddler > render type as text/HTML - It shows button but they dont work and the table > data is not visible. > > <!DOCTYPE html> > <html lang="en" itemscope itemtype="http://schema.org/WebSite";> > > <head> > > <meta charset="utf-8"> > <meta http-equiv="X-UA-Compatible" content="IE=edge"> > <meta name="viewport" content="width=device-width, initial-scale=1"> > > <title>Tabulator</title> > <meta name="description" content="Create interactive data tables in > seconds with Tabulator. A lightweight, fully featured JavaScript table > generation library."> > <meta name="author" content="Oli Folkerd"> > > > > <!-- jQuery --> > <script src="https://code.jquery.com/jquery-3.2.1.min.js"; > integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" > crossorigin="anonymous"></script> > <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"; > integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" > crossorigin="anonymous"></script> > > <script src=" > https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js > "></script> > <script src=" > https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js";></script> > > > <!-- Tabulator CSS --> > <link href=" > https://unpkg.com/[email protected]/dist/css/tabulator.min.css"; > rel="stylesheet"> > <link href="http://www.tabulator.info/css/tabulator/tabulator_site.min.css"; > rel="stylesheet"> > <link href="http://www.tabulator.info/css/app.css?id=81572e6d4a1291377d96"; > rel="stylesheet"> > > <link href=' > https://fonts.googleapis.com/css?family=Open+Sans:800,400,700,400italic,700italic|Bevan > > <https://fonts.googleapis.com/css?family=Open+Sans:800,400,700,400italic,700italic%7CBevan>' > > rel='stylesheet' type='text/css'> > <link rel="stylesheet" href=" > https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css > "> > > <!-- Latest compiled and minified CSS --> > <link rel="stylesheet" href=" > https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; > integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" > > crossorigin="anonymous"> > > <link rel="stylesheet" href=" > https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"; /> > </head> > > <body data-page='home'> > > > <header class="jumbotron"> > <div class="container"> > <h2>The easy to use, fully featured, interactive table JavaScript > library</h2> > </div> > </header> > > > <main class="container" data-page='home'> > > <section class="center"> > > <div class="row"> > <div class="col-lg-12"> > > <div id="tabulator-controls" class="table-controls hidden-xs"> > <i class="fa fa-filter fa-fw"></i> <input name="name" type="text" > placeholder="Filter Table By Name"> > <button name="download"><i class="fa fa-download"></i> Download Data as > CSV</button> > > <button name="hide-col" class="col-hide"><span class="hide-rating"><i > class="fa fa-eye-slash"></i> Hide Rating Column</span><span > class="show-rating"><i class="fa fa-eye"></i> Show Rating > Column</span></button> > > <button name="undo"><i class="fa fa-undo"></i> Undo Edit</button> > > <button name="add-row"><i class="fa fa-plus"></i> Add Row</button> > </div> > > <div id="tabulator-example"></div> > </div> > </div> > > </section> > > </main> > > > > > > <!-- Bootstrap Core JavaScript --> > <script src=" > https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"; > integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" > > crossorigin="anonymous"></script> > <script src=" > https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js > "></script> > <script src=" > https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?style=desert > "></script> > <script src=" > https://cdn.rawgit.com/google/code-prettify/master/loader/lang-css.js > "></script> > > <!-- <script src="/js/sparkline.js"></script> --> > <script type="text/javascript" src=" > https://unpkg.com/[email protected]/dist/js/tabulator.min.js > "></script> > > <script type="text/javascript"> > > var tabledata = [ > {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", > dob:"19/02/1984", car:1, lucky_no:5, activity:[1, 20, 5, 3, 10, 13, 17, 15, > 9, 11, 10, 12, 14, 16, 13, 9, 7, 11, 10, 13]}, > {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", > dob:"14/05/1982", car:true, lucky_no:10, activity:[10, 12, 14, 16, 13, 9, > 7, 11, 10, 13, 1, 2, 5, 4, 1, 16, 4, 2, 1, 3]}, > {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, > col:"green", dob:"22/05/1982", car:"true", lucky_no:12, activity:[1, 2, 5, > 4, 1, 16, 4, 2, 1, 3, 3, 7, 9, 1, 4, 8, 2, 6, 4, 2]}, > {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, > col:"orange", dob:"01/08/1980", lucky_no:18, activity:[3, 7, 9, 1, 4, 8, 2, > 6, 4, 2, 1, 3, 1, 3, 3, 1, 1, 3, 1, 3]}, > {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, > col:"yellow", dob:"31/01/1999", lucky_no:33, activity:[1, 3, 1, 3, 3, 1, 1, > 3, 1, 3, 20, 17, 15, 11, 16, 9, 12, 14, 20, 12]}, > {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, > col:"red", dob:"12/05/1966", car:1, lucky_no:2, activity:[20, 17, 15, 11, > 16, 9, 12, 14, 20, 12, 11, 7, 6, 12, 14, 13, 11, 10, 9, 6]}, > {id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, > col:"green", dob:"14/05/1985", car:true, lucky_no:63, activity:[11, 7, 6, > 12, 14, 13, 11, 10, 9, 6, 4, 17, 11, 12, 0, 5, 12, 14, 18, 11]}, > {id:8, name:"Gemma Jane", progress:60, gender:"female", rating:0, > col:"red", dob:"22/05/1982", car:"true", lucky_no:72, activity:[4, 17, 11, > 12, 0, 5, 12, 14, 18, 11, 11, 15, 19, 20, 17, 16, 16, 5, 3, 2]}, > {id:9, name:"Emily Sykes", progress:42, gender:"female", rating:1, > col:"maroon", dob:"11/11/1970", lucky_no:44, activity:[11, 15, 19, 20, 17, > 16, 16, 5, 3, 2, 1, 2, 3, 4, 5, 4, 2, 5, 9, 8]}, > {id:10, name:"James Newman", progress:73, gender:"male", rating:5, > col:"red", dob:"22/03/1998", lucky_no:9, activity:[1, 20, 5, 3, 10, 13, 17, > 15, 9, 11, 1, 2, 3, 4, 5, 4, 2, 5, 9, 8]}, > {id:11, name:"Martin Barryman", progress:20, gender:"male", rating:5, > col:"violet", dob:"04/04/2001", activity:[1, 2, 3, 4, 5, 4, 11, 7, 6, 12, > 14, 13, 11, 10, 9, 6, 2, 5, 9, 8]}, > {id:12, name:"Jenny Green", progress:56, gender:"female", rating:4, > col:"indigo", dob:"12/11/1998", car:true, activity:[11, 15, 19, 20, 17, 15, > 11, 16, 9, 12, 14, 20, 12, 20, 17, 16, 16, 5, 3, 2]}, > {id:13, name:"Alan Francis", progress:90, gender:"male", rating:3, > col:"blue", dob:"07/08/1972", car:true, activity:[4, 17, 11, 7, 6, 12, 14, > 13, 11, 10, 9, 6, 11, 12, 0, 5, 12, 14, 18, 11]}, > {id:14, name:"John Phillips", progress:80, gender:"male", rating:1, > col:"green", dob:"24/09/1950", car:true, activity:[11, 7, 6, 12, 14, 1, 20, > 5, 3, 10, 13, 17, 15, 9, 1, 13, 11, 10, 9, 6]}, > {id:15, name:"Ed White", progress:70, gender:"male", rating:0, > col:"yellow", dob:"19/06/1976", activity:[20, 17, 15, 11, 16, 9, 4, 17, 11, > 12, 0, 5, 12, 14, 18, 11, 12, 14, 20, 12]}, > {id:16, name:"Paul Branderson", progress:60, gender:"male", rating:5, > col:"orange", dob:"01/01/1982", activity:[1, 3, 1, 3, 3, 1, 11, 15, 19, 20, > 17, 16, 16, 5, 3, 2, 1, 3, 1, 3]}, > {id:18, name:"Emma Netwon", progress:40, gender:"female", rating:4, > col:"brown", dob:"07/10/1963", car:true, activity:[3, 7, 9, 1, 4, 8, 3, 7, > 9, 1, 4, 8, 2, 6, 4, 2, 2, 6, 4, 2]}, > {id:19, name:"Hannah Farnsworth", progress:30, gender:"female", rating:1, > col:"pink", dob:"11/02/1991", activity:[1, 2, 5, 4, 1, 16, 10, 12, 14, 16, > 13, 9, 7, 11, 10, 13, 4, 2, 1, 3]}, > {id:20, name:"Victoria Bath", progress:20, gender:"female", rating:2, > col:"purple", dob:"22/03/1986", activity:[10, 12, 14, 16, 13, 9, 7, 1, 2, > 3, 4, 5, 4, 2, 5, 9, 8, 11, 10, 13]}, > ]; > > var table = new Tabulator("#tabulator-example", { > height:317, > data:tabledata, > layout:"fitColumns", > responsiveLayout:"hide", > tooltips:true, > addRowPos:"top", > history:true, > pagination:"local", > paginationSize:7, > movableColumns:true, > resizableRows:true, > initialSort:[ > {column:"name", dir:"asc"}, > ], > columns:[ > {title:"Name", field:"name", editor:"input", minWidth:80}, > {title:"Task Progress", field:"progress", minWidth:80, align:"left", > formatter:"progress", editor:true}, > {title:"Gender", field:"gender", width:95, editor:"select", > editorParams:{values:["male", "female"]}}, > {title:"Rating", field:"rating", formatter:"star", align:"center", > width:100, editor:true}, > {title:"Color", field:"col", width:130, editor:"input"}, > {title:"Date Of Birth", field:"dob", width:130, sorter:"date", > align:"center"}, > {title:"Driver", field:"car", width:90, align:"center", > formatter:"tickCross", sorter:"boolean", editor:true}, > ], > }); > > $("#tabulator-controls input[name=name]").on("keyup", function(){ > table.setFilter( "name", "like", $(this).val()) > }); > > $("#tabulator-controls button[name=hide-col]").on("click", function(){ > $(this).toggleClass("col-hide"); > > if($(this).hasClass("col-hide")){ > table.showColumn("rating"); > }else{ > table.hideColumn("rating"); > } > }); > > $("#tabulator-controls button[name=undo]").on("click", function(){ > table.undo(); > }); > > $("#tabulator-controls button[name=add-row]").on("click", function(){ > table.addRow({}); > }); > > $("#tabulator-controls button[name=download]").on("click", function(){ > table.download("csv", "Tabulator Example Download.csv"); > }); > </script> > > </body> > > </html> > > -- You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywikidev. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/f7f55055-9600-43ac-a3c6-20ecce7d0d8a%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
