Javascript & Searchable/Filtered tables

Hello Joe,

Yes, this is still possible.

The approach I’d recommend is to keep the table itself inside the article, but move the JavaScript logic into your Help Center theme instead of adding <script> directly to the article.

For example, add a class to the table in the article source:

<table class="searchable-table">
  ...
</table>

Then add something like this to your theme's script.js:

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.searchable-table').forEach(function (table) {
    const tbody = table.tBodies[0];
    if (!tbody) return;

    const search = document.createElement('input');
    search.type = 'search';
    search.placeholder = 'Search table...';
    search.className = 'table-search';

    table.parentNode.insertBefore(search, table);

    search.addEventListener('input', function () {
      const query = search.value.toLowerCase();

      Array.from(tbody.rows).forEach(function (row) {
        row.hidden = !row.textContent.toLowerCase().includes(query);
      });
    });
  });
});

You can then style the search field in style.css if needed.

This way, you don't need to rely on JavaScript embedded directly inside the article. Any table with the searchable-table class will automatically get its own search field.

Just keep in mind that you need access to edit the Help Center theme code for this approach.