A table with optional filtering and sorting.
Unlike most others, this component does not have a fixed set of item properties, any property that is used will be rendered directly as a column in the table.
Tables can contain rich text, including images, links, and icons. Table rows can be styled with a background color, and the table can be made striped, hoverable, and bordered.
Advanced users can apply custom styles to table columns using a CSS class with the same name as the column, and to table rows using the _sqlpage_css_class property.
Top-level parameters
name
required
type
description
align_center
TEXT
Name of a column the contents of which should be center-aligned. This argument can be repeated multiple times to align multiple columns to the center.
align_right
TEXT
Name of a column the contents of which should be right-aligned. This argument can be repeated multiple times to align multiple columns to the right. Introduced in v0.15.0.
border
BOOLEAN
Whether to draw borders on all sides of the table and cells.
class
TEXT
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
description
TEXT
Description of the table content and helps users with screen readers to find a table and understand what it’s.
empty_description
TEXT
Text to display if the table does not contain any row. Defaults to "no data".
freeze_columns
BOOLEAN
Whether to freeze the leftmost column of the table.
freeze_headers
BOOLEAN
Whether to freeze the top row of the table.
hover
BOOLEAN
Whether to enable a hover state on table rows.
icon
TEXT
Set this to the name of a column whose content should be interpreted as a tabler icon name. Used to display icons in the table. This argument can be repeated multiple times to intepret multiple columns as icons. Introduced in v0.8.0.
id
TEXT
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
initial_search_value
TEXT
Pre-fills the search bar used to filter the table. The user will still be able to edit the value to display table rows that will initially be filtered out.
markdown
TEXT
Set this to the name of a column whose content should be interpreted as markdown . Used to display rich text with links in the table. This argument can be repeated multiple times to intepret multiple columns as markdown.
monospace
TEXT
Name of a column the contents of which should be displayed in monospace. This argument can be repeated multiple times to display multiple columns in monospace. Introduced in v0.32.1.
overflow
BOOLEAN
Whether to to let "wide" tables overflow across the right border and enable browser-based horizontal scrolling.
search
BOOLEAN
Add a search bar at the top of the table, letting users easily filter table rows by value.
small
BOOLEAN
Whether to use compact table.
sort
BOOLEAN
Make the columns clickable to let the user sort by the value contained in the column.
striped_columns
BOOLEAN
Whether to add zebra-striping to any table column.
Sets the background color of the row. Added in v0.8.0.
_sqlpage_css_class
TEXT
For advanced users. Sets a css class on the table row. Added in v0.8.0.
_sqlpage_id
TEXT
Sets the id of the html tabler row element. Allows you to make links targeting a specific row in a table.
Example 1
The most basic table.
select
'table' as component;
select
1 as a,
2 as b;
select
3 as a,
4 as b;
Result
a
b
1
2
3
4
Example 2
A table of users with filtering and sorting.
select
'table' as component,
TRUE as sort,
TRUE as search;
select
'Ophir' as "First Name",
'Lojkine' as "Last Name",
'lovasoa' as Pseudonym;
select
'Linus' as "First Name",
'Torvalds' as "Last Name",
'torvalds' as Pseudonym;
Result
Ophir
Lojkine
lovasoa
Linus
Torvalds
torvalds
Example 3
A table that uses markdown to display links
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;
A table with column sorting. Sorting sorts numbers in numeric order, and strings in alphabetical order.
select
'table' as component,
TRUE as sort,
'Price ($)' as align_right,
'Amount in stock' as align_right,
'part_no' as align_center;
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 ($)",
15 as "Amount in stock";
select
131456 as id,
'SQL-CARDS-56-K' as part_no,
127 as "Price ($)",
9 as "Amount in stock";
Result
31456
SQL-TABLE-856-G
12
5
996
SQL-FORMS-86-M
1
15
131456
SQL-CARDS-56-K
127
9
Example 5
A table with some presentation options
select
'table' as component,
TRUE as hover,
TRUE as striped_rows,
'Some Star Trek Starfleet starships' as description,
TRUE as small,
'NCC-' as initial_search_value;
select
'USS Enterprise' as name,
'NCC-1701-C' as registry,
'Ambassador' as class;
select
'USS Archer' as name,
'NCC-44278' as registry,
'Archer' as class;
select
'USS Endeavour' as name,
'NCC-06' as registry,
'Columbia' as class;
select
'USS Constellation' as name,
'NCC-1974' as registry,
'Constellation' as class;
select
'USS Dakota' as name,
'NCC-63892' as registry,
'Akira' as class;
select
'USS Defiant' as name,
'IX-74205' as registry,
'Defiant' as class;
Result
Some Star Trek Starfleet starships
name
registry
class
USS Enterprise
NCC-1701-C
Ambassador
USS Archer
NCC-44278
Archer
USS Endeavour
NCC-06
Columbia
USS Constellation
NCC-1974
Constellation
USS Dakota
NCC-63892
Akira
USS Defiant
IX-74205
Defiant
Example 6
An empty table with a friendly message
select
'table' as component,
'Nothing to see here at the moment.' as empty_description;
Result
Nothing to see here at the moment.
Example 7
A large table with many rows and columns, with frozen columns on the left and headers on top. This allows users to browse large datasets without loosing track of their position.
select
'table' as component,
TRUE as freeze_columns,
TRUE as freeze_headers;
select
'SQL Execution' as feature,
'Fully compatible with existing databases SQL dialects, executes any SQL query.' as description,
'Short learning curve, easy to use, interoperable with existing tools.' as benefits;
select
'Data Visualization' as feature,
'Automatic visualizations of query results: graphs, plots, pie charts, heatmaps, etc.' as description,
'Quickly analyze data trends, attractive and easy to understand, no external visualization tools or languages to learn.' as benefits;
select
'User Authentication' as feature,
'Supports user sessions, from basic auth to single sign-on.' as description,
'Secure, enforces access control policies, and provides a customizable security layer.' as benefits;
select
'APIs' as feature,
'Allows building JSON REST APIs and integrating with external APIs.' as description,
'Enables automation and integration with other platforms, facilitates data exchange.' as benefits;
select
'Files' as feature,
'File uploads, downloads and processing. Supports local filesystem and database storage.' as description,
'Convenient file management, secure data handling, flexible storage options, integrates with existing systems.' as benefits;
select
'Maps' as feature,
'Supports GeoJSON and is compatible with GIS data for map visualization.' as description,
'Geospatial data representation, integrates with geographic information systems.' as benefits;
select
'Custom Components' as feature,
'Build advanced features using HTML, JavaScript, and CSS.' as description,
'Tailor-made user experiences, easy to implement custom UI requirements.' as benefits;
select
'Forms' as feature,
'Insert and update data in databases based on user input.' as description,
'Simplified data input and management, efficient user interactions with databases.' as benefits;
select
'DB Compatibility' as feature,
'Works with MySQL, PostgreSQL, SQLite, Microsoft SQL Server and compatible databases.' as description,
'Broad compatibility with popular database systems, ensures seamless integration.' as benefits;
select
'Security' as feature,
'Built-in protection against common web vulnerabilities: no SQL injection, no XSS.' as description,
'Passes audits and security reviews, reduces the risk of data breaches.' as benefits;
select
'Performance' as feature,
'Designed for performance, with a focus on efficient data processing and minimal overhead.' as description,
'Quickly processes large datasets, handles high volumes of requests, and minimizes server load.' as benefits;
Result
feature
description
benefits
SQL Execution
Fully compatible with existing databases SQL dialects, executes any SQL query.
Short learning curve, easy to use, interoperable with existing tools.
Data Visualization
Automatic visualizations of query results: graphs, plots, pie charts, heatmaps, etc.
Quickly analyze data trends, attractive and easy to understand, no external visualization tools or languages to learn.
User Authentication
Supports user sessions, from basic auth to single sign-on.
Secure, enforces access control policies, and provides a customizable security layer.
APIs
Allows building JSON REST APIs and integrating with external APIs.
Enables automation and integration with other platforms, facilitates data exchange.
Files
File uploads, downloads and processing. Supports local filesystem and database storage.
Convenient file management, secure data handling, flexible storage options, integrates with existing systems.
Maps
Supports GeoJSON and is compatible with GIS data for map visualization.
Geospatial data representation, integrates with geographic information systems.
Custom Components
Build advanced features using HTML, JavaScript, and CSS.
Tailor-made user experiences, easy to implement custom UI requirements.
Forms
Insert and update data in databases based on user input.
Simplified data input and management, efficient user interactions with databases.
DB Compatibility
Works with MySQL, PostgreSQL, SQLite, Microsoft SQL Server and compatible databases.
Broad compatibility with popular database systems, ensures seamless integration.
Security
Built-in protection against common web vulnerabilities: no SQL injection, no XSS.
Passes audits and security reviews, reduces the risk of data breaches.
Performance
Designed for performance, with a focus on efficient data processing and minimal overhead.
Quickly processes large datasets, handles high volumes of requests, and minimizes server load.
Examples
Dynamic column names in a table
In all the previous examples, the column names were hardcoded in the SQL query.
This makes it very easy to quickly visualize the results of a query as a table,
but it can be limiting if you want to include columns that are not known in advance.
In situations when the number and names of the columns depend on the data, or on variables,
you can use the dynamic component to generate the table columns dynamically.
For that, you will need to return JSON objects from your SQL query, where the keys are the column names,
and the values are the cell contents.
In PostgreSQL, you can use the json_build_object
function for a fixed number of columns, or json_object_agg for a dynamic number of columns.
In SQLite, you can use the json_object function for a fixed number of columns,
or the json_group_object function for a dynamic number of columns.
In MySQL, you can use the JSON_OBJECT function for a fixed number of columns,
or the JSON_OBJECTAGG function for a dynamic number of columns.
In Microsoft SQL Server, you can use the FOR JSON PATH clause.
For instance, let's say we have a table with three columns: store, item, and quantity_sold.
We want to create a pivot table where each row is a store, and each column is an item.
We will return a set of json objects that look like this: {"store":"Madrid", "Item1": 42, "Item2": 7, "Item3": 0}
SELECT 'table' AS component;
with filled_data as (
select
stores.store, items.item,
(select coalesce(sum(quantity_sold), 0) from store_sales where store=stores.store and item=items.item) as quantity
from (select distinct store from store_sales) as stores
cross join (select distinct item from store_sales) as items
order by stores.store, items.item
)
SELECT
'dynamic' AS component,
JSON_PATCH( -- SQLite-specific, refer to your database documentation for the equivalent JSON functions
JSON_OBJECT('store', store),
JSON_GROUP_OBJECT(item, quantity)
) AS properties
FROM
filled_data
GROUP BY
store;
This will generate a table with the stores in the first column, and the items in the following columns, with the quantity sold in each store for each item.