The foldable component
A foldable list of elements which can be expanded individually.
Introduced in SQLPage v0.29.0.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| class | TEXT |
CSS class(es) to add to the foldable container. When set at the top level, applies to the entire foldable component. | |
| id | TEXT |
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
| name | required | type | description |
|---|---|---|---|
| class | TEXT |
CSS class(es) to add to individual foldable items. | |
| description | TEXT |
Plain text description of the item, displayed when expanded. | |
| description_md | TEXT |
Markdown description of the item, displayed when expanded. | |
| expanded | BOOLEAN |
If set to TRUE, the foldable item starts in an expanded state. Defaults FALSE | |
| id | TEXT |
ID attribute added to individual foldable items. Used for targeting through CSS or for scrolling via links. | |
| title | TEXT |
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!