Feature: Untemplate table header (#713)

src/pytest_html/resources/index.jinja2

@@ -26,15 +26,6 @@
         <td></td>
       </tr>
     </template>
-    <template id="template_results-table__head">
-      <thead id="results-table-head">
-        <tr>
-        {%- for th in table_head %}
-          {{ th|safe }}
-        {%- endfor %}
-        </tr>
-      </thead>
-    </template>
     <template id="template_results-table__body--empty">
       <tbody class="results-table-row">
         <tr id="not-found-message">
@@ -107,7 +98,15 @@
         {%- endfor %}
       </div>
     </div>
-    <table id="results-table"></table>
+    <table id="results-table">
+      <thead id="results-table-head">
+        <tr>
+        {%- for th in table_head %}
+          {{ th|safe }}
+        {%- endfor %}
+        </tr>
+      </thead>
+    </table>
   </body>
   <footer>
     <div id="data-container" data-jsonblob="{{ test_data }}"></div>

src/pytest_html/scripts/dom.js

@@ -37,9 +37,8 @@ const dom = {
         return envRow
     },
     getResultTBody: ({ testId, id, log, duration, extras, resultsTableRow, tableHtml, result, collapsed }) => {
-        const resultLower = result.toLowerCase()
         const resultBody = templateResult.content.cloneNode(true)
-        resultBody.querySelector('tbody').classList.add(resultLower)
+        resultBody.querySelector('tbody').classList.add(result.toLowerCase())
         resultBody.querySelector('tbody').id = testId
         resultBody.querySelector('.collapsible').dataset.id = id
 

src/pytest_html/scripts/main.js

@@ -28,49 +28,51 @@ const renderStatic = () => {
     renderEnvironmentTable()
 }
 
+const addItemToggleListener = (elem) => {
+    elem.addEventListener('click', ({ target }) => {
+        const id = target.parentElement.dataset.id
+        manager.toggleCollapsedItem(id)
+
+        const collapsedIds = getCollapsedIds()
+        if (collapsedIds.includes(id)) {
+            const updated = collapsedIds.filter((item) => item !== id)
+            setCollapsedIds(updated)
+        } else {
+            collapsedIds.push(id)
+            setCollapsedIds(collapsedIds)
+        }
+        redraw()
+    })
+}
+
 const renderContent = (tests) => {
     const sortAttr = getSort(manager.initialSort)
     const sortAsc = JSON.parse(getSortDirection())
     const rows = tests.map(dom.getResultTBody)
     const table = document.getElementById('results-table')
-    const tableHeader = document.getElementById('template_results-table__head').content.cloneNode(true)
+    const tableHeader = document.getElementById('results-table-head')
 
-    removeChildren(table)
+    const newTable = document.createElement('table')
+    newTable.id = 'results-table'
+
+    // remove all sorting classes and set the relevant
+    findAll('.sortable', tableHeader).forEach((elem) => elem.classList.remove('asc', 'desc'))
+    tableHeader.querySelector(`.sortable[data-column-type="${sortAttr}"]`).classList.add(sortAsc ? 'desc' : 'asc')
+    newTable.appendChild(tableHeader)
 
-    tableHeader.querySelector(`.sortable[data-column-type="${sortAttr}"]`)?.classList.add(sortAsc ? 'desc' : 'asc')
-    table.appendChild(tableHeader)
     if (!rows.length) {
         const emptyTable = document.getElementById('template_results-table__body--empty').content.cloneNode(true)
-        table.appendChild(emptyTable)
+        newTable.appendChild(emptyTable)
+    } else {
+        rows.forEach((row) => {
+            if (!!row) {
+                findAll('.collapsible td:not(.col-links', row).forEach(addItemToggleListener)
+                newTable.appendChild(row)
+            }
+        })
     }
 
-    rows.forEach((row) => !!row && table.appendChild(row))
-
-    findAll('.sortable').forEach((elem) => {
-        elem.addEventListener('click', (evt) => {
-            const { target: element } = evt
-            const { columnType } = element.dataset
-            doSort(columnType)
-            redraw()
-        })
-    })
-
-    findAll('.collapsible td:not(.col-links').forEach((elem) => {
-        elem.addEventListener('click', ({ target }) => {
-            const id = target.parentElement.dataset.id
-            manager.toggleCollapsedItem(id)
-
-            const collapsedIds = getCollapsedIds()
-            if (collapsedIds.includes(id)) {
-                const updated = collapsedIds.filter((item) => item !== id)
-                setCollapsedIds(updated)
-            } else {
-                collapsedIds.push(id)
-                setCollapsedIds(collapsedIds)
-            }
-            redraw()
-        })
-    })
+    table.replaceWith(newTable)
 }
 
 const renderDerived = () => {
@@ -108,6 +110,16 @@ const bindEvents = () => {
     findAll('input[name="filter_checkbox"]').forEach((elem) => {
         elem.addEventListener('click', filterColumn)
     })
+
+    findAll('.sortable').forEach((elem) => {
+        elem.addEventListener('click', (evt) => {
+            const { target: element } = evt
+            const { columnType } = element.dataset
+            doSort(columnType)
+            redraw()
+        })
+    })
+
     document.getElementById('show_all_details').addEventListener('click', () => {
         manager.allCollapsed = false
         setCollapsedIds([])