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.
Month | Revenue |
---|---|
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.