Datatables with ZERO javascript, using Stimulus / Twig Components

tacman1123

I've used datatables for a long time in my projects. The build process has always felt awkward, but building front end assets always feels awkward (yarn, npm, makefile, webpack encore, etc.)

Importmaps changes that, and the newest version of Symfony has an assetmapper component that allows for module-based front end development without any build step. The recent blog post here about almost everything being available as an ESM was welcome news.

In that post, though, there was a link to loading the import map, which was exclusively datatables, which means that nothing else could be loaded. There are some ways to build the dependencies within the Symfony bundle, but the first step is to get a definitive list of the available modules in a machine-readable format (that is, json). The assetmapper component in Symfony works exclusively with jsdelivr, so really what's needed first is a list of the official datatables packages on jsdelivr.

My goal is for Symfony developers to be able to create a new project, install a few bundles, create a table and then add a single line of code to turn it into a datatable.

    {% set _sc = '@survos/datatables-bundle/table' %}
    <table class="table" {{ stimulus_controller(_sc, {perPage: perPage}) }}>
       the thead and tbody
    </table>

I have a Symfony bundle that does this now, and it works well, except that it requires webpack, which complicates deployment of simple sites.

The bundle also allows to create an entire table from data, an array of objects.

{# where data is something like $repository->findAll() #}
{% set columns = ['id','name','age'] %}
<twig:grid :data = "data" :columns="columns"/>

Is there a way to get from jsdelivr just the official datatables.net packages in a JSON format? Or can you do that during the build process, and add the JSON file to a github repo somewhere?

allan

I too quite dislike the build process in "modern" Javascript - the old school way of just including a <script> tag is so easy relative to the build toolchain. Look through the forum and you'll see a lot of questions about how to include DataTables in a build. It should be easy, and I've done my best to document it, but build toolchains can be difficult!

The importmap I created for the blog post does include all the extensions (albeit at the version when I wrote that blog post - it needs to be updated). Are you basically looking for that, but without the Javascript wrapper?

Allan

tacman1123

yes, I was hoping to get just a json file with the details about each plugin.

Symfony has decided on jsdelivr as the central authority for javascript packages. I'm having trouble finding the right datatables packages there, though.

I was trying to find css/jquery.dataTables.css on jsdelivr, it appears to be part of the datatables package, but not datatables.net. So I've installed them both. When I install datatables, it downloads the css by default. When I install datatables.net, there is no css. But I also see that they are different versions (1.10 v 1.13), so I'm fairly sure my approach isn't right.

I see that datatables has its own CDN, jsdelivr gets its packages from npm, which does not seem to have the css for datatables.net

https://www.npmjs.com/package/datatables.net/v/1.13.6?activeTab=code

Or maybe the css is somewhere else, in another package?

tacman1123

And to be clear, I don't want to include datatables in a build, I want to install it as a module. And as you've noted, the problem with using your importmap is that it excludes all other javascript modules.

I guess I'd like a json file of all the plugins (and css?) and their links to the cdn, yours and jsdelivr/npmjs.

tacman1123

I think I figured out part of my misunderstanding. In your example, you point to your cdn:

<link href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

But I can't find that file anywhere on jsdelivr except in the datatables package, which is 5 years old.

https://www.npmjs.com/package/datatables

allan

datatables.net-dt contains the default DataTables stylessheet. You can use the download builder and select the "NPM" tab at the bottom of the page to see the packages for the selections made.

Allan

tacman1123

Thanks. I'm still a bit confused, but the https://www.npmjs.com/package/datatables.net-dt link helps a lot.

allan

So the idea is that datatables.net contains DataTables core. Then since we have support for lots of different styling frameworks, you would also use a styling package - e.g.:

• datatables.net-dt for DataTables default styling
• datatables.net-bs5 for Bootstrap 5 styling
• datatables.net-bm for Bulma styling
• etc

In Javascript, you would actually just use the styling package, since it is dependent upon the base, so:

npm install datatables.net-bs5

Will install datatables.net as well. And you'd do:

import DataTable from 'datatables.net-bs5;

in the Javascript.

Allan