Syntax

grid

Arranges components in columns and drops columns automatically when the container gets narrow.

Examples

Three KPI cards in one row show the best bid, best ask and last price.


    javascript
    
    
function main() {
    var ticker = exchange.GetTicker()
    if (!ticker) return
    LogStatus({
        type: "grid", cols: 3, minColWidth: 160, items: [
            {type: "kpi", title: "Bid", value: ticker.Buy},
            {type: "kpi", title: "Ask", value: ticker.Sell},
            {type: "kpi", title: "Last", value: ticker.Last}
        ]
    })
}


    python
    
    
def main():
    ticker = exchange.GetTicker()
    if not ticker:
        return
    LogStatus({
        "type": "grid", "cols": 3, "minColWidth": 160, "items": [
            {"type": "kpi", "title": "Bid", "value": ticker["Buy"]},
            {"type": "kpi", "title": "Ask", "value": ticker["Sell"]},
            {"type": "kpi", "title": "Last", "value": ticker["Last"]}
        ]
    })


    rust
    
    
fn kpi(title: &str, value: f64) -> String {
    format!(r#"{{"type": "kpi", "title": "{}", "value": {}}}"#, title, value)
}

fn main() {
    let Ok(t) = exchange.GetTicker(None) else { return };
    let items = [kpi("Bid", t.Buy), kpi("Ask", t.Sell), kpi("Last", t.Last)];
    // A component is JSON text passed to LogStatus! as is, without backticks
    LogStatus!(format!(
        r#"{{"type": "grid", "cols": 3, "minColWidth": 160, "items": [{}]}}"#,
        items.join(",")
    ));
}

Attributes

Name	Type	Description
type	string	Required. Always `grid`.
items	array	Required. Child components: any status bar component, or table and button objects.
cols	number	Desired number of columns, `1`–`12`. Defaults to the number of children.
minColWidth	number	Minimum column width in pixels; columns are dropped when they do not fit. Default `180`.
gap	string	Gap: `sm`, `md` or `lg`. Default `md`.
title	string	Title shown above the grid.
id	string	Stable identifier. Set it when the number or order of components changes, so refreshes do not rebuild the component.
span	number	Number of columns it spans in the enclosing `grid`. Default `1`.