The foldable component
A foldable list of elements which can be expanded individually.
Introduced in SQLPage v0.29.0.
Top-level parameters
class
CSS class(es) to add to the foldable container. When set at the top level, applies to the entire foldable component.
id
ID attribute added to the container in HTML. Used for targeting through CSS or for scrolling via links. When set at the top level, applies to the entire foldable component.
Row-level parameters
class
CSS class(es) to add to individual foldable items.
description
Plain text description of the item, displayed when expanded.
description_md
Markdown description of the item, displayed when expanded.
expanded
If set to TRUE, the foldable item starts in an expanded state. Defaults FALSE
id
ID attribute added to individual foldable items. Used for targeting through CSS or for scrolling via links.
title
Title of the foldable item, displayed on the button.
Example 1
A single foldable paragraph of text
select
'foldable' as component;
select
'The foldable component' as title,
'This is a simple foldable component. It can be used to show and hide content. It is a list of items, each with a title and a description. The description is displayed when the item is expanded.' as description;Result
This is a simple foldable component. It can be used to show and hide content. It is a list of items, each with a title and a description. The description is displayed when the item is expanded.
Example 2
A SQLPage-themed foldable list with Markdown
select
'foldable' as component;
select
'Quick Prototyping' as title,
'Build a functional web app prototype in minutes using just SQL queries:
- Rapid development
- Ideal for MVPs
- Great for internal tools
Learn more about [quick prototyping](/your-first-sql-website/).' as description_md,
TRUE as expanded;
select
'Data Visualization' as title,
'Quickly transform your database into useful insights:
1. **Charts**: Line, bar, pie
2. **KPIs**: Appealing visualizations of key metrics
3. **Maps**: Geospatial data
As simple as:
```sql
SELECT ''chart'' as component;
SELECT date as x, revenue as y FROM sales;
```' as description_md;
select
'Don''t stare, interact!' as title,
'SQLPage is not just a passive *Business Intelligence* tool. With SQLPage, you can act upon user input:
- *User input collection*: Building a form is just as easy as building a chart.
- *Data validation*: Write your own validation rules in SQL.
- *Database updates*: `INSERT` and `UPDATE` are first-class citizens.
- *File uploads*: Upload `CSV` and other files, store and display them the way you want.
> Let users interact with your data, not just look at it!' as description_md;Result
Build a functional web app prototype in minutes using just SQL queries:
- Rapid development
- Ideal for MVPs
- Great for internal tools
Learn more about quick prototyping.
Quickly transform your database into useful insights:
- Charts: Line, bar, pie
- KPIs: Appealing visualizations of key metrics
- Maps: Geospatial data
As simple as:
SELECT 'chart' as component;
SELECT date as x, revenue as y FROM sales;
SQLPage is not just a passive Business Intelligence tool. With SQLPage, you can act upon user input:
- User input collection: Building a form is just as easy as building a chart.
- Data validation: Write your own validation rules in SQL.
- Database updates:
INSERTandUPDATEare first-class citizens. - File uploads: Upload
CSVand other files, store and display them the way you want.
Let users interact with your data, not just look at it!