1.0.0 • Published 3 years ago
ds-sorter v1.0.0
\
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/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.
1.0.0
3 years ago