How to use specific filter for specific row?

[azern32]

I'm sorry to ask, but is there any example on how to apply the filter

I have a column which the data is just 1 or 0, I want to create 2 checkboxes on the filter space to filter the data
From the advance filter page, it's not really clear how you can apply it to the datatable

Any example for it?

[vincjo]

Thx for asking.
I found an issue when a 0 value is passed to a filter. 0 is considered as nullish so it resets the filter instead of applying it.

I just fixed it and published 1.11.3

Your question raises an interesting point. Currently there is no support for a multi-criteria filter. A column can only be filtered by 1 modality.
it will be interesting to allow many criteria filter for the same column.

In the meantime, I suggest you using radio buttons.
That being said, if your column contains only 0s and 1s, it is possible to use checkboxes.
Made a small example to illustrate:
https://vincjo.fr/datatables/test/checkbox-filter

CheckboxFilter.svelte

<script lang="ts">
    import type { DataHandler } from '$lib/local'
    export let handler: DataHandler
    export let filterBy: string
    let filter_0 = false
    let filter_1 = false

    const setFilter = () => {
        if (filter_0 && filter_1 === false) {
            return handler.filter(0, filterBy)
        }
        else if (filter_0 === false && filter_1) {
            return handler.filter(1, filterBy)
        }
        return handler.filter(null, filterBy)
    }
</script>

<aside class="flex">
    <button on:click={() => { filter_0 = !filter_0; setFilter(); }}>
        <input type="checkbox" checked={filter_0} />
        [0]
    </button>

    <button on:click={() => { filter_1 = !filter_1; setFilter(); }}>
        <input type="checkbox" checked={filter_1} />
        [1]
    </button>
</aside>

[azern32]

Woah, thanks!!
I also just realized yesterday that the rows of <ThFilter />, I can just add a normal <th> between them if I need something different. So I guess I can just copy paste the content of that <aside/> to my <th>