Table component

The Table component is a versatile element for displaying tabular data in the Unfold theme. It features responsive design that adapts to different screen sizes while maintaining consistent styling with the Unfold design system. The component supports table headers and rows with a mobile-friendly layout that includes data labels for smaller screens. Users can enable optional features such as striped rows and scrollable content with height limitations. The table component integrates seamlessly with the Card component and handles empty states gracefully when no data is available. It also includes full dark mode support with appropriate color adjustments to maintain readability and visual harmony in both light and dark environments.

Table component data

The table component requires a dictionary with the following structure:

• headers: A list of strings representing the column titles that will be displayed in the table header.
• rows: A list of lists, where each inner list represents a row of data. Each element in the inner list corresponds to a cell value that will be displayed in the respective column.

def dashboard_callback(request):
    return {
        "table_data": {
            "headers": ["col 1", "col 2"],
            "rows": [
                ["a", "b"],
                ["c", "d"],
            ]
        }
    }

Table component in HTML template

{% load unfold %}

{% component "unfold/components/card.html" with title="Card title" %}
    {% component "unfold/components/table.html" with table=table_data card_included=1 striped=1 %}{% endcomponent %}
{% endcomponent %}

Table component parameters