JSFiddle - React, Tailwind, and code Playground
by tacman1123
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome!</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="importmap">
{
"imports": {
"jquery": "https://esm.sh/[email protected]",
"datatables.net": "https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.mjs",
"datatables.net-bs5": "https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.mjs"
}
}
</script>
<script type="module">
import bootstrap from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
import DataTable from 'datatables.net-bs5'
let el=document.getElementById('example');
let dt=new DataTable(el);
</script>
</head>
<body>
<h1>
Simple example, no plugins.
</h1>
<table id="example" class="datatables">
<thead>
<tr>
<th>abbr</th>
<th>name</th>
<th>number</th>
</thead>
<tbody>
<tr>
<td>Jan</td>
<td>January</td>
<td>1</td>
</tr>
<tr>
<td>Feb</td>
<td>February</td>
<td>2</td>
</tr>
<tr>
<td>Mar</td>
<td>March</td>
<td>3</td>
</tr>
<tr>
<td>Apr</td>
<td>April</td>
<td>4</td>
</tr>
<tr>
<td>May</td>
<td>May</td>
<td>5</td>
</tr>
<tr>
<td>Jun</td>
<td>June</td>
<td>6</td>
</tr>
<tr>
<td>Jul</td>
<td>July</td>
<td>7</td>
</tr>
...