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/>

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 &rarr;" />
</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 
    fed_reserve_district as name, 
    CONCAT("/parameterized-pages/", fed_reserve_district) as district_link,
    count(distinct institution_name) as distinct_institutions,
from `bigquery-public-data.fdic_banks.institutions`
group by 1

You can then use the link property of the DataTable to use your link column as a row link (district_link in this example):

<DataTable 
    data={federal_reserve_districts} 
    link=district_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
contentType	Lets you specify how to treat the content within a column. See below for contentType-specific options.	-	link | image	-

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