# 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. channelsselect channel, '?channel=' || channel as filter_linkfrom ordersgroup 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 Componentitemsselect    email,    channel,    sum(sales) as sales_usdfrom ordersgroup 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.