# How To: CSS Table with dynamic filtering and sorting

**URL:** <https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [December 10, 2021, 1:52pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784 "2021-12-10T13:52:15Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 10, 2021, 1:52pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/1 "2021-12-10T13:52:15Z")

</div>

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 🙂

Links:

- [divtable.com table styler](https://divtable.com/table-styler/)

- Experimental code to sort joined list by secondary joined list  
– [Link to use in External Code column](https://mcdarren.github.io/glide-jl-sort-by-keys-advanced/)  
– [Clone link](https://github.com/mcdarren/glide-jl-sort-by-keys-advanced)

- [Copyable Demo App](https://html-tables-concept.glideapp.io/)

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

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [December 10, 2021, 2:19pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/2 "2021-12-10T14:19:11Z")

</div>

Thanks @Darren_Murphy nice tutorial, very useful 👍

---

<div class="post-metadata">

**Author:** ![Andre\_Gindra1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andre_gindra1/32/25263_2.png) [@Andre\_Gindra1](https://community.glideapps.com/u/Andre_Gindra1)\
**Post date:** [December 10, 2021, 3:30pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/3 "2021-12-10T15:30:11Z")

</div>

Thanks Darren. Very useful! 👌👍

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [December 10, 2021, 3:56pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/4 "2021-12-10T15:56:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [December 10, 2021, 4:26pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/5 "2021-12-10T16:26:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 10, 2021, 11:28pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/6 "2021-12-10T23:28:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Eric\_Ruiz\_Molero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_ruiz_molero/32/15371_2.png) [@Eric\_Ruiz\_Molero](https://community.glideapps.com/u/Eric_Ruiz_Molero)\
**Post date:** [December 11, 2021, 1:12pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/7 "2021-12-11T13:12:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [December 12, 2021, 12:30am UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/8 "2021-12-12T00:30:00Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/a/ca538f33892aa9bf2ce4d5fe956e355c139abfc3.png)

---

<div class="post-metadata">

**Author:** ![rayo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rayo/32/91372_2.png) [@rayo](https://community.glideapps.com/u/rayo)\
**Post date:** [December 14, 2021, 9:25am UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/9 "2021-12-14T09:25:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 14, 2021, 9:52am UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/10 "2021-12-14T09:52:28Z")

</div>

> [@rayo](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [September 1, 2022, 7:48pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/11 "2022-09-01T19:48:13Z")

</div>

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.

- [Experimental code to sort joined list by secondary joined list](https://mcdarren.github.io/glide-jl-sort-by-keys-advanced/)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 1, 2022, 7:51pm UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/12 "2022-09-01T19:51:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [September 2, 2022, 1:27am UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/13 "2022-09-02T01:27:01Z")

</div>

> [@Eric\_Penn](#):
>
> Also this link does not work anymore.
> 
> - [Experimental code to sort joined list by secondary joined list](https://mcdarren.github.io/glide-jl-sort-by-keys-advanced/)

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [September 2, 2022, 1:34am UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/14 "2022-09-02T01:34:36Z")

</div>

> [@Jeff\_Hager](#):
>
> 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.

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? 🤔

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [September 2, 2022, 1:41am UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/15 "2022-09-02T01:41:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [September 7, 2022, 2:47am UTC](https://community.glideapps.com/t/how-to-css-table-with-dynamic-filtering-and-sorting/35784/16 "2022-09-07T02:47:17Z")

</div>

> [@Jeff\_Hager](#):
>
> 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.

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