Fearture request: Sortable table html export.

[dbojan]

Hi. Would it possible to add another option to html export, that would make the table sortable? Something like this https://www.w3schools.com/howto/howto_js_sort_table.asp. So users can sort the table by clicking on header row, without editing it.

Thanks.

[dbojan]

this javascript could be used, without modifying <table> tag: https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript/77084048#77084048

<script>
window.onload=function(){ 
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));

}
</script>

and style css to have mouse change to pointer when hover over top row (and add optionally add some color):

<style>
table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}
</style>

[dbojan]

css with color, alternating rows:

    <style>
        table {
            border-collapse: collapse;

            /* width: 100%; */
        }
          
        th, td {
            text-align: left;
            padding: 8px;
		border: 1px solid green;
        }

	th {
            cursor: pointer;
            text-decoration: underline;
	}	
          
        tr:nth-child(even) {
            background-color: Beige;
        }
    </style>