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' 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/dcb0180f-267b-4653-9743-cde277576b0b%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
