Can't sort my dynamic list based on reference field?

Hey there!

I’m hoping someone can help me figure this one out. Seems like a bug, but definitely wouldn’t put it past user error either. :wink:

I set up a scratch database to make sure I can do what I need to do for a client through Webflow and am running into a roadblock. I’m using a single reference field for one of my collection items and I want to sort the list with that item, but it’s not showing that item under the sort area?

Specifically, I want to sort a list of people by the country they live in (and the countries are set up in a separate collection and pointed to via a reference field).

Here’s a screen video showing first that the reference item is under “Country” but then when I go to the sort box for the dynamic list, it doesn’t show country to sort by?

How would I sort this list by country when the countries are in another collection?

Thank you!

Here’s my share link (it’s the page under “Map > Europe > Sort by Country tab”):
https://preview.webflow.com/preview/continuum-teachers?preview=475d646093aea2761116ba54d72886b2

You can display all, then use isotope to filter them. Search forum for isotope filtering tutorial.

I looked at isotope, and it looks great, but beyond what I’m needing right now … All I need is to be able to order the list by the “country” column. Would I still need isotope to do that?

You cannot use the Webflow Designer settings panel to sort by reference collection field. See official responses here

You can use custom code to sort instead:

var $countryTab = $('.w-tab-pane[data-w-tab="State"]');
var $dynList = $('.w-dyn-items', $countryTab);
var $dynItems = $('.w-dyn-item', $countryTab);

$dynItems.sort(function(a,b){
  var aText = $(a).find('.text-block').first().text(),
	  bText = $(b).find('.text-block').first().text();

  if(aText > bText) return 1;
  if(aText < bText) return -1;
  return 0;
});

$dynItems.detach().appendTo($dynList);