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

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

Here is an example with an iframe

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

It is way easier to deal with !

An iframe gives almost absolute control .

Trying to integrate functionality as a plugin is much more complicated

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