Table

template 2 required8 optional4 slots0 a11y rules

ReferenceGuide

Preview

variant
Table (default)
NameEmailRole
Alicealice@example.comAdmin
Bobbob@example.comEditor
Charliecharlie@example.comViewer
python
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)')

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.headers = ['Name', 'Email', 'Role']
        self.rows = [['Alice', 'alice@example.com', 'Admin'], ['Bob', 'bob@example.com', 'Editor'], ['Charlie', 'charlie@example.com', 'Viewer']]
my_template.html
django
{% load theme_components %}
{% theme_table variant='default' headers=headers rows=rows caption='Table (default)' %}

Props

NameTypeRequiredDefault
headerslistrequired—
rowslistrequired—
variantstrdefault
captionOptional[str]—
css_prefixstr—
attrsdict—
slot_captionstr—
slot_headerstr—
slot_bodystr—
slot_footerstr—

Slots

slot_caption slot_header slot_body slot_footer
Source & styles
FilePathNotes
templatedjust_theming/components/table.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 4 of this component's classes at line 602, 609, 641, 645. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/scaffold.cssDefines 2 of this component's classes at line 538, 558. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--border --foreground --muted --muted-foreground --radius
Template source — table.html
django
<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>