Accent-insensitive filtering for tables and select components

App Building
1

Is there a way to make the 'includes' default filter for a table accent-insensitive? Similarly, when typing in a select component to filter the list, is there a way to do that that is accent-insensitive as well?

I am creating an app where the end-users are in Quebec, and I want them to be able to filter for, for example, "Eric" and get both "Eric" and "Éric" in their results; otherwise, we risk a lot of duplicate records being created. I know that for tables, this can be done by using a SQL query, but I'm trying to reduce the number of queries that need to run in the app, and I would still be looking for a solution for the select components.

2

Your question piqued my interest, and knowing there had to be some way to translate between accented and unaccented characters, I asked ChatGPT :smile: and it suggests:

function filterNames(input, names) {
    const searchTerm = input.trim().toLowerCase();
    return names.filter(name => {
        const normalized = name.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
        return normalized.toLowerCase().includes(searchTerm);
    });
}

const names = ["Eric", "Éric", "John", "Jane", "Alex"];
const filteredNames = filterNames("Eric", names);
return filteredNames; 
// Output: ["Eric", "Éric"]

I'm sure there are edge cases and it would probably be worth really digging into the normalize() details if you are going to go forward with it (e.g., there are four different "Unicode Normalization Forms" that can be passed and "NFD" is just one of them.

Anyway, hope this helps put you on a fruitful path...if nothing else, it's a breadcrumb for me if something like this comes up in my work!

3

Thanks. Unfortunately, I'm not sure how to implement this so it affects the built-in filters. For now, I've gone back to filtering my tables by rerunning the SQL query, since that's accent insensitive, but I haven't figured out a way to handle it for filtering in Select components.

4

Thanks @jg80 for the workaround! @LindenKel The built in filters cannot be adjusted in this manner. For custom filtering like this, your best bet would be to write your own filtering with the table api which includes the ability to manipulate the filterStack. Or filter on the backend, as you are doing.