Combining several filters

[jasperrooduijn]

Hi! First of all thanks for the great work! Really enjoy working with your plugin.

I have 2 select filters which i would like to combine / connect to each other together with the search filter. I build a POC where the filters work individually but the options of the filters should react on each other based on the available rows when data is filtered. Is there any demo or POC that i can look? In your documentation i cant find anything about combining multiple filters.

Thanks.

[st3v3y]

Hey @jasperrooduijn,

thank you for your feedback and your question.

As far as I understand your question, you simply want to have multiple filters on the same data/grid. This should work simply by defining multiple filters in the filters array prop.

Here an example where I combine 3 different types of filters (used in the demo of the GridCraft Homepage). This should work with any type of filters.

    let textSearch = "";    
    let filters: GridFilter[];
    $: filters = [
        {   
            key: "text-search", 
            columns: ["name", "total", "age"], 
            filter: (row: any, colKey:string) => { 
                // ...
            }
        },
        { key: "status-active", columns: "status", filter: (val: any) => { return val != "active" }, active: false },
        { key: "status-inactive", columns: "status", filter: (val: any) => { return val != "inactive" }, active: false },
        { key: "status-pending", columns: "status", filter: (val: any) => { return val != "pending" }, active: false },
        {   
            key: "progress", 
            columns: "progress", 
            filter: (val: any) => { 
               // ...
            }
        },
    ];

<Grid 
    bind:data 
    bind:filters />

Is this what you are looking for? If not, could you share a sveltelab code, or so? Let me know if you need more assistance or if that answered your question.

[st3v3y]

Check out the latest version 0.2.9. I did some work on the filters, maybe this also fixes your issue