STL Syntax

STL (Structured Table Language) is a simple, human-readable format for defining tables. It is designed to be easy to write and readable by machines.

Basic Structure

A generic table starts with a `#table` declaration followed by configuration properties. Sections are defined by `[header]`, `[body]`, and `[footer]`. And ends with `#endtable`

STL
#table
name: Comparison Table
cols: 4
showSerialIndex: true

[header]
Title | Feature | Value | CTA

[body]
Plan A | Fast | 120ms | [button text="Buy" url="/buy-a" action="action" targetId="target-id"]
Plan B | Medium | 20ms | [link text="Learn More" href="/plans/b" newTab="true"]

[footer]
Note | * | * | Data updated weekly

#endtable

Cell Types

STL supports structured cell types like text, links and buttons directly in the syntax.

Links

Use `[link]` and html style to add attributes (only a few attribute are supported text, href, newTab).

STL
[body]
Learn More | [link text="Learn More" href="https://example.com" newTab="true" ]

Buttons

Use `[button]` to create interactive elements, check this: How to add Buttons

`text`: The label displayed on the button.
`url`(optional): if you pass a url it redirects to that url
`action`(optional): A string identifier for the action (e.g., 'edit', 'delete')
`targetId`(optional): Associated ID for the action (e.g., product ID), this will be added as <button id="your-id" ... />
`variant`(default: 'default'): 'default', 'outline', 'ghost' (depends on theme support).

STL
[body]
Product 1st | ₹ 2,999 | [button text="Buy Now" url="/buy-a" action="action" targetId="target-id"]

Attributes

You can apply styling attributes to any cell. Supported attributes include:

colSpan: Number of columns the cell should span.
rowSpan: Number of rows the cell should span.
align: 'left', 'center', or 'right'.

STL
Plan A | Fast120ms{colSpan=2,align=center} | 120ms{rowSpan=2} | [button text="Buy" url="/buy-a" action="action" targetId="target-id"]