es module build

[wdporter]

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]

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

[AllanJard]

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

[wdporter]

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]

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]

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]

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.