Table — Component Storybook

LIVE PREVIEW 3

table(variant=default, headers=['Name', 'Email', 'Role'], rows=[['Alice', 'alice@example.com', 'Admin'], ['Bob', 'bob@example.com', 'Editor'], ['Charlie', 'charlie@example.com', 'Viewer']], caption=Table (default))

table(variant=striped, headers=['Name', 'Email', 'Role'], rows=[['Alice', 'alice@example.com', 'Admin'], ['Bob', 'bob@example.com', 'Editor'], ['Charlie', 'charlie@example.com', 'Viewer']], caption=Table (striped))

table(variant=hover, headers=['Name', 'Email', 'Role'], rows=[['Alice', 'alice@example.com', 'Admin'], ['Bob', 'bob@example.com', 'Editor'], ['Charlie', 'charlie@example.com', 'Viewer']], caption=Table (hover))

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 2

Name	Type	Default
`headers`	`list`	—
`rows`	`list`	—

PROPS — OPTIONAL 8

Name	Type	Default
`variant`	`str`	default
`caption`	`Optional[str]`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_caption`	`str`	—
`slot_header`	`str`	—
`slot_body`	`str`	—
`slot_footer`	`str`	—

AVAILABLE SLOTS 4

slot_caption slot_header slot_body slot_footer

CSS VARIABLES 11

--border --color-border-subtle --color-surface --color-text-muted --foreground --muted --muted-foreground --radius --space-3 --text-sm --text-xs

TEMPLATE SOURCE

table.html

<div class="{{ css_prefix }}table-container {% if attrs.class %}{{ attrs.class }}{% endif %}"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    <table class="{{ css_prefix }}table {{ css_prefix }}table-{{ variant }}">
        {% if slot_caption %}
        <caption>{{ slot_caption|safe }}</caption>
        {% elif caption %}
        <caption>{{ caption }}</caption>
        {% endif %}
        {% if slot_header %}
        <thead>{{ slot_header|safe }}</thead>
        {% else %}
        <thead>
            <tr>
                {% for header in headers %}
                <th>{{ header }}</th>
                {% endfor %}
            </tr>
        </thead>
        {% endif %}
        {% if slot_body %}
        <tbody>{{ slot_body|safe }}</tbody>
        {% else %}
        <tbody>
            {% for row in rows %}
            <tr>
                {% for cell in row %}
                <td>{{ cell }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
        {% endif %}
        {% if slot_footer %}
        <tfoot>{{ slot_footer|safe }}</tfoot>
        {% endif %}
    </table>
</div>