https://github.com/markmead/alpinejs-sort
Sort data in Alpine JS without writing any JavaScript 🦜
https://github.com/markmead/alpinejs-sort
alpine-js alpinejs javascript javascript-sorting sortable sorting
Last synced: 10 months ago
JSON representation
Sort data in Alpine JS without writing any JavaScript 🦜
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-sort
- Owner: markmead
- License: mit
- Created: 2023-03-14T13:40:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:14:16.000Z (11 months ago)
- Last Synced: 2025-03-24T20:12:30.598Z (10 months ago)
- Topics: alpine-js, alpinejs, javascript, javascript-sorting, sortable, sorting
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/sort
- Size: 19.5 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Sort
Sort data in Alpine JS without writing any JavaScript 🦜
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D alpinejs-sort
npm install -D alpinejs-sort
```
```js
import Alpine from 'alpinejs'
import sort from 'alpinejs-sort'
Alpine.plugin(sort)
Alpine.start()
```
## Examples
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._
### Simple Array
```html
Asc
Desc
-
```
Here we simply pass `asc` or `desc` as the array does not contain objects.
### Array of Objects
```html
Title (Asc)
Title (Desc)
-
```
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`.
### Array of Objects (Nested)
```html
Please select
Title (Asc)
Title (Desc)
-
```
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 the `title` object.
## Stats
