Skip to main content

Display tables using Markdown

Learn how to build tables in Retool Mobile apps using Text components with Markdown support.

Retool Mobile supports advanced formatting by using Markdown within a Text component. While Retool Mobile doesn't have a table component, you can display tabular data using Markdown tables.

Basic table formatting

Tables can be displayed with Markdown using pipe and dash symbols, for example:

| Month    | Revenue |
| -------- | ------- |
| January | $1000 |
| February | $1200 |
| March | $1800 |

The above Markdown renders as a table.

MonthRevenue
January$1000
February$1200
March$1800

Format repeatable data

Data returned from a resource query can also be rendered in a table by dynamically building the Markdown. For example, you might have a resource query named query1 which returns the following array.

[
{
"month": "January",
"revenue": 1000
},
{
"month": "February",
"revenue": 1200
},
{
"month": "March",
"revenue": 1800
}
]

In the Text component's Value field, the following would render the same table.

| Month    | Revenue |
| -------- | ------- |
{{query1.data.map(item => `| ${item.month} | $${item.revenue} |`).join('\n')}}

This code uses the map() method of the array instance to iterate over each object in the array and format it into a string in the correct Markdown format. It then joins the new array of strings into a single string using .join('\n'). The same approach could be used in a transformer.