Sortboard

An small library for easy sorting and filtering of elements.

Sortboard is small library for sorting and filtering HTML elements which uses CSS3 matrix() and scale() transform functions. It supports RegEx filters and it's responsive by default.

🎉 View demo on Codepen

Install

Yarn

yarn add sortboard --dev

NPM

npm install sortboard --save-dev

The UMD build is also available on unpkg.

<script src="https://unpkg.com/sortboard/src/sortboard.umd.min.js"></script>

You can use the library via window.sortboard

Usage

Define some list. For example an ul with li child elements, then set your filters in each li element with the data-filter attribute. It can add several filters by element separated by whitespace.

Typescript:

import { sortboard, Sortboard, Listener } from 'sortboard'

const sb = sortboard({
  container: '#mylist',
  selector: 'li'
})

const onEvent: Listener = () => console.log('ok!')
sb.on('filter', onEvent)

sb.filter('programing front-end')

// Or filter using a RegEx
sb.filter(/(webdesign|illustration)/)

Markup:

<ul id="mylist">
  <li data-filter="programing"></li>
  <li data-filter="programing back-end"></li>
  <li data-filter="programing front-end UX"></li>
  <li data-filter="graphic-design illustration"></li>
  <li data-filter="webdesign front-end"></li>
  <li data-filter="graphic-design printing"></li>
</ul>

API

Options

• container : The container of elements.
• selector : The query selector for each element.
• gutter : The margin for each element defined in pixels. Default is 10 pixels.
• resetFilterValue : The reset filter value used by reset() method. Default is all.
• hiddenClass : Class name for hidden elements. Default is .sortboard-hidden class name.
• matchedClass : Class name for matched elements. Default is .sortboard-matched class name.

Methods

• filter( string | RegExp ) : It's string or RegExp regular expresion pattern to filter. Which should match to data-filter attribute for each element to searching.
• reset() : Reset the elements which uses resetFilterValue option for resetting.
• sort() : Sort the element positions in the container. Sort method is called after the filter() method and in each trigger of window.resize event.

Events

filter

Trigger when filter is completed.

Passed params:

• matchedElements: An array with all matched elements.
• restElements: An array with the rest (not matched) elements.
• filterValue: A string with the current filter value used.

sb.on('filter', (matchedElements, restElements, filterValue) => {})

sort

Trigger when sort is completed.

sb.on('sort', () => {})

Development

yarn start

Contributions

Feel free to send some pull request or issue.

License

MIT license

© 2014-present José Luis Quintana