Datatables

Multiple criteria filter

basic usage

nulla suspendisse potenti cras in purus eu magna vulputate luctus cum sociis natoque penatibus et magnis dis parturient medium
posuere felis sed lacus morbi sem mauris laoreet ut rhoncus aliquet medium
morbi a ipsum integer a nibh in quis justo maecenas rhoncus aliquam lacus morbi quis tortor id nulla ultrices medium
consectetuer eget rutrum at lorem integer tincidunt ante vel ipsum praesent blandit lacinia erat vestibulum low
purus phasellus in felis donec high
turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas rhoncus high
penatibus et magnis dis parturient montes nascetur ridiculus mus vivamus high
pellentesque viverra pede ac diam cras pellentesque volutpat dui maecenas tristique est et tempus semper est quam pharetra magna high
non quam nec dui luctus rutrum nulla tellus in sagittis dui vel nisl duis ac low
eget elit sodales scelerisque mauris sit amet eros suspendisse accumsan high
quis lectus suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas ut massa low
tincidunt nulla mollis molestie lorem quisque ut erat curabitur gravida nisi at nibh high
nec condimentum neque sapien placerat ante nulla justo aliquam quis medium
mus etiam vel augue vestibulum rutrum rutrum neque aenean auctor gravida sem medium
luctus et ultrices posuere cubilia curae mauris viverra diam vitae quam suspendisse potenti nullam porttitor lacus at turpis donec low
in faucibus orci luctus et ultrices posuere cubilia curae mauris viverra diam vitae quam medium
gravida nisi at nibh in hac habitasse platea dictumst aliquam augue quam sollicitudin vitae low
risus dapibus augue vel accumsan tellus nisi eu orci mauris lacinia sapien quis libero low
tempus vivamus in felis eu sapien cursus vestibulum proin eu mi nulla low
aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend luctus ultricies eu nibh quisque medium

<script lang="ts">
    import { type DataHandler, check } from '@vincjo/datatables'
    export let handler: DataHandler

    const filter = handler.createAdvancedFilter('columnName')
    const selected = filter.getSelected()
</script>

<button 
    on:click={() => filter.set('high', check.isEqualTo)}
    class:active={$selected.includes('high')}
>
    High priority
</button>

Advanced

Result
Code
Data

filter_list by Types

ID	Name	Type	Base stats
1	bulbasaur	grass / poison	45 hp 49 attack 49 defense 65 attspe 65 defspe 45 speed
2	ivysaur	grass / poison	60 hp 62 attack 63 defense 80 attspe 80 defspe 60 speed
3	venusaur	grass / poison	80 hp 82 attack 83 defense 100 attspe 100 defspe 80 speed
4	charmander	fire	39 hp 52 attack 43 defense 60 attspe 50 defspe 65 speed
5	charmeleon	fire	58 hp 64 attack 58 defense 80 attspe 65 defspe 80 speed
6	charizard	fire / flying	78 hp 84 attack 78 defense 109 attspe 85 defspe 100 speed
7	squirtle	water	44 hp 48 attack 65 defense 50 attspe 64 defspe 43 speed
8	wartortle	water	59 hp 63 attack 80 defense 65 attspe 80 defspe 58 speed
9	blastoise	water	79 hp 83 attack 100 defense 85 attspe 105 defspe 78 speed
10	caterpie	bug	45 hp 30 attack 35 defense 20 attspe 20 defspe 45 speed