How to use multiple filters

[JakeBriscoe]

I have multiple advanced filters for dynamic tags. I'm creating them in such a way that they have different .toString() results. When I filter using a combination of two filters, if I deselect all of the options for one of the filters both filters are being removed.

As an example if I filter by the color red and the shape circle, if I remove the red filter I still want the circle filter applied but it's also being removed.

Here's the relevant code. The selection and unselection is all done via advancedFilter.set()

const createFilterCallback = (tagCategoryId: string) => {
	const callback: Field<Employee> = (row) =>
		row.tags.filter((x) => x.tagCategoryId === tagCategoryId);

	callback.toString = () =>
		`function(row) { return row.tags.filter((x) => x.tagCategoryId === ${tagCategoryId}); }`;

	return callback;
};

let tagColumns = data.tagCategories.map((tagCategory) => {
	const callback = createFilterCallback(tagCategory.id);
	console.log(callback.toString());
	return {
		filter: handler.createAdvancedFilter(callback),
                 ...tagCategory,
	};
});

{#each tagColumns as tagColumn}
  {#each tagColumn.tags as tag}
    <button on:click={() => tagColumn.filter.set(tag.id, check.isEqualTo)}>{tag.name}</button>
  {/each}
{/each}

Here's some logging

const filterCount = handler.getFilterCount();
const firstFilter = tagColumns[0].filter.getSelected();
const secondFilter = tagColumns[1].filter.getSelected();

$: console.log($filterCount, $firstFilter, $secondFilter);

// 0, [], []
// 1, ['red'], []
// 2, ['red'], ['circle']
// 0, [], ['circle']

So the desired filter value is still in the filter.getSelected() but the handler.getFilterCount() is going to 0.

Thanks for your help 😊 let me know if you need any more information or anything

[JakeBriscoe]

Another question 🙂

After a form action my data is updated with $: data, handler.setRows(data.users);, currently the existing sorting is being ignored and the rows are random.

I would like to re-apply whatever the current sorting is to the updated data. I tried doing it like the below but it doesn't re-apply the sorting.

$: {
	handler.setRows(data.users);
	handler.applySort();
}

I also tried this, but the types don't match

const currentSort = handler.getSort();
$: {
	handler.setRows(data.users);
	handler.applySort($currentSort)
}

Is there a nice way to handle this? Thanks

[JakeBriscoe]

Here's an issue with the same behavior #18
Note I'm using version 1.12.1

[vincjo]

That's probably a bug, I need to make a repro.
The expected behaviour is:

• When you update data using setRows, the sort history is reapplied by default (last 3 sorts).

Normally there is no need to apply a sort unless you want a default sort once the data has been updated

[vincjo]

After a quick look, it appears everything is functional.

Client-side sorting should be reapplied automatically when data is updated.
The only thing to do is:

$: data, handler.setRows(data.users)

If this doesn't reapply sorts: there's a bug somewhere. It would be interesting to work on it.
Link to the issue: #40

[vincjo]

Thank you for sharing.

I have to make a repro for advanced filters applying to the same column, there are surely unsupported use cases

[vincjo]

There was a bug inside the FilterHandler in 1.12.3.
All filters were deleted indiscriminately. Fixed in 1.12.4. Sorry for the mess.

I'm now doing a repro to make sure everything is working normally.

[vincjo]

Seems to work fine
https://vincjo.fr/datatables/test/multiple-filters

It would be great to be able to name the filters instead of tweaking the Field argument (will think about it later)

<script lang="ts">
    import type { DataHandler } from '$lib/local'
    
    export let handler: DataHandler
    export let types: string[]

    const filter1 = handler.createAdvancedFilter('type')
    const filter2 = handler.createAdvancedFilter((row) => row.type)

    const selected1 = filter1.getSelected()
    const selected2 = filter2.getSelected()
</script>

<!-- filter 1 -->
{#each types as type}
    <button on:click={() => filter1.set(type)} class:selected={$selected1.includes(type)}>
        {type}
    </button>
{/each}
    
AND

<!-- filter 2 -->
{#each types as type}
    <button on:click={() => filter2.set(type)} class:selected={$selected2.includes(type)}>
        {type}
    </button>
{/each}