The timeline component displays a list of events in chronological order with a vertical line connecting them. Each event can have an icon, color, date, title, and description.
Basic Usage
SELECT 'timeline' AS component;
SELECT
'First Event' AS title,
'2024-03-01' AS date,
'This is the first event' AS description;
Top-Level Properties
Display timeline in condensed format without icons
Event Properties
Date or time of the event (displayed on the right side)
Icon to display next to the event (from tabler-icons.io). Default: ‘git-commit’
Color of the icon background
Textual description of the event
Description in Markdown format with rich text support
Link to a page with more information about the event
Examples
Simple Timeline
SELECT 'timeline' AS component, true AS simple;
SELECT
'New message from Elon Musk' AS title,
'13:00' AS date;
SELECT
'Jeff Bezos assigned task "work more" to you.' AS title,
'yesterday, 16:35' AS date;
Rich Timeline with Icons and Colors
SELECT 'timeline' AS component;
SELECT
'v0.13.0 was just released!' AS title,
'https://github.com/sqlpage/SQLPage/releases/' AS link,
'2023-10-16' AS date,
'brand-github' AS icon,
'green' AS color,
'This version introduces the `timeline` component.' AS description_md;
SELECT
'They are talking about us...' AS title,
'[This article](https://www.postgresql.org/about/news/) on PostgreSQL website mentions SQLPage.' AS description_md,
'2023-07-12' AS date,
'database' AS icon,
'blue' AS color;
Project Timeline
SELECT 'timeline' AS component;
SELECT
'Project Kickoff' AS title,
'2024-01-15' AS date,
'star' AS icon,
'yellow' AS color,
'Initial project meeting with stakeholders' AS description;
SELECT
'Requirements Gathering' AS title,
'2024-01-22' AS date,
'clipboard-list' AS icon,
'blue' AS color,
'Completed functional requirements document' AS description;
SELECT
'Development Phase' AS title,
'2024-02-01' AS date,
'code' AS icon,
'purple' AS color,
'**Sprint 1-4**: Core features implementation' AS description_md;
SELECT
'Testing & QA' AS title,
'2024-03-01' AS date,
'bug' AS icon,
'orange' AS color,
'Quality assurance and bug fixing' AS description;
SELECT
'Launch' AS title,
'2024-03-15' AS date,
'rocket' AS icon,
'green' AS color,
'/launch-details.sql' AS link,
'**Production deployment successful!**' AS description_md;
Company History Timeline
SELECT 'timeline' AS component;
SELECT
'Company Founded' AS title,
'2010-06-01' AS date,
'building' AS icon,
'Started in a garage with 3 founders' AS description;
SELECT
'First Customer' AS title,
'2010-09-15' AS date,
'user-check' AS icon,
'green' AS color,
'Signed our first enterprise customer' AS description;
SELECT
'Series A Funding' AS title,
'2012-03-20' AS date,
'currency-dollar' AS icon,
'blue' AS color,
'Raised $5M in Series A funding' AS description;
SELECT
'International Expansion' AS title,
'2015-01-10' AS date,
'world' AS icon,
'purple' AS color,
'Opened offices in London and Tokyo' AS description;
SELECT
'IPO' AS title,
'2020-11-05' AS date,
'trending-up' AS icon,
'yellow' AS color,
'Successfully went public on NASDAQ' AS description;
Activity Log Timeline
SELECT 'timeline' AS component;
SELECT
'User Login' AS title,
'Just now' AS date,
'login' AS icon,
'green' AS color,
'User **john.doe** logged in from IP 192.168.1.100' AS description_md;
SELECT
'File Upload' AS title,
'5 minutes ago' AS date,
'upload' AS icon,
'blue' AS color,
'Uploaded `report_2024.pdf` (2.3 MB)' AS description_md;
SELECT
'Settings Changed' AS title,
'1 hour ago' AS date,
'settings' AS icon,
'Updated notification preferences' AS description;
SELECT
'Failed Login Attempt' AS title,
'2 hours ago' AS date,
'alert-triangle' AS icon,
'red' AS color,
'Failed login from IP 45.67.89.123' AS description;
Notes
The timeline component is perfect for displaying chronological events, version histories, activity logs, or project milestones.
Use the simple property for compact timelines with many events, or omit it for a more visually rich timeline with icons.
Combine colors and icons to create visual categories for different types of events.
The date field accepts any text, so you can use relative times like “Just now”, “5 minutes ago”, or precise dates like “2024-03-02”.