including tabulator javascript to have excel like feature on a tiddler

499 views
Skip to first unread message

Ankit Mittal

unread,
Jul 4, 2019, 6:14:01 AM7/4/19
to tiddl...@googlegroups.com
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

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>



  <!-- Tabulator 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">

</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="/js/sparkline.js"></script> -->
<script type="text/javascript" src="https://unpkg.com/tabulato...@4.2.7/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>


Mat

unread,
Jul 4, 2019, 9:25:29 AM7/4/19
to TiddlyWiki
It is not possible to put in javascript code directly into tiddlywiki. It has to be "packaged" as js.plugins - so I propose you head over to the dev group that deals with such matters, and declare this thread "closed" here.

If by "embed" you don't need something where the content of the table does not interact with the rest of the wiki, then you could try using an iframe and link its content to where you have the table.

<:-)

Ankit Mittal

unread,
Jul 4, 2019, 10:41:40 AM7/4/19
to TiddlyWiki
ah I see... yeah a plugin might be useful. How do I close it here?

Mat

unread,
Jul 4, 2019, 12:43:33 PM7/4/19
to TiddlyWiki
Ankit Mittal wrote:
ah I see... yeah a plugin might be useful. How do I close it here?

Sorry, poorly expressed of me. But you just did close by stating it :-)

<:-) 
Reply all
Reply to author
Forward
0 new messages