es module build - Githubissues

wdporter commented 2 years ago

Is the es module build hosted anywhere? I'd like to use it like this:

<script type="module">
  import DataTable from "/javascripts/datatables.net-vue.esm.js"
</script>

AllanJard commented 2 years ago

unpkg would have it: https://unpkg.com/datatables.net-vue3@1.0.0/dist/datatables.net-vue.esm.js .

AllanJard commented 2 years ago

The rest of DataTables doesn't yet support ES module loading. I'm working on that.

wdporter commented 2 years ago

I got this to work. at the top of your js I had to change it to

import { defineComponent, setBlockTracking, createElementVNode, normalizeClass, renderSlot } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

and then my html is:

<div id="app">
    <data-table :data="data" class="display"
    :options="{columns: [{title: 'A'}, {title: 'B'}]}">     
    <thead><tr><th>ab</th><th>cd</th></tr></thead>
    </data-table>
</div>

<script type="module">
import DataTable from "./vue3dt.esm.js" // my edited local copy of datatables.net-vue.esm.js .
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js" 
createApp({
    components: {
        DataTable
    },
    setup() {
        return {
            data: [[1,2], [3,4]]
        }
    },
}).mount('#app')
</script>

The result of the thead slot is unexpected, I get the text concatenated and then it's just added as textContent to the table element. No th elements were rendered until I supplied the columns options.

I'm not sure if I'm doing something wrong, or if it's not complete yet, or if the doco is wrong, or if I'm crazy for even trying this.

AllanJard commented 2 years ago

I don't see anything obviously wrong there. Can you give me a link to a test case showing the issue, perhaps on JSFiddle or some other code platform?

wdporter commented 2 years ago

https://oldman.neocities.org/data-tables-vue-es-module-build.html

it's more the fact that when I declare the <thead> element in the slot, I get the error message:
Uncaught TypeError: aoColumns[srcCol] is undefined
(but you don't see that in the codepen console, you need the browser console)

it's a bit moot when I can just define columns in the options, and remove the <thead>, but your readme says the <thead> should work. So I don't know if it's an error in the doc or in the js module.

AllanJard commented 2 years ago

Hah - generally when the docs and the code don't align, both are wrong ;-). In this case I believe that it should work with the thead defined in the template. That was certainly the intention! Thanks for the link - I'll look into it. In the meantime, good to hear you've got a workaround.

DataTables / Vue

es module build #4