Skip to main content
The table component renders SQL query results directly as HTML tables. Unlike most components, it doesn’t have fixed properties - any column in your SQL result becomes a column in the table.

​
Basic Usage

SELECT 'table' AS component;
SELECT 'John' AS name, 25 AS age;
SELECT 'Jane' AS name, 30 AS age;

​
Top-Level Properties

​
sort
boolean
Make columns clickable to let users sort by any column
​
search
boolean
Add a search bar at the top to filter table rows
​
initial_search_value
text
Pre-fill the search bar with this value (user can still edit it)
​
search_placeholder
text
Custom placeholder text for the search input (default: “Search…”)
​
markdown
text
Name of a column whose content should be interpreted as Markdown. Can be repeated for multiple columns.
​
icon
text
Name of a column whose content should be interpreted as a Tabler icon name. Can be repeated.
​
align_right
text
Name of a column to right-align. Can be repeated for multiple columns.
​
align_center
text
Name of a column to center-align. Can be repeated for multiple columns.
​
monospace
text
Name of a column to display in monospace font. Can be repeated.
​
striped_rows
boolean
Add zebra-striping to table rows
​
striped_columns
boolean
Add zebra-striping to table columns
​
hover
boolean
Enable hover state on table rows
​
border
boolean
Draw borders on all sides of the table and cells
​
small
boolean
Use a more compact table layout
​
overflow
boolean
Enable horizontal scrolling for wide tables
​
description
text
Caption for the table (helps screen readers)
​
empty_description
text
Text to display if the table has no rows (default: “no data”)
​
freeze_columns
boolean
Freeze the leftmost column when scrolling horizontally
​
freeze_headers
boolean
Freeze the top row when scrolling vertically
​
freeze_footers
boolean
Freeze the footer row when scrolling
​
raw_numbers
text
Name of a numeric column to display without formatting. Can be repeated.
​
money
text
Name of a numeric column to format as currency. Can be repeated.
​
currency
text
ISO 4217 currency code (USD, EUR, GBP, etc.) for money columns
​
number_format_digits
integer
Maximum number of decimal digits for numeric values
​
edit_url
url
Add an edit button to each row. Use {id} placeholder for the _sqlpage_id value.
​
delete_url
url
Add a delete button to each row. Use {id} placeholder for the _sqlpage_id value.
​
custom_actions
json
JSON array of custom action buttons: [{"name":"View", "icon":"eye", "link":"/view?id={id}", "tooltip":"View details"}]

​
Row Properties

You can include special columns in your SQL query to control row appearance:
​
_sqlpage_css_class
text
CSS class to apply to this row
​
_sqlpage_color
color
Background color for this row
​
_sqlpage_footer
boolean
Mark this row as a table footer
​
_sqlpage_id
text
ID for this row (used in edit/delete/action links)
​
_sqlpage_actions
json
Row-specific action buttons (same format as custom_actions)

​
Examples

​
Simple Table

SELECT 'table' AS component;
SELECT 'Alice' AS name, 30 AS age;
SELECT 'Bob' AS name, 25 AS age;

​
Searchable and Sortable Table

SELECT 'table' AS component,
       true AS sort,
       true AS search,
       'Filter by name' AS search_placeholder;
       
SELECT 
    'Ophir' AS "First Name",
    'Lojkine' AS "Last Name",
    'lovasoa' AS Pseudonym;
    
SELECT 
    'Linus' AS "First Name",
    'Torvalds' AS "Last Name",
    'torvalds' AS Pseudonym;

​
Table with Markdown and Icons

SELECT 'table' AS component,
       'Name' AS markdown,
       'icon' AS icon,
       true AS search;
       
SELECT 
    'table' AS icon,
    '[Table](?component=table)' AS Name,
    'Displays SQL results as a searchable table.' AS description,
    'red' AS _sqlpage_color;
    
SELECT 
    'timeline' AS icon,
    '[Chart](?component=chart)' AS Name,
    'Show graphs based on numeric data.' AS description;

SELECT 'table' AS component, true AS sort;

SELECT 'Rudolph Lingens' AS Person, 190 AS Height;
SELECT 'Jane Doe' AS Person, 150 AS Height;
SELECT 'John Doe' AS Person, 200 AS Height;

-- Footer row
SELECT 
    true AS _sqlpage_footer,
    'green' AS _sqlpage_color,
    'Average' AS Person,
    180 AS Height;

​
Table with Formatted Numbers

SELECT 'table' AS component,
       true AS sort,
       'Price' AS align_right,
       'Amount in stock' AS align_right,
       'part_no' AS align_center,
       'id' AS raw_numbers,
       'USD' AS currency,
       'Price' AS money;
       
SELECT 
    31456 AS id,
    'SQL-TABLE-856-G' AS part_no,
    12 AS Price,
    5 AS "Amount in stock";
    
SELECT 
    996 AS id,
    'SQL-FORMS-86-M' AS part_no,
    1 AS Price,
    1234 AS "Amount in stock";

​
Table with Action Buttons

SELECT 'table' AS component,
       '/examples/edit.sql?id={id}' AS edit_url,
       '/examples/delete.sql?id={id}' AS delete_url,
       json_object(
           'name', 'history',
           'tooltip', 'View History',
           'link', '/examples/history.sql?id={id}',
           'icon', 'history'
       ) AS custom_actions;

SELECT 
    'CalStd' AS name,
    'PharmaCo' AS vendor,
    'P1234' AS Product,
    'Available' AS status,
    32 AS _sqlpage_id;

​
Frozen Columns and Headers

SELECT 'table' AS component,
       true AS freeze_columns,
       true AS freeze_headers;
       
SELECT 
    'SQL Execution' AS feature,
    'Fully compatible with existing databases' AS description,
    'Short learning curve' AS benefits;

​
Notes

Tables automatically handle column names from your SQL query - no need to specify them manually.
Use _sqlpage_ prefix for special control columns that affect row behavior but aren’t displayed as table columns.
When using _sqlpage_actions, ensure all rows have the same number of actions or use empty objects with just the name property to create blank spaces.

Build docs developers (and LLMs) love

Get started for freeTalk to us