Data & Visualization¶

Components for displaying structured data, code, and visualizations.

Tables¶

Tables are used to organize complex data into rows and columns.

Example

{%- call ui.util.call(ui.table, striped=true) -%}
    {%- call ui.util.call(ui.table_head) -%}
        {%- call ui.util.call(ui.table_row) -%}
            {{ ui.table_cell(_("Name"), header=true) }}
            {{ ui.table_cell(_("Value"), header=true) }}
        {%- endcall -%}
    {%- endcall -%}
    {%- call ui.util.call(ui.table_body) -%}
        {%- call ui.util.call(ui.table_row) -%}
            {{ ui.table_cell("Item 1") }}
            {{ ui.table_cell("100") }}
        {%- endcall -%}
    {%- endcall -%}
{%- endcall -%}

Parameters for table

Parameter	Type	Description
`content`	any	Table content, typically table_head and table_body elements
`striped`	bool	Whether to show striped rows
`bordered`	bool	Whether to show borders around cells
`condensed`	bool	Whether to show condensed table with smaller cell padding
`hover`	bool	Whether to highlight rows on hover
`caption`	str	Optional caption for the table

Parameters for table_head

Parameter	Type	Description
`content`	any	Table head content, typically a single table_row element with header cells

Parameters for table_body

Parameter	Type	Description
`content`	any	Table body content, typically table_row elements

Parameters for table_row

Parameter	Type	Description
`content`	any	Table row content, typically table_cell elements

Parameters for table_cell

Parameter	Type	Description
`content`	any	Content of the table cell
`header`	bool	Whether this cell is a header cell (i.e. should be rendered as	instead of	)

Visualizations¶

Chart¶

Renders a chart using data provided in the parameters.

Example

{{ ui.chart(data=[10, 20, 30], labels=["A", "B", "C"], type="pie") }}

Parameters for chart

Parameter	Type	Description
`content`	any	Chart caption
`type`	str	Type of the chart (bar, line, pie, etc.)
`data`	dict\|list	Data for the chart, in a format specific to the chart type
`labels`	dict\|list	Labels for the chart data, in a format specific to the chart type

Technical Content¶

Code¶

Displays code blocks with optional syntax highlighting and dedenting.

Parameters for code

Parameter	Type	Description
`content`	any	Code content to display
`language`	str	Programming language of the code content, used for syntax highlighting
`dedent`	bool	Whether to remove common leading whitespace from each line in the code content