JSFiddle - React, Tailwind, and code Playground

by frumpty

HTML

<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</head>

<body>
<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>
<data-table :data="table_data" class="display" :columns="columns">
                                <thead>
                                    <tr>
                                      <th>Col 1</th>
                                      <th>Col Col 2</th>
                                    </tr>
                                </thead>
                            </data-table>
</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!',
        table_data: [
        	{a: 1, b: 3}, {a: 3, b: 5}, {a: 5, b: 7}
        ],
      columns: [
      	{data: 'a'},
        {data: 'b'}
      ]
    }
    }
  })
  
  app.component('DataTable', DataTable)
 ...