Data Table
Examples
Selecting Specific Columns
<DataTable data="{query_name}" search="true">
<Column id="date" />
<Column id="country" title="Country Name" />
<Column id="value_usd" />
</DataTable>

Displaying All Columns in Query
<DataTable data="{query_name}" search="true" />

Deltas
<DataTable data="{countries}">
<Column id="country" />
<Column id="category" />
<Column id="value_usd" />
<Column id="yoy" contentType=delta fmt=pct title="Y/Y Chg"/>
</DataTable>

Conditional Formatting
Default (scaleColor=green
)
<DataTable data={countries}>
<Column id=country />
<Column id=country_id align=center/>
<Column id=category align=center/>
<Column id=value_usd contentType=colorscale/>
</DataTable>

scaleColor=red
<DataTable data={countries}>
<Column id=country />
<Column id=country_id align=center/>
<Column id=category align=center/>
<Column id=value_usd contentType=colorscale scaleColor=red/>
</DataTable>

scaleColor=blue
<DataTable data={countries}>
<Column id=country />
<Column id=country_id align=center/>
<Column id=category align=center/>
<Column id=value_usd contentType=colorscale scaleColor=blue/>
</DataTable>

Including Images
<DataTable data="{countries}">
<Column id="flag" contentType="image" height="30px" align="center" />
<Column id="country" />
<Column id="country_id" align="center" />
<Column id="category" />
<Column id="value_usd" />
</DataTable>

Link Columns
Link Column with Unique Labels
<DataTable data="{countries}">
<Column id="country_url" contentType="link" linkLabel="country" />
<Column id="country_id" align="center" />
<Column id="category" />
<Column id="value_usd" />
</DataTable>

Link Column with Consistent String Label
<DataTable data="{countries}">
<Column id="country" />
<Column id="country_id" align="center" />
<Column id="category" />
<Column id="value_usd" />
<Column id="country_url" contentType="link" linkLabel="Details →" />
</DataTable>

Row Links
External Links
This example includes a column country_url
which contains a country name as a search term in Google (e.g., https://google.ca/search?q=canada
)
<DataTable data="{countries}" search="true" link="country_url">
<Column id="country" />
<Column id="country_id" align="center" />
<Column id="category" />
<Column id="value_usd" />
</DataTable>

Link to Pages in Your Project
In this example, the SQL query contains a column with links to parameterized pages in the project. Below is an example of the SQL that could be used to generate such links:
select
category,
'/parameterized-pages/' || category as category_link,
sum(sales) as sales_usd0
from orders
group by 1
You can then use the link
property of the DataTable to use your link column as a row link (category_link
in this example):
<DataTable data="{orders}" link="category_link" />
By default, the link column of your table is hidden. If you would like it to be displayed in the table, you can use showLinkCol=true
.

Styling
Row Shading + Row Lines
<DataTable data="{countries}" rowShading="true" />

Row Shading + No Row Lines
<DataTable data="{countries}" rowShading="true" rowLines="false" />

No Lines or Shading
<DataTable data="{countries}" rowLines="false" />

Column Alignment
<DataTable data="{query_name}">
<Column id="country" align="right" />
<Column id="country_id" align="center" />
<Column id="category" align="left" />
<Column id="value_usd" align="left" />
</DataTable>

Custom Column Titles
<DataTable data="{query_name}">
<Column id="country" title="Country Name" />
<Column id="country_id" align="center" title="ID" />
<Column id="category" align="center" title="Product Category" />
<Column id="value_usd" title="Sales in 2022" />
</DataTable>

Raw Column Names
<DataTable data="{query_name}" formatColumnTitles="false" />

DataTable
All Options
Name | Description | Required? | Options | Default |
---|---|---|---|---|
data | Query name, wrapped in curly braces | Yes | query name | - |
rows | Number of rows to show in the table before paginating results. Use rows=all to show all rows in the table. | - | number | all | 10 |
rowNumbers | Turns on or off row index numbers | - | true | false | false |
rowLines | Turns on or off borders at the bottom of each row | - | true | false | true |
rowShading | Shades every second row in light grey | - | true | false | false |
sortable | Enable sort for each column - click the column title to sort | - | true | false | true |
search | Add a search bar to the top of your table | - | true | false | false |
downloadable | Enable download data button below the table on hover | - | true | false | true |
formatColumnTitles | Enable auto-formatting of column titles. Turn off to show raw SQL column names | - | true | false | true |
link | Makes each row of your table a clickable link. Accepts the name of a column containing the link to use for each row in your table | - | column name | - |
showLinkCol | Whether to show the column supplied to the link prop | - | true | false | false |
Formatting
Formatting is automatically applied based on the column names of your SQL query result. See the formatting section for more details.
Column
Use the Column
component to choose specific columns to display in your table, and to apply options to specific columns. If you don't supply any columns to the table, it will display all columns from your query result.
All Options
Name | Description | Required? | Options | Default |
---|---|---|---|---|
id | Column id (from SQL query) | Yes | column name | - |
title | Override title of column | - | string | column name (formatted) |
align | Align column text | - | left | center | right | left |
fmt | Format the values in the column (see available formats) | - | Excel-style format | built-in format | custom format | - |
wrap | Wrap column text | - | true | false | false |
contentType | Lets you specify how to treat the content within a column. See below for contentType-specific options. | - | link | image | delta | colorscale | - |
Images
contentType=image
Name | Description | Required? | Options | Default |
---|---|---|---|---|
height | Height of image in pixels | - | number | original height of image |
width | Width of image in pixels | - | number | original width of image |
alt | Alt text for image | - | column name | Name of the image file (excluding the file extension) |
Links
contentType=link
Name | Description | Required? | Options | Default |
---|---|---|---|---|
linkLabel | Text to display for link | - | column name | string | raw url |
openInNewTab | Whether to open link in new tab | - | true | false | false |
Deltas
contentType=delta
Name | Description | Required? | Options | Default |
---|---|---|---|---|
deltaSymbol | Whether to show the up/down delta arrow symbol | - | true | false | true |
downIsGood | If present, negative comparison values appear in green, and positive values appear in red. | - | true | false | false |
showValue | Whether to show the delta value. Set this to false to show only the delta arrow indicator. | - | true | false | true |
Conditional Formatting (Color Scales)
contentType=colorscale
Name | Description | Required? | Options | Default |
---|---|---|---|---|
scaleColor | Color to use for the scale | - | green | blue | red | green |
colorMin | Set a minimum for the scale. Any values below that minimum will appear in the lowest color on the scale | - | number | min of column |
colorMax | Set a maximum for the scale. Any values above that maximum will appear in the highest color on the scale | - | number | max of column |