How To: CSS Table with dynamic filtering and sorting

I’ve been asked a few questions about this one, so here is a tutorial that walks through the process step by step. The app I’m working on in the tutorial is copyable, so feel free to make your own copy (see link below).

enjoy :slight_smile:

Links:

Note that the experimental code column is removed from the copyable app, so the table isn’t sorted.

17 Likes

Thanks @Darren_Murphy nice tutorial, very useful :+1:

Thanks Darren. Very useful! :ok_hand::+1:

Thank you, Darren! Very clear and accessible!Thank you for spending your time on such a very useful guide!

Ill checked already, this way work perfect in Glide Apps, but in Glide Pages css not affecting the tabel.
May be have some difference how to use css in Glide Pages?

1 Like

Last time I check we still can’t use custom CSS in Glide Pages.

@ThinhDinh , when do you think CSS could work on Glide Pages? I may turn to Glide Apps to make HTML tables but I will lose the functionalities of Glide Pages :frowning:

I don’t work for Glide so I can’t say anything about an ETA, but they can still render HTML, just not CSS.

1 Like

Very helpful !
just wondering, the way this is done, the rows will always appear sorted according to sheet order right?

Without the experimental code column, yes.
Which is to say, they won’t be sorted at all.
That’s why I created the experimental code column. That allows you to control the ordering.

1 Like

Since some time has passed is there a way to sort the joined list using a native feature?

Also this link does not work anymore.

If you convert it to an array using a Split Text column (or just aquire it using a Lookup instead of a Joined List), then you can use the Sort Array plugin to sort it. Then you can convert that sorted array back to a Joined List.

1 Like

yeah, it does.
That’s the link you need to paste into an external code column. If you open that in a browser you’ll just get a blank screen.

If you want to clone it and make your own copy, you need a different link. I’ve edited the original post to make that clearer.

hmm, I’m not so sure about this. The Sort Array plugin just does a simple sort, whereas in this case a slightly more complex sort is required. That is, we are using a secondary array as the sort keys for the primary array. I don’t think this is possible with the plugin, but quite possibly I’m missing something? :thinking:

2 Likes

No, I agree with you. I was answering based purely on Eric’s question about sorting a joined list. I wasn’t looking at the context of the entire thread.

2 Likes

This does the trick though. My list is sorted alphabetically and the lookup saved a few columns.

2 Likes