Component basic/125

Component ID: basic/125

A data table generated dynamically from settings. Supports header row, multiple body rows, column widths, and 4 animation styles (fade-in, slide-in-left, slide-in-right, unfold). Rows and columns are defined in the data settings. Supports separate styling for header, odd/even rows, first column, and cells. Great for displaying statistics, comparisons, pricing tables, or any tabular data.

Section	Interactive or data-driven elements: buttons, counters, ratings, images, tables
Animation	4 styles: 'fade-in' (cells fade individually), 'slide-in-left' (rows slide from left), 'slide-in-right' (rows slide from right), 'unfold' (rows flip in with 3D rotation).
Intro duration	10 s

Preview

Element schema

Minimal shape of a basic/125 component element:

{
    "type": "component",
    "component": "basic/125",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`table`

Overall table styling.

Property	Type	Default	Description
`width`	string	—	Table width (e.g. '80%').
`vertical-align`	string (enum)	—	Vertical position. Values: `top`, `center`, `bottom`
`horizontal-align`	string (enum)	—	Horizontal position. Values: `left`, `center`, `right`
`font-family`	string	—	Default font.
`font-weight`	string	—	Default font weight.
`font-size`	string	—	Default font size.

`header`

Table header row.

Property	Type	Default	Description
`display`	string	—	Set to 'none' to hide header.
`color`	string	—	Header text color.
`column-widths`	string	—	Column widths separated by '\|\|' (e.g. '30%\|\|40%\|\|30%').

`rows`

Body row styling.

Property	Type	Default	Description
`color`	string	—	Row text color.
`margin`	string	—	Row margin.

`odd-rows`

Styling for odd-numbered rows.

Property	Type	Default	Description
`background`	string	—	Background color for odd rows.

`even-rows`

Styling for even-numbered rows.

Property	Type	Default	Description
`background`	string	—	Background color for even rows.

`first-column`

Styling for the first column.

Property	Type	Default	Description
`text-align`	string (enum)	—	Text alignment. Values: `left`, `center`, `right`
`border-right`	string	—	Right border (e.g. '2px solid #ccc').
`padding-right`	string	—	Right padding.

`cells`

Individual cell styling.

Property	Type	Default	Description
`padding`	string	—	Cell padding.

`data`

Table content.

Property	Type	Default	Description
`columns`	array	—	Array of column header strings.
`rows`	array	—	Array of row strings (columns separated by '\|\|') or array of arrays.

`animation`

Animation configuration.

Property	Type	Default	Description
`style`	string (enum)	`fade-in`	Animation style. Values: `fade-in`, `slide-in-left`, `slide-in-right`, `unfold`