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-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 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="table table-striped" :columns="columns" ref="myDt">
                                <thead>
                                    <tr>
                                      <th></th>
                                      <th></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}, {a: 5, b: 7, c: 33}
        ],
      columns: [
      	{data: 'a', title: 'Col1'},
        {data: 'b', title: 'Name2'}
      ]
    }
    },
    mounted(){
     ...