JSFiddle - React, Tailwind, and code Playground

by frumpty

HTML

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
      "jquery": "https://esm.sh/[email protected]",
      "datatables.net-vue3": "https://unpkg.com/[email protected]/dist/datatables.net-vue3.mjs",
      "datatables.net": "https://cdn.datatables.net/1.13.6/js/jquery.dataTables.mjs",
      "datatables.net-bs5": "https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.mjs"
    }
  }
</script>


<div id="app">{{ message }}
<h3>
My Table!
</h3>
<DataTable :data="[[1, 2], [3,5], [5,7]]" class="display" id="myDt">
                                <thead>
                                    <tr><th>Col 1</th><th>Col Col 2</th></tr>
                                </thead>
                            </DataTable>
</div>

<script type="module">
  import { createApp } from 'vue'
  
  //remove datatable imports to see vue working
import DataTableLib from "datatables.net-bs5";
import DataTable from 'datatables.net-vue3'

DataTable.use(DataTableLib);


  const app = createApp({
    data() {
      return {
        message: 'Hello Vue and DataTable!'
      }
    }
  })
  
  app.component('DataTable',DataTable)
  
  app.mount('#app')
  
  console.log(DataTable)
  
  
</script>