Replace DataTables functionality with htmx

[jwjacobson]

Right now I'm using DataTables for column click-sorting. There also an option (currently commented out because it's ugly) for toggling column visibility. This was the quickest and easiest way to get this important feature working.

One thing that concerns me is the amount of CDNs this requires. Before putting in DataTables the project used two, for Bootstrap CSS and htmx. Using DataTables for column sort adds five more: JQuery, Datables CSS, Datatables JS, Datatables Bootstrap CSS, and Datatables Bootstrap JS. Adding the column toggle button involves two more!

I don't know if it's unfounded, but bringing in CDNs over the web seems fragile to me. And there's also the inelegance of bringing in so many resources for 1-2 features.

Lastly, column click-sorting and toggling column visibility seem like things that htmx should be perfect for. For now though this won't be a priority...

[jwjacobson]

@ryaustin curious about your thoughts on this

[ryaustin]

You're right, HTMX can handle this but to be fair, datatables is perfectly suited for the task.

I struggled with the same and bookmarked this to try at some point: https://www.advantch.com/blog/django-htmx-server-side-datatables/
This has a lot of the functionality and also is server-side rendered which I prefer.

If the above doesn't work for you, A consideration could be to bring the project local by downloading the libraries and adding them to your project directly. This has the benefit of increasing performance and security but also means that you need to pay attention to those libraries for potential security updates (so there's a tradeoff).

Adam Johnson (https://adamj.eu/tech/) often speaks about bringing libraries local to the project on his blog, I can't seem to find the exact post though.

Given that you do have this valid concern, i'd try the server-side rendered tables.