Data Table

Examples

Displaying All Columns in Query

	

		
					
		
		
<DataTable data={orders_summary}/>
		

Selecting Specific Columns

	

		
					
		
		
<DataTable data={orders_summary}> 
    <Column id=state title="Sales State"/> 
	<Column id=item/> 
	<Column id=category/> 
	<Column id=sales fmt=usd/> 
	<Column id=channel/> 
</DataTable>
		

Custom Column Formatting

You can use the fmt prop to format your columns using built-in format names or Excel format codes

	

		
					
		
		
<DataTable data={country_summary}>
	<Column id=country />
	<Column id=category />
	<Column id=value_usd fmt=eur/>
    <Column id=yoy title="Y/Y Growth" fmt=pct3/>
</DataTable>
		

Formatting Driven by Another Column

This example includes a custom_format column, which contains a different currency format code for many of the rows.

	

		
					
		
		
<DataTable data={country_summary_fmts}>
	<Column id=country />
	<Column id=category />
	<Column id=value_usd fmtColumn=custom_format/>
    <Column id=yoy title="Y/Y Growth" fmt=pct3/>
</DataTable>
		

Search

	

		
					
		
		
<DataTable data={orders_summary} search=true/>
		

Deltas

	

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

Total Row

Default total aggregation is sum

	

		
					
		
		
<DataTable data={country_example} totalRow=true rows=5>
  <Column id=country/>
  <Column id=gdp_usd/>
  <Column id=gdp_growth fmt='pct2'/>
  <Column id=population fmt='#,##0"M"'/>
</DataTable>
		

Using Built-in Aggregation Functions

	

		
					
		
		
<DataTable data={country_example} totalRow=true rows=5>
  <Column id=country/>
  <Column id=gdp_usd totalAgg=sum/>
  <Column id=gdp_growth totalAgg=weightedMean weightCol=gdp_usd fmt='pct2'/>
  <Column id=population totalAgg=mean fmt='#,##0"M"'/>
</DataTable>
		

Custom Aggregations Values

	

		
					
		
		
<DataTable data={countries} totalRow=true rows=5>
  <Column id=country totalAgg="Just the USA"/>
  <Column id=gdp_usd totalAgg={countries[0].gdp_usd} totalFmt=usd/>
</DataTable>
		

Custom Total Formats

	

		
					
		
		
<DataTable data={countries} totalRow=true rows=5>
  <Column id=country totalAgg="All Countries"/>
  <Column id=continent totalAgg=countDistinct totalFmt='# "Unique continents"'/>
  <Column id=gdp_usd totalAgg=sum fmt='$#,##0"B"' totalFmt='$#,##0.0,"T"'/>
  <Column id=gdp_growth totalAgg=mean fmt='pct2' totalFmt='pct1'/>
  <Column id=interest_rate totalAgg=mean fmt='pct2' totalFmt='pct1'/>
  <Column id=inflation_rate totalAgg=mean fmt='pct2' totalFmt='pct1'/>
  <Column id=jobless_rate totalAgg=mean fmt='pct0'/>
  <Column id=gov_budget totalAgg=mean fmt='0.0"%"'/>
  <Column id=debt_to_gdp totalAgg=mean fmt='0"%"'/>
  <Column id=current_account totalAgg=mean fmt='0.0"%"'/>
  <Column id=population totalAgg=sum fmt='#,##0"M"'/>
</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>
		

Custom Colors

When you pass a custom color to scaleColor, Evidence will create a color palette for you, starting at white and ending at the color you provided. See examples further down the page to see how to specify a custom color palette with multiple colors.

	

		
					
		
		
<DataTable data={orders_by_category} rowNumbers=true>
  <Column id=month/>
  <Column id=category/>
  <Column id=sales_usd0k contentType=colorscale scaleColor=#a85ab8 align=center/>
  <Column id=num_orders_num0 contentType=colorscale scaleColor=#e3af05 align=center/>
  <Column id=aov_usd2 contentType=colorscale scaleColor=#c43957 align=center/>
</DataTable>
		

Custom Color Palettes

Diverging Scale

	

		
					
		
		
<DataTable data={numbers}>
  <Column id=name/>
  <Column id=number contentType=colorscale scaleColor={['#6db678','white','#ce5050']}/>
</DataTable>
		

Heatmap

	

		
					
		
		
<DataTable data={numbers}>
  <Column id=name/>
  <Column id=number contentType=colorscale scaleColor={['#6db678','#ebbb38','#ce5050']}/>
</DataTable>
		

Color Breakpoints

Use colorBreakpoints or colorMid/colorMin/colorMax to control which values are assigned to which sections of the color scale

	

		
					
		
		
<DataTable data={negatives} rows=all>
  <Column id=name/>
  <Column id=number contentType=colorscale scaleColor={['#ce5050','white','#6db678']} colorMid=0/>
</DataTable>
		

Create Scale from Another Column

The number column in this example has a color scale defined by the scale_defining_number column, rather than by its own values.

	

		
					
		
		
<DataTable data={numbers_othercol}>
  <Column id=name/>
  <Column id=scale_defining_number fontColor={['green','red']}/>
  <Column id=number contentType=colorscale scaleColor={['#6db678','white','#ce5050']} scaleColumn=scale_defining_number fmtCol=fmt/>
</DataTable>
		

Red Negatives

	

		
					
		
		
<DataTable data={negatives}>
  <Column id=name/>
  <Column id=number redNegatives=true/>
</DataTable>
		

Including Images

You can include images by indicating either an absolute path e.g. https://www.example.com/images/image.png or a relative path e.g. /images/image.png. For relative paths, see storing static files in a static folder.

In this example, flag is either an absolute path or a relative path to the image.

	

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

Flag	Country	Country ID	Category	Value ($)
	Austria	100384	B	$87
	Zimbabwe	100337	A	$100
	Yemen	100774	B	$67
	Vietnam	104948	A	$101
	Ukraine	101938	C	$168
	Thailand	104837	C	$248
	Sweden	101847	B	$190
	Romania	101384	A	$190
	Qatar	100181	C	$113
	Philippines	104128	D	$59

No Results

Page / 3 10 of 27 records

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>
		

HTML Content

	

		
					
		
		
```sql html_in_table
select '<b>Bold</b> text' as "HTML in Table", 0 as row_number union all
select '<i>Italic</i> text', 1 union all
select '<a href="https://evidence.dev">Link</a>', 2 union all
select '<img src="https://raw.githubusercontent.com/evidence-dev/media-kit/main/png/wordmark-gray-800.png" width="200px"/>', 3 union all
select 'Inline <code class=markdown>Code</code></br> is supported', 4
order by row_number
```

<DataTable data={html_in_table}>
    <Column id="HTML in Table" contentType=html/>
</DataTable>
		

Html in Table
Bold text
Italic text
Link
Inline Code is supported

No Results

To apply styling to most HTML tags, you should add the class=markdown attribute to the tag in your column. This will apply the same styling as the markdown renderer.

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>
		

Click on a row to navigate using the row link:

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 needful_things.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={country_summary}>
	<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={country_summary}>
	<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={country_summary} formatColumnTitles=false />
		

Groups - Accordion

Without subtotals

	

		
					
		
		
<DataTable data={orders} groupBy=state>
 	<Column id=state/> 
	<Column id=category totalAgg=""/> 
	<Column id=item totalAgg=""/> 
	<Column id=orders/> 
	<Column id=sales fmt=usd/> 
	<Column id=growth fmt=pct1/> 
</DataTable>
		

With Subtotals

	

		
					
		
		
<DataTable data={orders} groupBy=state subtotals=true> 
 	<Column id=state/> 
	<Column id=category totalAgg=""/> 
	<Column id=item totalAgg=""/> 
	<Column id=orders/> 
	<Column id=sales fmt=usd/> 
	<Column id=growth fmt=pct1/> 
</DataTable>
		

Closed by Default

	

		
					
		
		
<DataTable data={orders} groupBy=state subtotals=true totalRow=true groupsOpen=false> 
 	<Column id=state totalAgg=countDistinct totalFmt='0 "states"'/> 
	<Column id=category totalAgg=countDistinct totalFmt='[=1]0 "category";0 "categories"'/> 
	<Column id=item  totalAgg=countDistinct totalFmt='[=1]0 "item";0 "items"'/> 
	<Column id=orders/> 
	<Column id=sales fmt=usd0k/> 
	<Column id=growth contentType=delta fmt=pct totalAgg=weightedMean weightCol=sales/> 
</DataTable>
		

With Configured Columns

	

		
					
		
		
<DataTable data={orders} groupBy=category subtotals=true totalRow=true> 
 	<Column id=state totalAgg=countDistinct totalFmt='0 "states"'/> 
	<Column id=category totalAgg=Total/> 
	<Column id=item  totalAgg=countDistinct totalFmt='0 "items"'/> 
	<Column id=orders contentType=colorscale/> 
	<Column id=sales fmt=usd0k/> 
	<Column id=growth contentType=delta fmt=pct totalAgg=weightedMean weightCol=sales/> 
</DataTable>
		

Groups - Section

Without subtotals

	

		
					
		
		
<DataTable data={orders} groupBy=state groupType=section/>
		

With Subtotals

	

		
					
		
		
<DataTable data={orders} groupBy=state subtotals=true groupType=section>
 	<Column id=state totalAgg=countDistinct totalFmt='[=1]0 "state";0 "states"'/> 
	<Column id=category totalAgg=Total/> 
	<Column id=item  totalAgg=countDistinct totalFmt='0 "items"'/> 
	<Column id=orders/> 
	<Column id=sales fmt=usd1k/> 
	<Column id=growth contentType=delta neutralMin=-0.02 neutralMax=0.02 fmt=pct1 totalAgg=weightedMean weightCol=sales /> 
</DataTable>
		

With Configured Columns

	

		
					
		
		
<DataTable data={orders} groupBy=category groupType=section subtotals=true totalRow=true totalRowColor=#fff0cc> 
 	<Column id=state totalAgg=countDistinct totalFmt='[=1]0 "state";0 "states"'/> 
	<Column id=category totalAgg=Total/> 
	<Column id=item  totalAgg=countDistinct totalFmt='0 "items"'/> 
	<Column id=orders contentType=colorscale/> 
	<Column id=sales fmt=usd1k/> 
	<Column id=growth contentType=delta neutralMin=-0.02 neutralMax=0.02 fmt=pct1 totalAgg=weightedMean weightCol=sales /> 
</DataTable>
		

Column Groups

	

		
					
		
		
<DataTable data={countries} totalRow=true rows=5 wrapTitles groupBy=continent groupType=section totalRowColor=#f2f2f2>
  <Column id=continent totalAgg="Total" totalFmt='# "Unique continents"'/>
  <Column id=country totalAgg=countDistinct totalFmt='0 "countries"'/>
  <Column id=gdp_usd totalAgg=sum fmt='$#,##0"B"' totalFmt='$#,##0.0,"T"' colGroup="GDP"/>
  <Column id=gdp_growth totalAgg=weightedMean weightCol=gdp_usd fmt='pct1' colGroup="GDP" contentType=delta/>
  <Column id=jobless_rate totalAgg=weightedMean weightCol=gdp_usd fmt='pct1' contentType=colorscale scaleColor=red colGroup="Labour Market"/>
  <Column id=population totalAgg=sum fmt='#,##0"M"' totalFmt='#,##0.0,"B"' colGroup="Labour Market"/>
  <Column id=interest_rate totalAgg=weightedMean weightCol=gdp_usd fmt='pct2' wrapTitle=false colGroup="Other"/>
  <Column id=inflation_rate totalAgg=weightedMean weightCol=gdp_usd fmt='pct2' colGroup="Other"/>
  <Column id=gov_budget totalAgg=weightedMean weightCol=gdp_usd fmt='0.0"%"' contentType=delta colGroup="Other"/>
  <Column id=current_account totalAgg=weightedMean weightCol=gdp_usd fmt='0.0"%"' colGroup="Other"/>
</DataTable>
		

Wrap Titles

	

		
					
		
		
<DataTable data={countries} wrapTitles=true /> 
		

DataTable

Options

totalRow=true

totalRow=false

rowNumbers=true

rowNumbers=false

rowLines=true

rowLines=false

rowShading=true

rowShading=false

sortable=true

sortable=false

search=true

search=false

downloadable=true

downloadable=false

formatColumnTitles=true

formatColumnTitles=false

wrapTitles=true

wrapTitles=false

showLinkCol=true

showLinkCol=false

generateMarkdown=true

generateMarkdown=false

emptySet=error

emptySet=warn

emptySet=pass

Groups

Groups allow you to create sections within your table, increasing the density of the content you're displaying. Groups are currently limited to 1 level, but will be expanded in future versions.

groupType=accordion

groupType=section

subtotals=true

subtotals=false

groupsOpen=true

groupsOpen=false

groupNamePosition=top

groupNamePosition=middle

groupNamePosition=bottom

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.

Options

align=left

align=center

align=right

totalAgg=sum

totalAgg=mean

totalAgg=weightedMean

totalAgg=median

totalAgg=min

totalAgg=max

totalAgg=count

totalAgg=countDistinct

totalAgg=custom string or value

wrap=true

wrap=false

wrapTitle=true

wrapTitle=false

contentType=link

contentType=image

contentType=delta

contentType=colorscale

contentType=html

Images

contentType=image

Links

contentType=link

openInNewTab=true

openInNewTab=false

Deltas

contentType=delta

deltaSymbol=true

deltaSymbol=false

downIsGood=true

downIsGood=false

showValue=true

showValue=false

chip=true

chip=false

Conditional Formatting (Color Scales)

contentType=colorscale

scaleColor=green

scaleColor=blue

scaleColor=red

scaleColor=Hex color code

scaleColor=css color name

HTML

contentType=html

To apply styling to HTML tags, you will need to add the class=markdown attribute to the HTML tag in your column. This will apply the same styling as the markdown renderer. E.g., <code class=markdown>Code</code>