How To: CSS Table with dynamic filtering and sorting

Tutorials
#1

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.

15 Likes
How I can make these tables? There is something like QuickChart.io?
There is any table generator like QuickChart?
⚡ Rich Text > Actions!
Is it possible color a label by value
Filtering – seperate screen
How to create a component table with more columns
Filtering tables
Filtering – seperate screen
#2

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

#3

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

#4

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

#5

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
#6

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

#7

@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:

#8

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

image
image1572×908 120 KB

1 Like
#9

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

#10

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