File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
 
<body>
  <table class="display nowrap" style="margin:auto;width:100%" id="itables_823f466d_970d_4553_965b_7f4e22937b34">
    <thead>
      <tr>
        <th></th>
        <th>region</th>
        <th>country</th>
        <th>capital</th>
        <th>longitude</th>
        <th>latitude</th>
        <th>flag</th>
      </tr>
      <tr>
        <th>code</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
 
 
  <link href="https://www.unpkg.com/dt_for_itables@2.0.10/dt_bundle.css" rel="stylesheet" />
  <script type="module">
    import { DataTable, jQuery as $ } from 'https://www.unpkg.com/dt_for_itables@2.0.10/dt_bundle.js';
 
    document.querySelectorAll("#itables_823f466d_970d_4553_965b_7f4e22937b34:not(.dataTable)").forEach(table => {
      // Define the table data
      const data = [["AW", "Latin America & Caribbean ", "<a href=\"https://en.wikipedia.org/wiki/Aruba\">Aruba</a>", "<a href=\"https://en.wikipedia.org/wiki/Oranjestad\">Oranjestad</a>", -70.0167, 12.5167, "<a href=\"https://flagpedia.net/aw\"><img src=\"https://flagpedia.net/data/flags/h80/aw.webp\" alt=\"Flag of Aruba\"></a>"]];
 
      // Define the dt_args
      let dt_args = { "scrollX": true, "layout": { "topStart": null, "topEnd": null, "bottomStart": null, "bottomEnd": null } };
      dt_args["data"] = data;
 
      let dt = new DataTable(table, dt_args);
      setTimeout(() => {
        console.log("Adjusting the columns");
        dt.columns.adjust();
      }, 300);
 
    });
  </script>
</body>
 
</html>
CSSSaved
 
​
JavaScriptSaved
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers