Black Friday Sale
Lifetime 70% discount on all plans
Ycode logotype
Features
Layout & Design

Experience full design control to craft professional websites.

CMS

Organize your content your way for maximum impact.

Forms

Build contact, newsletter, and filter forms effortlessly.

SEO

Boost your website's SEO with optimized controls.

Interactions

Add some spark to your website with interactions.

Localization

Translate your website into multiple languages.

Resources
Templates

Customize any template to fit your style and needs.

Academy

Start learning Ycode for free. Get answers to your questions.

Experts

Find experts to help with your website project.

Blog

No-code insights to help you build and design better projects.

Support
Help Center

Find step-by-step guides and answers in our knowledge base.

Contact

Contact us for urgent help.

Community

Connect and learn from others.

Pricing Partners
Log in Sign up
Introduction
Getting started
Dashboard
Dashboard
New project
Profile
Switch account
Users
Billing history
Account settings
Project settings
Project settings
General settings
Project ownership
Allow cloning
Project plan
SEO
Domain
Redirects
API Tokens
Builder
Builder
Canvas
Layers
Switch page
Left-side panel
Editor mode
Keyboard shortcuts
Breakpoints
Preview
Publish
Elements
Elements
Structure
Content
Actions
Media
Tables
Lists
Layouts
Slider
Forms
Form structure
Data form
Filter form
Advanced form
Authentication form
HTML
HTML
Import
Export
Embed
Design
Layer styles
Components
States
Layout
Sizing
Spacing
Typography
Backgrounds
Borders
Position
Effects
Color controls
Animations
Intro to Animations
Trigger
Properties
Page settings
General settings
SEO settings
Social share
Page folders
Workflows
Intro to workflows
ID
Types
When
Events
Data
Interactive
Other
CMS
CMS Collections
Import data
Dynamic elements
CMS pages
Display settings
Filter and search
Collection sorting
Dynamic sorting dropdown options
Pagination
CSV Export
Settings
Integrations
Zapier
Airtable
Custom code
Custom code
Related articles
CSV Export
Pagination
Dynamic sorting dropdown options
Collection sorting
Filter and search
Display settings
CMS pages
Dynamic elements
Import data
CMS Collections
Documentation CMS

Filter and search

With Ycode’s filter and search feature, you can create tables and give web visitors the option to filter results and easily search for what they’re looking for. This will be super helpful when showing lots of data!

Filtering and searching in Ycode

For these guidelines, we’ll create a list of cars to apply our filters and search to.

First, let’s create a database with a list of cars. 

Navigate to the database tab, then click on + Create local database (or simply the plus sign next to local databases). Then add a name (we named our “Cars”) and click on Create database.

To add the fields that contain the information about each car, click on + Add field and choose the field type you want to use. 

For our example, we want the fields:

  • Brand name

  • Model name

  • VIN (Vehicle Identification Number)

Then add all car information entries by clicking on + New entry. 

You can also upload this data at once using a CSV file. Click here to learn more about uploading data in bulk.

Now we need to create two more databases: 

  1. Car colors (named “Color”) 

  2. Year in which the car was manufactured (named “Year”)

Finally, open the “Cars” database and add two reference fields, with the name “Color”, and “Year”. 

These reference fields are needed for building elements we’re adding to our canvas later on. You can then fill all the fields with as much information as you want.

With your databases set up, let’s start building!

Head over to your canvas and click on the Form icon in the Top panel. In the dropdown menu, select Form.

With the form element selected, open the Settings on the right-hand side and go to Form. For the type, select Filter and for the source, select the main database named “Cars”.

To design the actual form, click on the Form icon in the top panel and then in the dropdown, select two Input elements, two Select elements, one Input element and a Submit button—in this exact order.

In the Designtab on the right-hand side, you can style each element to your liking (color, spacing, borders, etc.). For this tutorial, we will leave the form exactly as is. 

Then in the Settings tab, you can also add a Placeholder name for Input elements—for example, “Car brand”, “Car model”, etc. This makes it clear for the user what they can search for.

You can also let people select choices when filtering.

For this, you need to add the database reference column (e.g.  RefYear or RefColor). 

Select the first Select element on the canvas (or in the Layer sidebar) and then open the Settings tab on the right-hand side. Now choose the database next to Column.

Repeat this action for the other select element as well.Head over to the Top panel and click on the Square icon at the far left. Then add a Section element, followed by a Grid element.

You now see 2x2 grids on your canvas, but we’d like to have 5 grid items in one row.

In the Layer sidebar, click on the + plus sign next to Grid. This adds one more grid item. 

Then in the Design tab on the right, unfold Layout. Set the column number to five and add a gap of three.

In the Layer sidebar, select one of your grid items. From the Top panel, click on the second T icon and select Heading 3. Repeat this process for the remaining four grid itemsThe structure of your grid is now done, but the headings are all static. Time to make these elements dynamic!

Select the main Gridlayer and open the Settings tab on the right. For the Source, select local, followed by Cars. This connects the grid item to the Cars database.

Depending on how many entries there are in your database, you’ll see that the heading items will now repeat itself on the canvas. A maximum of six are shown. In the preview, you’ll see the full number of entries.

For our next step, we’ll assign the right database field to each heading. 

Click on the first Grid item in the Layers sidebar. Then open the Settings tab and for the Key, select Name in the dropdown menu. Repeat this process for the other four grid items.

We used this order:

  • Name

  • Model

  • RefYear: Name

  • RefColor: Name

  • VIN

For these guidelines, we’ll focus on how to set up filters and search. However, feel free to adjust the design settings and make your grid look great by adding any colors, borders, shadows… you name it!

Finally, let’s add filters so website visitors can filter and search the table (aka grid) we just created.

Select the main Grid layer, and open the Settings tab on the right. You’ll see that there’s a section called Filters.

To add a new filter, click on the +plus sign and select Name.

Then enter the ID name value, or press the round icon and drag it to the element you’d like to use for the filter. To save, click on the blue Add button.

If someone on your website now searches for a brand in this search field, the grid will only show car brand names for that search.

Using the same steps as described above, you can now add filters for the remaining four database fields—so the car model, dropdown options (year and color) and VIN.

Now, select the Submit button, go to the Right-hand side on Settings and give it an ID name, we named ours “Filter”.

We now need to create a workflow, the workflow will make it so when the user clicks on the button it filters through our grid content.

To do so, navigate to the Workflows tab and click on + Create workflow, select Click here to add an event, then choose Elements followed by Clicked, finally select the element ID we named previously.

Click on Click here to add an event once more and select Data followed by Submit form, this will now filter through your collection. Finally, name your Workflow and click on Create workflow.

Ta-daa! Here’s the final result of the filter and search table we created together. You can view your table in action by clicking on Save and then Preview, both in the upper right corner of the canvas.

Browse by category

Dashboard
Project settings
Builder
Elements
Forms
Design
Animations
Page settings
Workflows
CMS
Settings
Integrations
Custom code
Ycode logotype

Visual development platform for designers and agencies.

Features Design CMS Forms SEO Animations Localization
Product Updates Roadmap Pricing Templates Developer API
Company About us Services Blog Contact Brand resources
Learn Help Center Academy Community Customer stories
Partner Experts Partner program Become a Ycode expert
Compare Ycode vs. Webflow Ycode vs. Framer Ycode vs. Squarespace
Let’s keep in touch

Join our monthly email with no-code insights and Ycode updates.

Done!

Thank you for subscribing.


2019 - 2025 © Ycode. All rights reserved.
Terms & Policies Cookies settings