I really needed to be able to sort a table by column. Here’s my hack.
Screen recording: Hacked Sorting in a Table block - Descript
How it works: there are actually two table blocks on this page, one that sorts by strain and one that sorts by name. When the user clicks on the buttons, it hides one and shows the other.
I made the buttons with Shoelace: A forward-thinking library of web components.. I considered putting sort buttons on the table column headers, but it seemed like it was going to be more confusing to put them there given that I only wanted to sort by two columns, not all of them.
Code:
<sl-radio-group id="sortOrder" label="Sort By" value="Strain">
<sl-radio-button value="Strain" size="medium">Strain</sl-radio-button>
<sl-radio-button value="Name" size="medium">Name</sl-radio-button>
</sl-radio-group>
<script>
addEventListener('DOMContentLoaded', (event) => {
const sortOrder = document.getElementById("sortOrder");
const tableSortedByName = document.getElementById("table-sorted-by-name");
const tableSortedByStrain = document.getElementById("table-sorted-by-strain");
tableSortedByName.style.display = "none";
addEventListener('sl-change', (e) => {
tableSortedByName.style.display = e.target.value === "Name" ? "block" : "none";
tableSortedByStrain.style.display = e.target.value === "Strain" ? "block": "none";
});
});
</script>
Problems: one minor problem is that the initial display is glitchy, but it settles down. The other problem, possibly bigger, is that if there are more records in the table than whatever the table blocks are set to display (50 in this case), then the user might think that they are resorting the same exact set of records, but in fact they are displaying the first 50 records of the full list as sorted by the selected sort field, which isn’t the same set of records in both sort orders.
But this approach will probably make my customer happy.
