List Filters

[Smith-Chris1]

First - I Love this datatable and thank you for all the support.

Is there a way to do either of the following:

1. List each filter parameter - I see a getFilterCount that shows how many filters are applied but I want to see what each filter is.
2. Clear a single filter when the filter count is greater than 2?

[vincjo]

I'm glad you like it, thx.

For now it is possible to clear filters individually. Example:

 handler.filter(undefined, 'columnName') 

Setting undefined as value will remove that filter applied on columnName

All the filters are registered into an internal writable store which is not exposed in the API. I could add a getter to access them if it's useful.

Can you specify the need so that I adapt the output (as it is, the store is not very usable on the UI side)

[Smith-Chris1]

Thank you for your help and my apologies for my delayed response. Here's what I'm trying to do:

I'm setting a filter like this: handler.filter('text', (row) => row['location'][title], check.isEqualTo)

then allow the user to clear that filter with a clear button that is mapped to the identifier from the handler.filterHandler.filters object: handler.filter(undefined, row => row['location'][title])

However, all of my filters are being cleared like this - even ones that are in a different column.

[vincjo]

Ok I understand.

I'm going to create a setter for filter, to access a clear method Something like:

const filter = handler.createFilter( filterBy: Field, check.isEqualTo )

filter.set( value )
filter.clear()

Also this change will probably come with a getter for filters store (but not exactly the one currently used internally).

Working on it

[Smith-Chris1]

You are amazing - thank you!

[vincjo]

Hello @Smith-Chris1

There is a first implementation of what we talked about just published in v1.12.4 I can't properly document it on the current site, which I'm updating for the next major release.

So here are some explanations:

handler.createFilter( filterBy, comparator )

<script>
    import { check } from '@vincjo/datatables'
    export let handler
    const filter = handler.createFilter( 'first_name', check.startsWith)
    let value = ''
    filter.on('clear', () => value = '')
</script>

<input type="text" bind:value on:input={() => filter.set(value)} />
{#if value}
    <button on:click={() => filter.clear()}>Clear</button>
{/if}

handler.getFilters()

<script>
    export let handler
    const filters = handler.getFilters()
</script>

{#each $filters as filter}
    {@const { filterBy, check, value } = filter}
    {filterBy} {check} {value} <!-- first_name startsWith value -->
{/each}

You'll find a live example bellow: https://vincjo.fr/datatables/test/filter-list

In this example, ThFilter.svelte and Filters.svelte are the custom components implementing the new features.

[Smith-Chris1]

This is fantastic - thank you. Works as I expected it to.