Charts & Plugins

Charts, maps, data tables and the rich-text editor are optional plugin-backed Tool components. Each renders a data-* container with a JSON config; the shipped initializer lazily imports the matching library only when an element is on the page — so you install just the plugins you use.

How it works

When you scaffold the Vite front-end with adminlte_install, it copies assets/adminlte-plugins.js and wires it into assets/app.js. On DOMContentLoaded the initializer scans the page; if it finds a data-apexchart, data-tabulator-config, data-jsvectormap, data-quill or data-sortable element, it dynamically imports the corresponding library and mounts it. Install only the libraries whose components you actually render:

npm i apexcharts jsvectormap tabulator-tables quill sortablejs   # pick what you need

Charts (ApexCharts)

The adminlte_chart component builds the ApexCharts config from type, series and categories, merging any options dict on top. Provide the data from your view:

# views.py
def dashboard(request):
    return render(request, "dashboard.html", {
        "series": [{"name": "Revenue", "data": [31, 40, 28, 51, 42, 109, 100]}],
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    })

{% component "adminlte_chart" type="area" series=series categories=labels height="300px" %}{% endcomponent %}

Data tables (Tabulator)

Pass columns plus either inline data or an api_url for server-side rows:

{% component "adminlte_datatable" columns=columns data=rows %}{% endcomponent %}

{# or load rows over AJAX #}
{% component "adminlte_datatable" columns=columns api_url="/api/contacts/" %}{% endcomponent %}

Vector maps (jsVectorMap)

{% component "adminlte_vector_map" map="world" markers=markers height="400px" %}{% endcomponent %}

Rich-text editor (Quill)

Bind a Django form field; the component emits a hidden input (the form value) plus a data-quill container that syncs HTML back to the input on change:

{% component "adminlte_editor" field=form.body placeholder="Write your post…" %}{% endcomponent %}

Drag-and-drop (SortableJS)

{% component "adminlte_sortable" group="tasks" %}
    <div class="card p-2 mb-2">Task A</div>
    <div class="card p-2 mb-2">Task B</div>
{% endcomponent %}

Node-free alternative (CDN)

If you run in "static" mode (no Vite), the plugin initializer isn't bundled. Add any library from a CDN and initialise it in the page's extra_js block instead — the components still render valid markup you can target:

{% block extra_js %}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        new ApexCharts(document.querySelector("#revenue-chart"), {
            chart: { type: "area", height: 300 },
            series: [{ name: "Revenue", data: [31, 40, 28, 51, 42, 109, 100] }],
            xaxis: { categories: ["Jan","Feb","Mar","Apr","May","Jun","Jul"] },
        }).render();
    </script>
{% endblock %}