<ds-sorter>

A web component for sorting elements

This web component follows the open-wc recommendations.

Installation

npm i ds-sorter

Usage

<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.