Skip to main content

​
Overview

The DataTable component displays query results in a formatted, interactive table with features like sorting, searching, pagination, grouping, and custom column formatting.

​
Basic Usage

<DataTable data={query_result} />

​
With Column Configuration

<DataTable data={flights} search sortable rows={20}>
  <Column id="airline" title="Airline" />
  <Column id="departure_airport" title="Departure" />
  <Column id="fare" fmt="usd" contentType="bar" />
</DataTable>

​
With Grouping

<DataTable 
  data={sales_data} 
  groupBy="region" 
  subtotals 
  totalRow
>
  <Column id="region" />
  <Column id="sales" fmt="usd" />
  <Column id="orders" />
</DataTable>

​
Props

​
data
Query
required
Query result containing the data to display. Can be a Query object or array of objects.
​
rows
number
default:"10"
Number of rows to display per page.
​
title
string
Title displayed above the table.
​
subtitle
string
Subtitle displayed below the title.
​
rowNumbers
boolean
default:"false"
Show row numbers in the first column.

​
Sorting

​
sort
string
Initial sort column and direction. Format: "column_name" or "column_name desc".
​
sortable
boolean
default:"true"
Enable column sorting by clicking headers.

​
Search and Filtering

​
search
boolean
default:"false"
Enable search bar for filtering table data. Requires Query object.

​
Grouping

​
groupBy
string
Column name to group rows by.
​
groupType
'accordion' | 'section'
default:"'accordion'"
Display style for grouped rows. accordion shows collapsible groups, section shows groups as table sections.
​
groupsOpen
boolean
default:"true"
Initial state for grouped rows (open or closed).
​
groupNamePosition
'middle' | 'top' | 'bottom'
default:"'middle'"
Vertical alignment of group name in section mode.
​
subtotals
boolean
default:"false"
Show subtotal row for each group.
​
totalRow
boolean
default:"false"
Show total row at bottom of table.

​
Table Features

​
downloadable
boolean
default:"true"
Show download button to export table data.
​
link
string
Column name containing URLs to make rows clickable.
​
showLinkCol
boolean
default:"false"
Show the link column in the table (by default it’s hidden).

​
Styling

​
rowShading
boolean
default:"false"
Alternate row background colors.
​
rowLines
boolean
default:"true"
Show lines between rows.
​
compact
boolean
Use compact row spacing.
​
wrapTitles
boolean
default:"false"
Allow column titles to wrap to multiple lines.
​
formatColumnTitles
boolean
default:"true"
Automatically format column titles (e.g., snake_case to Snake Case).
​
headerColor
string
Background color for table header.
​
headerFontColor
string
Font color for table header.
​
backgroundColor
string
Background color for table body.
​
accordionRowColor
string
Background color for accordion group rows.
​
subtotalRowColor
string
Background color for subtotal rows.
​
subtotalFontColor
string
Font color for subtotal rows.
​
totalRowColor
string
Background color for total row.
​
totalFontColor
string
Font color for total row.

​
Error Handling

​
emptySet
'pass' | 'warn' | 'error'
How to handle empty datasets.
​
emptyMessage
string
Custom message to display when dataset is empty.

​
Column Component

Use nested <Column> components to customize individual columns: 
<DataTable data={sales}>
  <Column id="product" title="Product Name" />
  <Column id="revenue" fmt="usd" contentType="bar" />
  <Column id="date" fmt="mmm d, yyyy" />
</DataTable>

​
Examples

<DataTable 
  data={flights} 
  search 
  sort="fare desc" 
  rows={20}
>
  <Column id="airline" />
  <Column id="departure_airport" />
  <Column id="arrival_airport" />
  <Column id="fare" fmt="usd" />
</DataTable>

​
Grouped Table with Subtotals

<DataTable 
  data={sales} 
  groupBy="category" 
  subtotals 
  totalRow
  groupType="section"
>
  <Column id="category" />
  <Column id="item" />
  <Column id="sales" fmt="usd" />
  <Column id="orders" />
</DataTable>

​
Bar Chart Column

<DataTable data={metrics}>
  <Column id="category" />
  <Column id="value" contentType="bar" fmt="usd" hideLabels="false" />
  <Column id="orders" contentType="bar" hideLabels="false" align="left" />
</DataTable>

Build docs developers (and LLMs) love

Get started for freeTalk to us