Dynamic table listing child pages — Confluence Cloud Macro

<style>
  tr.row-hidden {
    visibility: collapse;
  }
</style>

#set ($children = $ConfluenceManager.get("/wiki/api/v2/pages/$page.id/direct-children"))
#set ($format = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'")

<input
  type="text"
  id="filterInput"
  placeholder="Filter by name..."
  style="margin-bottom:10px;padding:5px;width:200px;border:2px solid #0B120E24;border-radius:4px;"
/>

<table class="aui aui-table-sortable" id="pagesTable" cellspacing="0" cellpadding="5" style="border:none;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Created Date</th>
      <th>Created By</th>
      <th>Labels</th>
    </tr>
  </thead>
  <tbody>
    #foreach ($child in $children.results)
      #set ($childPage = $ConfluenceManager.get("/wiki/api/v2/pages/$child.id?include-labels=true"))
      #set ($pageLink = "$childPage._links.base$childPage._links.webui")

      <tr>
        <td><a href="$pageLink" target="_blank">$childPage.title</a></td>
        <td>$DateUtils.parseDate($childPage.createdAt, $format)</td>

        #set ($isCurrentUser = $StringUtils.equals($user.accountId, $childPage.authorId))
        #if ($isCurrentUser)
          #set ($blueStyle = "aui-lozenge-inprogress")
          #set ($author = $user)
        #else
          #set ($blueStyle = "aui-lozenge-subtle")
          #set ($author = $ConfluenceManager.get("/wiki/rest/api/user?accountId=$childPage.authorId"))
        #end

        <td>
          <a href="${baseUrl}/people/${author.accountId}">
            <span class="aui-lozenge $blueStyle">@${author.displayName}</span>
          </a>
        </td>

        <td>
          #foreach ($label in $childPage.labels.results)
            <a href="${baseUrl}/search?product=confluence&labels=${label.name}">
              <span class="aui-lozenge aui-lozenge-subtle">$label.name</span>
            </a>
          #end
        </td>
      </tr>
    #end
  </tbody>
</table>

<script>
(function () {
  const input = document.getElementById("filterInput");
  const rows = document.querySelectorAll("#pagesTable tbody tr");

  input.addEventListener("input", function () {
    const filter = this.value.toLowerCase().trim();

    rows.forEach(row => {
      const cells = row.cells;
      const rowText = (
        cells[0].textContent + " " +
        cells[2].textContent + " " +
        cells[3].textContent
      ).toLowerCase();

      row.classList.toggle("row-hidden", !rowText.includes(filter));
    });
  });
})();
</script>