Sort any set of elements
Add filtering to elements in hard-to-reach places, like embedded Collection Lists.
- + Supports any collection of child elements, including Webflow Collection lists..
- > Supports embedded Collection Lists too.
- Executes once, on page load.
- Multiple sorting options;
- > + Sort on any text or date field you want.
- > + Sort ascending or descending.
Limitations;
- Since Webflow only emits 5 items in a nested collection list, we can only sort those 5. There may be hidden items that would be sorted in, had they been accessible.
DEMO
Below is a Collection List, containing a nested list on a Multi-Reference Field. That sub-list cannot normally be sorted in Webflow.
Here, we are sorting those sub-items by date, descending.
Vel
Apr 7, 2022
Molestias
Oct 13, 2022
Facilis Qui
Jul 4, 2023
Sequi Aspernatur Ex Voluptatem
Asperiores Id Quae
Dec 4, 2022
Excepturi Est Qui
Jan 6, 2023
Corrupti Mollitia Sint
Accusamus Facere Provident Consequuntur
Dec 4, 2022
Excepturi Est Qui
Sep 12, 2022
Qui Quas Explicabo Corporis
Corporis
No items found.
Libero Dolorum
Dec 4, 2022
Excepturi Est Qui
Jan 12, 2023
Optio
Apr 7, 2022
Molestias
How to implement
See the designer view of this page by clicking the button at the top.
Further notes & script examples are in the WFU docs.
Embed the WFU library as described in the docs, and then set your custom attributes;
On the Collection List element
Not the Collection List Wrapper.
Webflow Custom Attribute
Name
wfu-sort
Value
( optional ) Control the direction.
Webflow Custom Attribute
Name
wfu-sort-dir
Value
desc
( optional ) Control the sort type.
Webflow Custom Attribute
Name
wfu-sort-type
Value
date