<ds-sorter>
A web component for sorting elements
This web component follows the open-wc recommendations.
Installation
npm i ds-sorterUsage
<script type="module">
import 'ds-sorter/dist/ds-sorter.js';
</script>
<ds-sorter>
<!-- Put elements to be sorted here -->
</ds-sorter>API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
by |
by |
string |
A list of comma-separated rules to sort by in order of precedence. Specify attributes by name (e.g. "href"). If specifying a property, prepend with "." (e.g. ".innerText"). You can use nested properties as well (e.g. ".dataset.row"). Optionally, if you'd like to reverse a rule relative to the others, prepend a ">" (e.g. "href, >.innerText"). Finally, if you'd like to get a value of a descendant of the sorted element, wrap a selector in braces before the value and modifiers (e.g. {div label input} .checked). |
|
comparator |
((a: HTMLElement, b: HTMLElement) => number) | undefined |
undefined | Custom comparison function for sorting | |
descending |
descending |
boolean |
false | Sort in descending order (else ascending is default) |
random |
random |
boolean |
false | If present, sorts randomly |
rules |
rules |
Rule[] |
[{"key":["innerText"]}] | A list of rule objects to sort the elements by. Refer to Rule interface for properties. |
Rule Interface
| Property | Type | Description |
|---|---|---|
key |
string | string[] |
Attribute name, or array representing a path of properties. (e.g. el.innerText -> ['innerText'] or el.someObj.someChild.someGrandchild -> ['someObj', 'someChild', 'someGrandchild']) Note: Changes to values of sorted attributes will trigger a re-sort. Changes to sorted properties will not. |
selector |
string? |
Selector for descendant to get attribute/property off of |
reverse |
string? |
If true, sort in reverse order relative to the global sort direction |
Methods
| Method | Type |
|---|---|
sort |
(): void |
Events
| Event | Description |
|---|---|
ds-sort |
Fired after a sort has completed |
Slots
| Name | Description |
|---|---|
| Content to sort |
Contributing
Feel free to create tickets for bugs or feature requests, or to submit PRs. Please see CONTRIBUTING.md for more information about developing in ds-sorter.
