Option to sort data alphabetically

[tmcmillantx]

I have a grid of logos based on an array of data that currently can be sorted by category. The partial code below has the main functionality and everything is working as it should-

<section class="logo-grid-section-{{ name }}" x-data="loadLogos()">
  <div x-data="{ tab: 'all' }">
    <div class="search-filter">
      <div class="search">
        <input type="search" id="filters-search-input" placeholder="Search" x-ref="searchField" x-model="search" x-on:click="viewPage(0)" x-on:keydown.window.prevent.slash=" viewPage(0), $refs.searchField.focus()" />
      </div>
      <div class="filter" x-data="{ isOpen: false}">
        <button class="filter-btn" @click="isOpen = !isOpen" @keydown.escape="isOpen = false">
          <span>Filter</span><span><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z" class="heroicon-ui"></path></svg></span>
        </button>
        <ul class="sort-options" x-show="isOpen" @click="isOpen = false" x-transition>
          <li @click.prevent="tab = 'all'" :class="{ 'active' : tab === 'all' }">All</li>
          <li @click.prevent="tab = 'sector_advisors'" :class="{ 'active' : tab === 'sector_advisors' }">Sector Advisors</li>
          <li @click.prevent="tab = 'expert_resource_pool'" :class="{ 'active' : tab === 'expert_resource_pool' }">Expert Resource Pool</li>
          <li @click.prevent="tab = 'affiliates'" :class="{ 'active' : tab === 'affiliates' }">Affiliates</li>
        </ul>
      </div>
    </div>
    <div class="logo-container">
      <template x-for="item in filteredLogos" :key="index">
        <div class="logo-img" x-show="tab === item.cat || tab === item.cat2 || tab === 'all'" x-transition.duration.500ms>
          <a :href="`${item.link}`" :target="'_blank'"><img :src="`${item.image}`" :alt="`${item.alt}`"></a>
        </div>
      </template>
    </div>

If I add another list item for the alphabetical option, would it be possible to sort the logo divs based on the item.title in the array? If so, can it be incorporated into the current x-show in the template?
Or another option if easier...would it be possible to list them alphabetically when the "All" tab is shown?
Thanks.
Terry

[SimoTod]

x-for="item in filteredLogos.sort((a, b) => (a.name > b.name) - (a.name < b.name))"

[tmcmillantx]

Thanks!