Showing nicer tables in plugin

[markkuleinio]

In my quest to display arbitrary external data in a NetBox view, I've got this far:

Meaning that I can display data that is from a static dict for now. There is even pagination (views.py):

        table = MyDataTable(my_precious_data_as_dict)
        paginate = {
            'paginator_class': EnhancedPaginator,
            'per_page': get_paginate_count(request),
        }
        tables.RequestConfig(request, paginate).configure(table)
        return render(request, "my_plugin/my_data_list.html", { "table": table})

Naturally I'd like to get the list a bit more like NetBox-looking. How is that actually achieved?

My table is simply (tables.py):

import django_tables2 as tables

class MyDataTable(tables.Table):
    name = tables.Column()
    value = tables.Column()

I figured out that I cannot use NetBoxTable or BaseTable since they are model-based (and complain about missing _meta).

The template is (my_data_list.html):

{% extends 'base/layout.html' %}
{% load render_table from django_tables2 %}

{% block title %}My Data{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-9">
        {% render_table table %}
    </div>
</div>
{% endblock content %}

base/layout.html is the only I've yet found that works with dict data, others (like generic/object_list.html) require "proper" objects and fail in trying to access the missing attributes.

Any hints how to improve the layout and get the NetBox look and feel? Should I just to skip render_table, use a for loop to show the data, and reverse-engineer HTML output from other pages? This Django templating ideology is new for me.

[wouterdebruijn]

Because the data provided isn't linked to any NetBox model, we aren't able the extend the NetboxTable class, which would normally set the required classes. However, we can set those classes manually.

class MyDataTable(tables.Table):
    name = tables.Column()
    value = tables.Column()

    class Meta:
        attrs = {
            'class': 'table table-hover',
        }

This table is still quite basic compared to NetBox tables, where sorting, filtering, etc is allowed. Those functions are all implemented in NetBoxTable.

[markkuleinio]

Adding the attrs made wonders already! Thank you!

tables.Table already provides sorting, it's nice. I don't mind filtering missing.

Any further hints to get the pagination links to be something better that the current plain "12next"?

[markkuleinio]

Currently:

[markkuleinio]

The pagination link also only shows below the data even though the user preference for it is set to Both.

[markkuleinio]

With this I got forward: there are better pagination buttons, but they don't work yet:

{% extends 'base/layout.html' %}

{% block title %}My Data{% endblock %}

{% block content %}
{% include 'htmx/table.html' %}
{% endblock content %}

(found this from generic/object_list.html)

Also, sorting stopped working with this

[markkuleinio]

Wrapping the table like this made sorting and paginating work:

<div class="htmx-container">
{% include 'htmx/table.html' %}
</div>

[markkuleinio]

So the final solution for this exercise:

tables.py:

import django_tables2 as tables


class MyDataTable(tables.Table):
    name = tables.Column()
    value = tables.Column()

    class Meta:
        attrs = {
            "class": "table table-hover",
        }

views.py:

import django_tables2 as tables
from utilities.htmx import is_embedded, is_htmx
from utilities.paginator import EnhancedPaginator, get_paginate_count

...

        table = MyDataTable(my_precious_data_as_dict)
        paginate = {
            'paginator_class': EnhancedPaginator,
            'per_page': get_paginate_count(request),
        }
        tables.RequestConfig(request, paginate).configure(table)
        if is_htmx(request):
            if is_embedded(request):
                table.embedded = True
            return render(request, 'htmx/table.html', {'table': table})
        return render(request, "my_plugin/my_data_list.html", { "table": table})

my_data_list.html:

{% extends 'base/layout.html' %}

{% block title %}My Data{% endblock %}

{% block content %}
<div class="htmx-container">
{% include 'htmx/table.html' %}
</div>
{% endblock content %}

To be clear and honest: I have no idea how these will survive NetBox major/minor version upgrades 😁

[markkuleinio]

As expected, changes will be needed for NetBox 4.0: is_htmx() and is_embedded() are not there anymore, so at least these changes will be needed:

from utilities.htmx import htmx_partial
...
        if htmx_partial(request):
            if not request.htmx.target:
                table.embedded = True