Has anyone tried to get DataTables (https://datatables.net/) running on Indico?
I managed to install DataTables correctly (I think) by running:
npm install datatables.net
npm install datatables.net-dt
All good, and the table actually works just fine, but I can’t seem to get the styling working
I’m not sure if I’m supposed to install the .css file for it separately (supposedly they are embedded inside
datatables.net-dt , but are not working “out of the box”) and include it in the client folder and then refer to it in the webpack-bundles.json (recompile with the asset builder) and then inject it in code (via
self.inject_bundle('main.css', WPBase) or similar?)
This is how it looks like now (obviously the styles are not loaded for the DataTable):
Guys, I’m really stuck here Anyone?
I think I mentioned in the other thread that you need to inject both
Assuming you import it inside your
client/index.js, that should work.
If not I’d recommend you to put the code on GitHub so we can actually have a look - otherwise it’s really just a lot of guessing…
Yep, and I definitely appreciate you pitching in again, but I think this would be the “non-intended” way of doing it. Installing
datatables.net-dt is supposed to somehow autoinject the DataTables styles, I believe. My index.js file contains only these two lines:
, so I assume that by injecting it inside my plugin.py file with
self.inject_bundle('main.js', WPBase), that’ll somehow take care of loading the appropriate styles in the browser.
I’m clueless Don’t know enough about what’s going on behind the scenes in either DataTables and Indico when I use
I got it to work, almost 100%.
As you said, I had to include main.css via
self.inject_bundle('main.js', WPBase), but initially this was not working because my original imports:
are supposedly wrong (see this: https://gist.github.com/obonyojimmy/8cf71c7d6342c851c134289f936dca93).
I changed them to:
, and then recompiled the assets, and now it looks much better, but still not 100% (I am using the DataTables base style, and I am supposed to see alternating colors (grayish) for the even/odd rows):
None of us use this library so not really.
I’d use the browser’s developer tools to check if the styles are maybe overridden by something else.
It seems that a lot of the styles are applied correctly, but some or not. Not sure why. I’ll troubleshoot myself from here on, as this seems to be a non-Indico related issue. Thanks for helping me get DataTables up and running!
Finally got it working with all styles applied correctly. As soon as I get a bit of free time, I’ll post the entire procedure to getting DataTables up and running in Indico in a separate thread.
Thanks for all your help, @ThiefMaster!