Persistent filterBuilder on TableHandler

[MrVauxs]

When building a modal containing various filters, I have come to a snag. The modal is recreated on each render, creating a new instance of any filters defined therein. TableHandler does not have any prior knowledge of those previous filters, making it impossible to toggle previous filters on or off.

It would be great to have something akin to a .filterBuilders property on the TableHandler class, which keeps the built filters on itself. It would probably have to be an Array or Map, given TableHandler supports multiple filters on the same property, so no Record types.

It would also be great to give filters an identifier, so in an event a duplicate filter is created, it is reused rather than made again. So if you make an table.createAdvancedFilter("sources" , check, { id: "sourceSearch" });, it would grab any previously made sourceSearch filters from the TableHandler class, rather than creating a new one and causing issues if you already had filters linked to it.

[MrVauxs]

Here is an example implementation of what I mean

import type { AdvancedFilterBuilder, Check, FilterBuilder, Row } from "@vincjo/datatables";
import { TableHandler } from "@vincjo/datatables";
import { SvelteMap } from "svelte/reactivity";

class TablePersistent<T extends Row> extends TableHandler<T> {
	filterBuilders = new SvelteMap<string, FilterBuilder<T>>();
	advancedFilterBuilders = new SvelteMap<string, AdvancedFilterBuilder<T>>();

	override createFilter(key: keyof T, check?: Check, id?: string) {
		if (id) {
			const existing = this.filterBuilders.get(id);
			if (existing) return existing;
		}

		const filterKey = String(id || this.filterBuilders.size + 1);
		const filter = super.createFilter(key, check);
		this.filterBuilders.set(filterKey, filter);
		return filter;
	}

	override createAdvancedFilter(key: keyof T, check?: Check, id?: string) {
		if (id) {
			const existing = this.advancedFilterBuilders.get(id);
			if (existing) return existing;
		}

		const filterKey = String(id || this.advancedFilterBuilders.size + 1);
		const filter = super.createAdvancedFilter(key, check);
		this.advancedFilterBuilders.set(filterKey, filter);
		return filter;
	}
}

export { TablePersistent };

[vincjo]

Interesting.
This is what the FilterHandler do under the hood. Defining an id per each filter created using table.createFilter() / table.createAdvancedFilter()

It is not exposed to the api (so we don't have to define a name for any filter).

In your context is it possible to create the filter in the button that open the modal instead of inside the modal ?

<script>
    const filter = table.createAdvancedFilter(params)
</script>

<button onclick={() => modal.open(Component, filter)}>
    Filter...
<button>

This way the modal would have the proper table state.

[MrVauxs]

It would require having to pass every single filter individually and make it kind of impossible to make generic filter modals. So no. The implementation I provided as an example is doing me well already.

It would be really nice to not have to keep everything related to the TableHandler class in the same file. Passing props around just turns into prop drilling and very brittle components.

[vincjo]

I agree with your suggestion. The next major release will be an opportunity to revise some API designs. I start its development as soon as Svelte 6 is announced