Table Component
With the Adalo Table component, you can easily display data from your Collections in a tabular format.
Last updated
With the Adalo Table component, you can easily display data from your Collections in a tabular format.
Last updated
Skill Level: Intermediate
Know how to set up Databases
You do not need a paid Adalo plan to use this feature
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.
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.
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.
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.
Users will be able to scroll horizontally if the number of columns you have selected doesn’t fit on the screen.
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.
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.
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.
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.
Under “Table Styles” you will see lots of options for customizing the colors, borders, rounding, and shadow on your table.
