Skip to main content

Display tables using Markdown

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.