Web Component DsSorter for sorting elements

lit-element, sorting, webcomponent
npm install ds-sorter@1.0.0



A web component for sorting elements

This web component follows the open-wc recommendations.


npm i ds-sorter


<script type="module">
  import 'ds-sorter/dist/ds-sorter.js';

  <!-- Put elements to be sorted here -->



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


Method Type
sort (): void


Event Description
ds-sort Fired after a sort has completed


Name Description
Content to sort


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.