How to use DataTables plugins in Bubble

To use DataTables in Bubble, you load the DataTables JS/CSS inside an HTML element, output your Bubble data as a plain HTML table, and initialize DataTables with a small JavaScript snippet. Bubble doesn’t support DataTables natively; you embed it manually.

What You Actually Do

You create a normal Bubble HTML element, place a basic HTML table inside it (rows populated by Bubble dynamic expressions), then run DataTables on that table using a standard script tag. Bubble allows JavaScript inside an HTML element, so you can initialize DataTables right there. This works because the table is rendered before the JavaScript runs.

• You do NOT need a plugin.
• You do NOT put the script inside the page header unless you want global loading.
• The key is that Bubble must output a finished HTML table before DataTables initializes.

Step-by-Step Setup

Put an HTML element on the page and paste the following, replacing Search for Things with your actual data source.

<!-- Load DataTables + jQuery -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- Build the table with Bubble dynamic data -->
<table id="mytable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Created</th>
    </tr>
  </thead>
  <tbody>
    <!-- Bubble will repeat this row -->
    <!-- Example: a Thing called UserRecord -->
    <tr>
      <td>{{Search for UserRecord's Name:formatted as text}}</td>
      <td>{{Search for UserRecord's Created Date}}</td>
    </tr>
    <!-- Bubble repeats the <tr> if you use "Repeating" in the HTML element via Expression -->
  </tbody>
</table>

<script>
// Wait until Bubble finishes drawing the element
$(document).ready(function() {
    $('#mytable').DataTable(); // Initialize DataTables
});
</script>

Important Clarification

Bubble’s HTML element can’t “loop” itself, so most developers generate table rows using “Repeating group → HTML table mode” technique: put a Repeating Group on the page, but inside each cell use an HTML element that outputs a single <tr>. Then place an outer HTML element above/below with the static <table> wrapper. DataTables only needs a real rendered table; it doesn't care how Bubble produced it.

• Make sure the table exists in the DOM before DataTables runs.
• If DataTables initializes too early, wrap your script in setTimeout with 100–200ms.