# Table Component

*Skill Level: Intermediate*

## Before You Begin

* Know how to set up [Databases](/database.md)
* You do not need a paid Adalo plan to use this feature

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXey0P9tYSSgLFRMBRiOTT1ZnxnFICQ1fHherWy-ACU6I5TWbE9kCij8JykbPDQOg_2WSPyTa6xNP5PGGsReRD8UpLTeptURObmIx28YM7o7vlQwF5C4COWB7tNLwhcCj_0mQ0I6CEXb67LkRkbWGeMUKN26?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### Adding Data to a Table

To add data to your table, simply select the Collection you would like to add in the first dropdown you see in the sidebar. All of the typical controls for lists are available: filters, sorting, etc. You’ll also see a new option that only exists on tables, which allows you to specify the number of items per page. Unlike most lists in Adalo, which scroll infinitely, tables have explicit pagination with next and previous buttons.&#x20;

### Pagination

Table paging works for Adalo Collections and in apps built on Xano. If you are building a Xano-backed app, you’ll need to enable paging in your GET API endpoints to take advantage of paging.&#x20;

Because each API service can have its own paging format, table paging does not work for External Collections. For these collections, the table will show ALL records returned from the API endpoint, just like other lists in Adalo.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfdl9kBMfY4mAheY5u4jWpbhP7Fp4mcKz1futqOD09_UBvl3TCa0HbqzcaRAbFHPit7ZPvOYt1KxDbPq2ii2HgbXRmASqmc3vStd6qU-Y8v_KK5SmwPqFJOp2cHYdjsHMGtjhOkD8gMPbAOsDqqvdhFEivY?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### Setting Up Your Columns

Once you’ve connected your table to a Collection you can choose available properties to display as columns. Click ***“ADD COLUMN”*** to add a property. You can also click and drag properties to rearrange them.

{% hint style="info" %}
Users will be able to scroll horizontally if the number of columns you have selected doesn’t fit on the screen.
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfEAOmb0Q5qTkr-JasIhyRvZYMBE0i5jI9XVH_n2VoF6KCxEYRpnn-AJa7maIh8uTV993jancYaqWKMhyRhRt9M-IjwzX8EQ8qgbNhwBZfUVNbyap9q_hE4BX0T-lQUEECG0_tXsY6-KsbQNr9JnPlj0Kg1?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### Column Options

Each property type has its own formatting options. For example, if you choose a date property, you will see date formatting options. You can also set the width of each column in case you want some columns to be wider than others. &#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeSq9FeDTt5RYfq10XRxl7E5FbXVSulR6Ep0qpSFXJQUYc1J7tEzqjC8Fd3-q3F9BxBgmEoqxt5B6PJXMLRQKaliVhDqXD2WKRB6pZ-fNpgOFzCBHcUb1YnAarpJVPcR10pW9fgkYkhW59f-efTJ8Fd4DHa?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### Tables and Relationships

When adding relationships to your table, there are some limitations to consider. First, be aware that we currently only allow you to dig one level deep into a relationship in tables. The deeper into the relationship tree you go, the more complex the query, which often results in poorer performance. Since tables are typically used to display lots of data, we have chosen to implement a single-level relationship limit to keep them performant.&#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfr81gHShfzNcDH1E5ym0tBCmzViwqXymeFhcOaNpMBXZD75vP1h7D3l0JSs0oNO2qshdkjrCoHq69DgoLzatO0qEZJuEPnFYOjrvmySOjhMnfjABB-Qjw0_XMPxUIEVahdGwnyP8s5Q4jrpkK6OfdCo6_t?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

Lists within lists also tend to slow down loading, so another step we’ve taken to prevent this is to only allow counts to be shown for many-to-many relationships. In the example below, each post has associated tags but I can only show the count of the tags, not their names.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf5juTdI-2ApYbG3btYgbDYV74cB7mcEqf33Q842fBAsP2JhW5s_t1C_FJDyMJNrc1gFjRONcASUgJ2vw2AG9XDvY2t4AdurL_waioaIA4qPLkXu8dVhzTepUoqS8hq-KzMLmUXPR8xIwlevTnOnMDqAbWO?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### Click Actions

Click actions can be added to each row of the table by clicking the “ADD ACTION” button. Note that the click action is for the entire row. You cannot currently set unique actions by column.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeEmf3lGWjDT3PGXaXKrvysUHxtOLe8HJ-i1PK5vpn3F9B0ozbdiIkhbuon4M6XUq_moFYwdDspBpkiUphoFDD4QeZWnN9XuUWsECo44r6RGStuDvH9GS-EdZ8cqUEFFeBboFFpCDAy_ZyX5QsFmQslYm5e?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>

### Styling Tables

Under “Table Styles” you will see lots of options for customizing the colors, borders, rounding, and shadow on your table.&#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdeCAQW9m3EHrvYOg0xB3yWwZ_y-18qBmpLE84DUvMtMHyzHOQT-1XWwBJfCGFB1EKrlOGzC6IuMLmj8xy6pwp2Wwehs9A4Z2CHJix7eatlhQKVOHE6uH4TNqnyKk9kgvC2xhQfI0NvMBeOgFmMG4oTYec?key=J23ZfCsVQ93DuL6K7S_8xw" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/component-basics/table-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
