Hack for sorting a table

Custom Coding
,
1

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.

5 Likes
2

Thanks @dcoletta! hope we will add sorting soon :slight_smile:

2 Likes
3

Great, that would be a good thing!

4

Hi Arthur… any progress on this point?
thx.

5

Hey @Spooky,

This is still a feature request. We have it in our plans but have not added it yet.

1 Like
6

Sorting seems to be one of the most important feature for table block. Almost every other platform provides this feature. Very sad to see Softr team’s inefficiency, for a feature requested, which has passed more than 2 years time, and still no clear picture for it’s update release. I hope Softr team will try their best to get it incorporated.

1 Like
7

For what it’s worth, I did come up with a better way to manage a sortable table that does not requiring hiding and showing different blocks: Sort a list block by a field whose name is specified in a URL querystring parameter

I have been using this in the app that runs the online in-store menu at my brother’s cannabis dispensary for some time now and it’s been quite reliable.

1 Like