Skip to content

Latest commit

 

History

History
62 lines (45 loc) · 3.2 KB

README.md

File metadata and controls

62 lines (45 loc) · 3.2 KB

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