
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
alpinejs-sort
Advanced tools
Sort data in Alpine JS without writing any JavaScript 🦜
<script
defer
src="https://unpkg.com/alpinejs-sort@latest/dist/sort.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
yarn add -D alpinejs-sort
npm install -D alpinejs-sort
import Alpine from 'alpinejs'
import sort from 'alpinejs-sort'
Alpine.plugin(sort)
Alpine.start()
In all of these examples asc
is the default, but this can be changed through
Alpine JS.
You can move the x-sort
onto the same element as the x-data
if you wish.
<div x-data="{ items: ['D post', 'A post', 'C post', 'B post'], type: 'asc' }">
<select x-model="type">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
<ul x-sort.items="type">
<template x-for="item in items">
<li x-text="item"></li>
</template>
</ul>
</div>
Here we simply pass asc
or desc
as the array does not contain objects.
<div
x-data="{
items: [
{ title: 'D post' },
{ title: 'A post' },
{ title: 'C post' },
{ title: 'B post' }
],
type: 'asc.title'
}"
>
<select x-model="type">
<option value="asc.title">Title (Asc)</option>
<option value="desc.title">Title (Desc)</option>
</select>
<ul x-sort.items="type">
<template x-for="item in items">
<li x-text="item.title"></li>
</template>
</ul>
</div>
Here we pass asc.title
or desc.title
as we want to sort on an object
property. This translate to:
Sort by asc or desc order based on the value of
title
.
<div
x-data="{
items: [
{ title: { main: 'D post', sub: 'D' } },
{ title: { main: 'A post', sub: 'A' } },
{ title: { main: 'C post', sub: 'C' } },
{ title: { main: 'B post', sub: 'B' } }
],
type: 'asc.title.main'
}"
>
<select x-model="type">
<option value="">Please select</option>
<option value="asc.title.main">Title (Asc)</option>
<option value="desc.title.main">Title (Desc)</option>
</select>
<ul x-sort.items="type">
<template x-for="item in items">
<li x-text="item.title.main"></li>
</template>
</ul>
</div>
This is the same logic as the previous example.
The nesting should go as far as you need! item.title.main.translated.en
? Go
for it.
Here we pass asc.title.main
or desc.title.main
as we want to sort on a
nested object property. This translate to:
Sort by asc or desc order based on the value of
main
in thetitle
object.
FAQs
Sort data in Alpine JS without writing any JavaScript 🦜
The npm package alpinejs-sort receives a total of 4 weekly downloads. As such, alpinejs-sort popularity was classified as not popular.
We found that alpinejs-sort demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.