Filters
Filters dynamically change what data is shown in a specific component.
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 parameterchannel
with valuegoogle
orders?item=boxing%20gloves
has a search parameteritem
with valueboxing gloves
orders?item=boxing%20gloves&status=shipped
has two search parametersitem
, andstatus
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:
Add a filter using a <DataTable/>
with a link
prop
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(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.