Working with data

Now that you understand the difference between the Interface and the Data & API tabs, it's time to connect them. Working with data in WeWeb follows a simple pattern: Store → Filter → Fetch → Display.

The Data Flow

StoreStore data in a Table

FilterFilter data using a View

FetchAction: Fetch table view

DisplayBind the view

Step 1: Creating a Table

Everything starts with a Table. This is where your actual data lives.

1

Go to Tables

Switch to Data & API and open the Tables tab.

2

Add a table

Click + Add table.

3

Define columns

Define your columns (e.g., Title (Text), Price (Number).

4

Add sample data

Add some sample rows so you have data to play with.

TABLES VS SPREADSHEETS

While they look like spreadsheets, Tables are powerful databases. You can link them together (relations), enforce types, and secure them.

Step 2: Creating a View

You rarely want to dump an entire table into your app. You might only want "Active Users" or "Products under $50". Views allow you to create these specific slices of data.

1

Open your Table

Navigate to the table you just created.

2

Create a View

Create a new View

3

Configure filters

Add Filters (e.g., Status is Active) or Sorts (e.g., Price low to high).

4

Set permissions

Important: Check the permissions! By default, views might be private. Set them to Public (if safe) or Authenticated to allow your interface to see them.

Step 3: Fetching the Data

Now we move to the Interface tab. To use your data, we need to "fetch" it.

1

Go to Workflows

Switch to Interface and open the Workflows tab.

2

Add a Workflow

Create a workflow that uses the On Page Load trigger.

3

Fetch Data

Add the action Fetch table view and select your View.

On load of the page, WeWeb will now fetch the data from your View and make it available directly in the binding menu.

Step 4: Displaying Data

Now that the data is fetched, you can bind it to your elements. The most common way is using the Repeating Items property to show lists, grids, or cards.

Using Repeating Items

1

Add a Container

Drag a Container (or a pre-made List component) onto your page.

2

Design one item

Inside it, place the elements for one item (e.g., an Image, a Heading, a Paragraph).

3

Select parent

Select the parent Container.

4

Enable Repeat

In the settings, turn on Repeat items.

5

Bind data

Bind the list to Table Views > [Your View] > data.

Binding the Content

Now that the container is repeating, tell the inner elements what to show:

1

Select element

Select the Heading (or other element).

2

Open binding

In the text settings, click the plug/bind icon.

3

Map value

Choose the Title field from the available item data.

4

Repeat

Repeat for the Image, Price, etc.

Handling Loading and Errors

Data isn't instant. Your app needs to handle the time it takes to fetch data.

• Is Fetching — Every Table View has an isLoading property available in the binding menu. Bind a loading spinner's visibility to this property to show it while data loads.
• Errors — If the fetch fails, you can use the workflow's error handling (Try/Catch) to show a message to the user.

CONTINUE LEARNING

You have data on the page! Now, let's learn how to create secure logic to manipulate that data safely:

Creating secure logic →