Filtering

How to Implement Custom Filters

To implement custom filters in GridCraft, follow these steps:

Example Filters

Text Filter

Implement a filter that filters all data entries by entered search term.

<script>
    import { Grid, type GridFilter } from "@mediakular/gridcraft";

    interface Client {
        id: string;
        firstname: string;
        lastname: string;
        age: number;
    }

    export let data: PageData;
    let clients: Client[] = data.clients;
    
    let textSearch = "";
    
    let filters: GridFilter[];
    $: filters = [
        // Define text search filter
        {
            key: "text-search",
            columns: ["firstname", "lastname", "age"],
            filter: (row: any, colKey: string) => { 
                const search = (val: string | null) => val != undefined && val.toString().toLocaleLowerCase().includes(textSearch.toLocaleLowerCase());
                return search(row)
            }, 
            active: (textSearch && textSearch.length > 0) ? true : false
        }
    ];
</script>

<!-- Text Search Input -->
<input type="text" placeholder="Enter Filter Term (Firstname, Lastname, or Age)" bind:value={textSearch} />

<Grid 
    bind:data={clients} 
    bind:filters />

Checkbox Filter

Implement a filter that allows users to filter data based on checkbox selections.

<script>
    import { Grid, type GridFilter } from "@mediakular/gridcraft";

    interface Client {
        //...
        status: 'active' | 'inactive' | 'pending'; 
    }

    export let data: PageData;
    let clients: Client[] = data.clients;

    let filters: GridFilter[];
    $: filters = [
        // Define checkbox filters
        { 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 },
    ];
    
    // in this case we need to negate the value
    $: activeFilterActive = !filters[0].active;
    $: inactiveFilterActive = !filters[1].active;
    $: pendingFilterActive = !filters[2].active;
</script>

<!-- Checkbox Inputs -->
<label for="status-active">
    <input type="checkbox" bind:checked={activeFilterActive} on:click={() => filters[0].active = !filters[0].active} id="status-active">
    Active
</label>
<label for="status-inactive">
    <input type="checkbox" bind:checked={inactiveFilterActive} on:click={() => filters[1].active = !filters[1].active} id="status-inactive">
    Inactive
</label>
<label for="status-pending">
    <input type="checkbox" bind:checked={pendingFilterActive} on:click={() => filters[2].active = !filters[2].active} id="status-pending">
    Pending
</label>

<Grid 
    bind:data={clients} 
    bind:filters />