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.