Add example for DataTables

[nderwin]

It would be great if there was an example of how to integrate DataTables with the bundler. So far, my attempts have not been successful.

Adding

        <dependency>
            <groupId>org.mvnpm</groupId>
            <artifactId>datatables.net</artifactId>
            <version>2.1.7</version>
            <scope>provided</scope>
        </dependency>

to the pom, then trying to create a new DataTable in my Qute template:

    <script type="text/javascript">
        let table = new DataTable('#myTable');
    </script>

gives me a console error that DataTable is not defined. I also have

quarkus.web-bundler.dependencies.auto-import=all

in my config, and it's generating a main.js file with this line in it

import "datatables.net";

so not sure why it's not working. By comparison, Bootstrap, HTMX work perfectly without any additional configuration.

[nderwin]

Might have found a workaround, though not sure if it's correct.

Define a app.js file in src/main/resources/web/app, with this content:

import DataTable from "datatables.net";

window.DataTable = DataTable;

Then, to use it, add this bit to the page:

    <script type="module">
        let table = new DataTable('#myTable');
    </script>

Note the script type of module instead of text/javascript.

[ia3andy]

Hey @nderwin,

Any reason to create the table from the html instead of from the script as described in the datatable doc:

Using: datatables.net-dt

import DataTable from 'datatables.net-dt';
 
let table = new DataTable('#myTable');

Regarding auto-import=all it depends on how the library is declaring the package.json and then how it binds itself to the dom or to the html page. Htmx does not need any javascript to bind itself to the dom and has the right declaration in the package.json.

If you want to access the module from the html page, since we are using modules, they are isolated one from the other, this is why you had to pass your item through the window which is fine IMO, but better do it directly in the js if it's not expressly needed.

For future web-bundler, I might add the provided script as an import map so that it will be easier to access exported stuff from it (instead of using window). I need to investigate if that works correctly.

[nderwin]

@ia3andy I have it creating the table in the HTML where the <table> tag is; from what I understand, the app.js file is more of a global thing, and I plan on having multiple DataTable instances across the app I'm working on, so it seems like I should be defining those in their respective templates, rather than in a central, global, location... if that makes any sense (maybe if I had provided a reproducer, eh?).

[ia3andy]

That https://docs.quarkiverse.io/quarkus-web-bundler/dev/advanced-guides.html#qute-components might be a good way to deal with it.

Where is the data coming from?

[nderwin]

Right now, the data is just rendered in the page with Qute; for other instances, I will probably need to use a server side endpoint to fetch pages of data.

[ia3andy]

Right now, the data is just rendered in the page with Qute; for other instances, I will probably need to use a server side endpoint to fetch pages of data.

Ok, I think you should do it all from the .js file and either map the datatable to a class when it's rendered with Qute, or to an id if it's rendered from js, in both case that's a good pratice.

I am not sure if the datatable api allows to use a class to bind the table, if it doesn't, just iterate on the class elements.

[nderwin]

I believe it binds to an id instead of a class, which kinda makes sense, those should be unique where classes aren't, but 🤷

BTW, here's a reproducer showing how I have it currently working:
datatables-with-quarkus.zip - two different pages, localhost:8080/todos and localhost:8080/letters

I'll take a look at the components link to see if that works better. Feel free to close this if there are no actionable changes to make, and thanks for this extension, it is fantastic.

[ia3andy]

https://datatables.net/manual/api#Multiple-tables