Allow for changing filter logic
brenosilver opened this issue · 2 comments
Hi, I would like to have the ability to change the filter logic to accommodate different requirements. More precisely, I want the logic to compare using string.startsWith() instead of "===".
I do not want to use the built-in search box. I want to be able to search on any field from a single text box while using a dropdown to select which column to use.
I was able to achieve this by creating my own input field and updating the filterSelections object accordingly, however, the filter logic only does a comparison using "===" which is not suitable for searching.
Adding a new field into the columns array that accepts a function such as the example below would be very helpful.
let filterSelections = {col1: 123};
columns[
{
key: col1,
...
filterLogic: (value, searchTerm) => value.toString().toLowerCase().startsWith(searchTerm.toLowerCase())
}
]
// filterSelections will be updated inside SeachBox whenever the user
// types or selects the column in the dropdown field
<SearchBox {columns} bind:filterSelections />
<SvelteTable
{columns}
{rows}
rowKey="id"
bind:filterSelections
/>
The workaround I am using right now is to filter the actual data array outside the svelte table and then pass the filtered data to SvelteTable using rows={filteredData}. But this is a lot messier than the example above.
My proposal would be the easiest solution, but not necessarily the correct solution for the tool. This is due to the fact that Svelte-Table has very few customization options, and workarounds like these are the only way to achieve real-world requirements.
Another example of lack of customization options is that I cannot add my own custom search box to the header without replacing the entire thead/th and losing the sorting functionality.
I don't think using filter would be the way to do it since it is intentionally set to map to the dropdown in a 1:n selection.
However, the search feature would benefit from passing the search term into the function to allow something like startsWith since it requires both to run.
I will look to see if I can add this functionality through the searchValue function, but I'm worried that would add breaking changes. Adding a separate function expands the API and makes it more confusing, so I'll have to some balance there.
In the meantime you could use this "hack" to get around it
https://svelte.dev/repl/7f8c51cd691448dc89099249c958acf5?version=3.55.0
this uses the pipe character at the beginning of the string and also attaches it to the search term
let searchTitle = ""
$: search = {
title: "|" + searchTitle.toLowerCase()
}<input bind:value={searchTitle}/>
<SvelteTable columns={columns} rows={rows} bind:filterSelections={search}></SvelteTable>Regarding replacing the header for a specific column.
This is one area where I find the svelte framework itself has a bit of a shortcoming. The constraint is that the slots cannot be dynamically named. So you couldn't to something like slot="th:email". The best alternative to that is to use a component, which ads a bit of boilerplate.