Skip to main content
SQLPage uses a component-based system to render SQL query results as beautiful, interactive web pages. Each component represents a different type of UI element, from lists and tables to charts and forms.

​
How Components Work

  1. Select the component: Start your SQL query by selecting a component name
  2. Configure the component: The first row sets top-level properties
  3. Add items: Subsequent rows add individual items to the component
SELECT 'list' AS component;
SELECT 'My First Item' AS title, 'A description' AS description;
SELECT 'My Second Item' AS title;

​
Display Components

List

Display items in a vertical list with icons, descriptions, and actions

Table

Render SQL results as searchable, sortable tables

Card

Create responsive card grids for displaying content

Datagrid

Show key-value pairs in a clean, readable layout

Hero

Build impressive landing pages with large headers and images

Chart

Visualize data with line, bar, pie, and other chart types

Timeline

Display events chronologically with a vertical timeline

Big Number

Highlight key metrics and statistics in dashboards

​
Input Components

Form

Collect data with forms - text, numbers, dates, files, and more

Button

Create clickable buttons with colors, icons, and actions

​
Layout Components

Shell

Page layout with navigation, menus, and custom styles

Columns

Create responsive multi-column layouts

Tab

Organize content with tabbed interfaces

Modal

Display content in popup dialogs

Divider

Separate content with horizontal dividers

Breadcrumb

Show hierarchical navigation trails

​
Special Components

Map

Display interactive maps with markers and GeoJSON

Authentication

Handle login, logout, and password reset

Debug

Inspect query results during development

HTML

Include custom HTML content

JSON

Output JSON for API endpoints

CSV

Export data as downloadable CSV files

​
Common Patterns

​
Top-Level vs Row-Level Properties

Most components have two types of properties:
  • Top-level properties: Set once for the entire component (title, layout options, etc.)
  • Row-level properties: Set for each item in the component

​
Markdown Support

Many components support both plain text and Markdown versions of text properties:
  • description: Plain text
  • description_md: Markdown with bold, italic, links, etc.

​
Colors and Icons

Components use Tabler icons and a consistent color palette:
  • Icons: Use icon names like user, database, check
  • Colors: Use color names like red, blue, green, purple

​
Next Steps

Explore individual component pages to see detailed property documentation and examples.

Build docs developers (and LLMs) love

Get started for freeTalk to us