iFlow

Tables

Use data_table.html for list pages. Proper HTML tables with column alignment.

Data Table (Recommended)

Import: {% from "components/data_table.html" import data_table, data_table_empty %}

Name	Status	Created
Project Alpha	Active	2024-01-15
Project Beta	Pending	2024-02-20
Project Gamma	Error	2024-03-10

{% call data_table(["Name", "Status", "Created", ""], id="orders-table") %} {% for order in orders %} {{ order.name }} {{ tag(order.status, "green") }} {{ order.created_at.strftime('%Y-%m-%d') }} {{ button("Edit", variant="ghost", size="sm", icon="ti-edit") }} {% endfor %} {% endcall %}

Expandable Rows

Use two <tr> elements per row: summary + details with colspan.

Name	Status	Samples
Project Alpha	Active	3 samples
Description: Genomics analysis project for cancer research Created by: John Doe on Jan 15, 2024
Project Beta	Pending	5 samples
Description: Hereditary disease variant analysis Created by: Jane Smith on Feb 20, 2024

Project Alpha
    {{ tag("Active", "green") }}
    {{ data_table_expand_btn() }}

            Expanded content here...
        
{# Include JS once at bottom of page #}
{{ data_table_js() }}

Empty State

Use data_table_empty macro when no data is available.

Name	Status	Created
No orders found Create your first order to get started.

{% call data_table(["Name", "Status", "Created"], id="orders-table") %}
    {% if orders %}
        {% for order in orders %}
        ...
        {% endfor %}
    {% else %}
        {{ data_table_empty("No orders found", colspan=3, icon="ti-clipboard-off") }}
    {% endif %}
{% endcall %}

When to Use Each Table

Component	Use Case	Example
`data_table.html`	Recommended List pages, any table needing alignment	Orders, users, projects
`frozen_table.html`	Wide tables with frozen left/right columns	Variant browser
`table.html`	Deprecated Legacy accordion-style	Do not use for new features

Accordion Table (Deprecated)

Deprecated Use data_table.html instead. Accordion tables use CSS Grid divs which can cause column misalignment.

Name

Type

Status

Actions

Legacy Item One

Type A

Active

Legacy Item Two With Longer Name

Type B

Pending

{# DEPRECATED - Do not use for new features #}
{% from "components/table.html" import table %}

{% call table(["Name", "Type", "Status", "Actions"], columns="2fr 1fr 1fr 100px") %}
    Item Name
Type
{{ tag("Active", "green") }}
{{ button("Edit", variant="ghost", size="sm") }}

{% endcall %}