Sign in
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Adding support for Simple-DataTables, A Vanilla JS alternative to DataTables

  • This topic has 8 replies, 3 voices, and was last updated 1 month, 2 weeks ago by .
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #11498
    Avatar photosandrobilbeisi

    I am trying to get Simple-DataTables to work on Publii.

    It looks and works like DataTables (https://datatables.net/) , but with no jQuery or other external dependencies, and is FOSS (https://en.wikipedia.org/wiki/Free_and_open-source_software)

     

    write-up: https://blog.devgenius.io/simple-datatables-a-vanilla-js-alternative-to-datatables-72f116565e39

    GitHub repository: https://github.com/fiduswriter/Simple-DataTables

    demos: https://fiduswriter.github.io/simple-datatables/demos/

    documentation: https://fiduswriter.github.io/simple-datatables/documentation/

     

    I have had limited success by baking it into my theme on a special template, but…

    I envision it as a plugin rather than a theme feature; even better to see it built into Publii

    so far I have been trying to add a button to the TinyMCE editor, but with little success

    #11504
    Avatar photosandrobilbeisi

    I have switched over to Simple-DataTables-classic https://github.com/fiduswriter/simple-datatables-classic

    to work in plain vanilla JS with no TypeScript.

     

    It works well in a custom template (post-alternative.hbs)  but I really would want it to work in a generalized way such as the gallery does.

     

    To obtain that result, add this to head.hbs :

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-datatables-classic@latest/dist/style.css">

    then add this to the end of post-alternative.hbs :

    <script src="https://cdn.jsdelivr.net/npm/simple-datatables-classic@latest"></script>
    <!-- Custom Code -->
    <script>
    var firstTable = document.getElementsByTagName("table")[0];
    const dataTable = new simpleDatatables.DataTable(firstTable, {
    searchable: true,
    fixedHeight: true,
    });</script>

     

    Real-world example: https://www.sandrobilbeisi.net/table-example.html

    #11506
    Avatar photosandrobilbeisi

    After this slightly frustrating experience . ..

    😳

    I believe the best way is to use an iframe that embeds a custom handcrafted html file !!!

    Alternatively , just embed Google Sheets.

    #11507
    Avatar photosandrobilbeisi

    Here is an example with an iframe

    https://www.sandrobilbeisi.net/table-example-iframe.html

     

    It is way easier to deal with !

     

    #11509
    Avatar photocandidexmedia
    sandrobilbeisi wrote:

    After this slightly frustrating experience . ..

    😳

    I believe the best way is to use an iframe that embeds a custom handcrafted html file !!!

    Alternatively , just embed Google Sheets.

    What issues did you run into when not using an iframe?

     

    Another alternative could also be embedding NocoDB or Airtable.

    #11510
    Avatar photosandrobilbeisi

    An iframe gives almost absolute control .

     

    Trying to integrate functionality as a plugin is much more complicated

    #11514
    Avatar photobjazmoore
    sandrobilbeisi wrote:

    Here is an example with an iframe

    https://www.sandrobilbeisi.net/table-example-iframe.html

    It is way easier to deal with !

    Can you explain your process so others could duplicate if desired.  Thanks

    #11518
    Avatar photosandrobilbeisi

    Essentially iframes give absolute freedom because they decouple the framed document from any aspects or incompatibilities of the parent document managed by the CMS software.

    The framed document and its dependencies go into a special folder which is managed manually on the server.

     

    The table-column-cells.html file contains the custom code for a special table

    it is uploaded together with its dependencies onto a special folder which is not managed by the CMS

    so now it resides at the address /includes/table-column-cells.html

    The file is tested independently (unit testing) at https://www.sandrobilbeisi.net/includes/table-column-cells.html

    The publii CMS post must contain an iframe with a source attribute of “/includes/table-column-cells.html”

    <p>Table example - iframe</p>
    <p><iframe width="800" height="800" style="border: 0;" src="/includes/table-column-cells.html" frameborder="0" scrolling="yes"></iframe></p>
    <hr>
    <p> </p>

    Save the post and publish and sync your website .

     

    p.s. here is another example with embedded interactive AnyLogic simulations : https://www.sandrobilbeisi.net/anylogic-iframe-embed.html

    #11531
    Avatar photobjazmoore

    Thank you.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.