Documentation Index Fetch the complete documentation index at: https://mintlify.com/evidence-dev/evidence/llms.txt
Use this file to discover all available pages before exploring further.
Evidence’s table components provide powerful ways to display, explore, and interact with your data.
DataTable The DataTable component is the primary way to display tabular data in Evidence.
Basic DataTable ```sql orders_by_category SELECT category, DATE_TRUNC( 'month' , order_date) as month , SUM (sales) as total_sales, COUNT ( * ) as num_orders, AVG (sales) as avg_order_value FROM orders GROUP BY category, month ORDER BY month DESC
Evidence automatically: - Detects column types - Formats numbers and dates - Adds sorting to all columns - Makes the table responsive ### Interactive Features #### Search Add fuzzy search across all columns: ```markdown <DataTable data={orders_by_category} search="true"/>
Row Numbers < DataTable data = {orders_by_category} rowNumbers = true />
Compact Mode Reduce padding for denser tables:
< DataTable data = {orders_by_category} compact = "true" />
Row Lines Add horizontal lines between rows:
< DataTable data = {orders_by_category} rowLines = true />
Control number of rows displayed:
< DataTable data = {orders_by_category} rows = 40 />
Column Component Use the Column component to customize individual columns:
< DataTable data = {orders_by_category} > < Column id = "category" /> < Column id = "month" /> < Column id = "total_sales" fmt = "usd" contentType = colorscale /> < Column id = "num_orders" /> < Column id = "avg_order_value" fmt = "usd2" contentType = bar /> </ DataTable >
Column Props Column name from the query
Display name for the column header
Format specification (usd, eur, pct, num0, num2, etc.)
Visualization type: colorscale, bar, sparkline, sparkbar, sparkarea, delta
align
'left' | 'center' | 'right'
Text alignment
Content Types Color Scale Color cells based on value:
< DataTable data = {summary} > < Column id = "category" /> < Column id = "sales" fmt = "usd0k" contentType = colorscale colorScale = {[ '#304a8a','#e8efff']}/ > < Column id = "orders" /> < Column id = "aov" fmt = "usd2" contentType = colorscale colorScale = {[ '#b52626','#FFFFFF','#2e9939']}/ > </ DataTable >
Bar Visualization Show values as horizontal bars:
< DataTable data = {summary} > < Column id = "category" /> < Column id = "sales" contentType = bar fmt = "usd" align = "left" /> < Column id = "orders" /> </ DataTable >
Sparklines Display mini charts in table cells:
```sql category_trends SELECT category, SUM (monthly_sales) as total_sales, ARRAY_AGG({ 'date' : date , 'sales' : monthly_sales}) AS sales FROM monthly_sales GROUP BY category
### Conditional Formatting Use conditional logic to format cells: ```markdown <DataTable data={summary}> <Column id="category"/> {#if inputs.display_column.value === 'sales'} <Column id="sales" fmt="usd0k" contentType=colorscale colorScale={['#304a8a','#e8efff']}/> {:else if inputs.display_column.value === 'orders'} <Column id="orders"/> {:else} <Column id="aov" fmt="usd2" contentType=colorscale colorScale={['#b52626','#FFFFFF','#2e9939']}/> {/if} </DataTable>
Table Groups Group rows by column values:
< DataTable data = {orders} > < Column id = "category" totalAgg = countDistinct /> < Column id = "month" /> < Column id = "sales" totalAgg = sum fmt = "usd" /> < Column id = "orders" totalAgg = sum /> </ DataTable >
Total Rows Add aggregated totals:
< DataTable data = {orders} totalRow = true > < Column id = "category" totalAgg = countDistinct /> < Column id = "sales" totalAgg = sum fmt = "usd" /> < Column id = "orders" totalAgg = sum /> < Column id = "avg_order_value" totalAgg = mean fmt = "usd2" /> </ DataTable >
Available aggregations:
sum - Sum of valuesmean - Averagecount - Count of rowscountDistinct - Count of unique valuesmin - Minimum valuemax - Maximum value
DataTable Props Advanced Features Column Groups Organize columns into groups:
< DataTable data = {financial_data} > < ColumnGroup title = "Revenue" > < Column id = "gross_revenue" fmt = "usd" /> < Column id = "net_revenue" fmt = "usd" /> </ ColumnGroup > < ColumnGroup title = "Costs" > < Column id = "cogs" fmt = "usd" /> < Column id = "operating_expenses" fmt = "usd" /> </ ColumnGroup > </ DataTable >
Text Wrapping Enable text wrapping for long content:
< DataTable data = {comments} wrapText = true > < Column id = "author" /> < Column id = "comment" wrap = "true" /> < Column id = "date" /> </ DataTable >
Initially Filtered Show filtered data by default:
```sql all_orders SELECT * FROM orders
## Markdown Tables For simple tables, you can use standard Markdown syntax: ```markdown | Product | Q1 Sales | Q2 Sales | Q3 Sales | |---------|----------|----------|----------| | Widget | $10,000 | $12,000 | $15,000 | | Gadget | $8,000 | $9,000 | $11,000 | | Doohickey | $5,000 | $6,000 | $7,500 |
Pivot Tables Create pivot tables using SQL:
SELECT category, SUM ( CASE WHEN YEAR (order_date) = 2021 THEN sales END ) as sales_2021, SUM ( CASE WHEN YEAR (order_date) = 2022 THEN sales END ) as sales_2022, SUM ( CASE WHEN YEAR (order_date) = 2023 THEN sales END ) as sales_2023 FROM orders GROUP BY category
< DataTable data = {pivot_data} > < Column id = "category" /> < Column id = "sales_2021" fmt = "usd" /> < Column id = "sales_2022" fmt = "usd" /> < Column id = "sales_2023" fmt = "usd" /> </ DataTable >
Best Practices
Limit columns - Too many columns make tables hard to readUse formatting - Apply appropriate formats (currency, percentages)Add search - For tables with many rowsUse content types - Visualize data with bars, sparklines, and color scalesConsider pagination - Set appropriate row limitsAdd context - Use column titles and tooltips
Next Steps
Charts Visualize data with charts
Text & Layout Format and organize content