Table

Display a table of data with dimensions, pivots, and measures

{% table
    data="demo_daily_orders"
%}
    {% dimension
        value="category"
    /%}
    {% pivot
        value="date"
        date_grain="year"
    /%}
    {% measure
        value="sum(total_sales)"
        fmt="usd1m"
    /%}
{% /table %}

Examples

Date Range Filtering

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    date_range={
      range="last 12 months"
      date="date"
    }
    fmt="usd1m"
  /%}
  {% measure
    value="sum(total_sales)"
    date_range={
      range="last 6 months"
      date="date"
    }
    fmt="usd1m"
  /%}
{% /table %}

Pivoting

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% pivot
    value="date"
    date_grain="year"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
  /%}
{% /table %}

Prior Year Comparison

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    date_range={
      range="last 12 months"
      date="date"
    }
    comparison={
      compare_vs="prior year"
    }
  /%}
{% /table %}

Calculated Measures

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales) / sum(transactions) as avg_price" 
    fmt="usd2"
  /%}
{% /table %}

Custom Grouping

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="case when category in ('Home','Clothing') then 'Home & Clothing' else 'Other' end as group"
  /%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
  /%}
  {% measure
    value="sum(total_sales) / sum(transactions) as avg_price"
    fmt="usd2"
  /%}
{% /table %}

Viz: Color Scale

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
    viz="color"
  /%}
{% /table %}

Viz: Color Scale with Custom Colors

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
    viz="color"
    color_options={
      color_scale=["#c0392b","#f4f4f4","#27ae60"]
    }
  /%}
{% /table %}

Viz: Bar

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
    viz="bar"
  /%}
{% /table %}

Viz: Bar with Custom Colors

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
    viz="bar"
    bar_options={
      bar_color="#2c7d00"
    }
  /%}
  {% measure
    value="sum(transactions)"
    viz="bar"
    bar_options={
      bar_color="#339e9c"
    }
  /%}
{% /table %}

Viz: Delta

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    date_range={
      range="last 12 months"
      date="date"
    }
    comparison={
      compare_vs="prior year"
    }
    viz="delta"
  /%}
{% /table %}

Viz: Sparkline

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% pivot
    value="date"
    date_grain="year"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
    viz="sparkline"
    sparkline_options={
      x="date"
      type="area"
    }
  /%}
{% /table %}

Links

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
    link="concat('https://www.google.com/search?q=',category)"
    link_new_tab=true
  /%}
  {% measure
    value="sum(total_sales)"
  /%}
{% /table %}

Column Info

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
    info="Includes all product sales"
  /%}
{% /table %}

Sorting

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="category"
  /%}
  {% measure
    value="sum(total_sales)"
    fmt="usd1m"
    viz="color"
    sort="asc"
  /%}
{% /table %}

Date Grains: Day of Week

{% table
  data="demo_daily_orders"
%}
  {% dimension
    value="date"
    date_grain="day of week"
  /%}
  {% measure
    value="sum(total_sales)"
  /%}
{% /table %}

Attributes

data · String · required

filters · Array

date_range

Use date_range to filter data for specific time periods. Accepts predefined ranges (e.g., “last 12 months”), dynamic ranges (e.g., “Last 90 days”), custom date ranges (e.g., “2020-01-01 to 2023-03-01”), or partial ranges (e.g., “from 2020-01-01”, “until 2023-03-01”)

Example:

date_range={
  range = value
  date = "string"
}

Attributes:

• range: enum
• date: string

where · String

Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.

having · String

Custom SQL HAVING condition to apply to the query after GROUP BY

limit · Number

Maximum number of rows to return from the query

order · String

Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)

qualify · String

Custom SQL QUALIFY condition to filter windowed results

title · String

Title to display above the table

subtitle · String

Subtitle to display below the title

info · String

Info text to display in a tooltip next to the title. Can only be used with the title prop.

info_link · String

URL to link the info text to (can only be used with info)

info_link_title · String

Create a custom link title for the info link, placed after the info text (can only be used with info_link)

dimensions · Array · default: "[]"

Array of dimension column names or SQL expressions. Each item must be a string (e.g., [“column_name”, “count(category) as count”])

pivots · Array · default: "[]"

Array of pivot column names or SQL expressions. These will be pivoted in the table output. Each item must be a string (e.g., [“category”, “region”])

measures · Array · default: "[]"

Array of SQL expressions for aggregations. Each item must be a string (e.g., [“sum(transactions)”, “avg(value) as average”])

subtotals · Boolean · default: "true"

Whether to include subtotals and totals in the table

show_total_row · Boolean · default: "true"

Whether to display the total row at the bottom. Only applies when subtotals=true. Note: Temporal comparisons may hide totals even when this is true.

show_subtotal_rows · Boolean · default: "true"

Whether to display intermediate subtotal rows. Only applies when subtotals=true. Note: Temporal comparisons may hide subtotals even when this is true.

show_total_column · Boolean · default: "true"

Whether to display the total column in pivoted tables. Only applies when subtotals=true and pivots are used.

show_subtotal_columns · Boolean · default: "true"

Whether to display intermediate subtotal columns in pivoted tables. Only applies when subtotals=true and pivots are used.

measures_first · Boolean · default: "false"

Whether to put measures before pivots in the column hierarchy (e.g., Sales > 2021|2022 instead of 2021|2022 > Sales)

page_size · Number · default: "10"

Number of rows to display per page in pagination (maximum 100)

search · Boolean · default: "false"

Whether to display a search box above the table for filtering results

format_titles · Boolean · default: "true"

Whether to apply formatting to column titles. When false, titles will be displayed as-is.

wrap_titles · Boolean · default: "true"

Whether to allow column titles to wrap across multiple lines. When false, titles will be on a single line.

wrap · Boolean · default: "false"

Whether to allow table cell content to wrap across multiple lines. When false, cell content will be on a single line.

row_shading · Boolean · default: "false"

Whether to apply alternating background colors to table rows for easier reading.

row_lines · Boolean · default: "true"

Whether to display borders between table rows. When false, row borders are hidden.

link · String

Column name containing URLs to make each row clickable. When specified, clicking a row will navigate to the URL in that column.

show_link_column · Boolean · default: "false"

Whether to display the link column in the table. Only applies when no explicit columns are specified and the link prop is used.

width · Number

Set the width of this component (in percent) relative to the page width

Allowed Children

• dimension
• measure
• pivot