Skip to main content

Filters

Filters dynamically change what data is shown in a specific component.

tip

Adding too many filters to a page increases mental load for end users, and the chance they could "get the wrong answer".

To dynamically change data across a whole page, templated pages are more suitable and intuitive for end users.

Filtering via URL search parameters

Filters make use of search parameters (a.k.a. "query strings") in the URL. Anything after the ? in the URL is a search parameter.

  • orders?channel=google has a search parameter channel with value google
  • orders?item=boxing%20gloves has a search parameter item with value boxing gloves
  • orders?item=boxing%20gloves&status=shipped has two search parameters item, and status

In Evidence, the value of a search parameter channel is accessible in a page via:

{
$page.url.searchParams.get('channel');
}

Generating filter URLS

For users to be able to interact with a filter, they require the ability to navigate to URLs with search parameters.

It's possible to create these links manually, but it's easier to generate them automatically:

Construct unique values for each row, and create links for each row in the table.

```sql channels
select
channel,
'?channel=' || channel as filter_link
from orders
group by 1

## Filter

<DataTable data={channels} link=filter_link />
```

Filtering a query result

To filter the data shown by a component, use the javascript filter method on the query result.

Filter method
.filter(d => d.channel === $page.url.searchParams.get('channel'))

We can use this to filter a <DataTable/> component:

## Filtered Component

```sql items
select
email,
channel,
sum(sales) as sales_usd
from orders
group by 1,2
```

{#if $page.url.searchParams.get('channel')} <!-- Check for a filter in the URL -->

<DataTable data={items.filter(d=>d.channel === $page.url.searchParams.get('channel'))}/>

{:else} <!-- If not, show all data -->

<DataTable data={items}/>

{/if}

Now if a user navigates to www.example.com/orders?channel=google, the table will only show data for the google channel.

Note, if we didn't check for a filter in the URL, then the .filter would throw an error in the situation where there is no search parameter in the URL.