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
yarn add sortboard --dev
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
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>
- 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 isall
. - hiddenClass : Class name for hidden elements. Default is
.sortboard-hidden
class name. - matchedClass : Class name for matched elements. Default is
.sortboard-matched
class name.
- filter( string | RegExp ) : It's string or
RegExp
regular expresion pattern to filter. Which should match todata-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 ofwindow.resize
event.
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) => {})
Trigger when sort is completed.
sb.on('sort', () => {})
yarn start
Feel free to send some pull request or issue.
MIT license
© 2014-present José Luis Quintana