Component Templates

Dpgstack uses django-cotton for reusable HTML components. Components live in templates/cotton/:

Creating a component

<!-- templates/cotton/fancy/button.html -->
<button type="{{ type | default:'button' }}" class="{{ class }}">
    {{ slot }}
</button>

Using a component

<c-fancy.button class="px-4 py-2">Click me</c-fancy.button>

Component patterns

• {{ slot }} - Default content slot

• <c-slot name="header"> - Named slots

• :prop="value" - Pass dynamic values (Alpine syntax)

• {{ attrs }} - Merge extra attributes from caller

Model Templates

Model templates define how model data is displayed. Each model has a template in templates/<app>/.

Template Structure

Templates use django-cotton components and partialdef for fragments:

<c-base.for-table>
    <c-fancy.table.table>
        <c-slot name="tr_loop">
            {% partialdef table_row %}
                <c-fancy.table.row>
                    <!-- actions popup, then fields -->
                </c-fancy.table.row>
            {% endpartialdef %}
            {% partialdef edit_row %}
                <tr id="row-{{ piece.id }}">
                    <!-- edit form with inline fields -->
                </tr>
            {% endpartialdef %}
            {% for piece in queryset %}
                {% partial table_row %}
            {% endfor %}
        </c-slot>
    </c-fancy.table.table>
</c-base.for-table>

Key patterns

• {{ piece|get_field:field }} - Access model field value

• {{ form|get_item:field_name }} - Access form field

• {{ request.GET.order_by|figure_order:field }} - Sorting indicator

• {% querystring action='get-edit-row' %} - Append query params