django-table-sort 0.4.0

Create tables with sorting links on the headers in Django templates.

Django-table-sort

Create tables with sorting links on the headers in Django templates.

This is currently WIP, so many other features will come in future releases.

Installation

First, install with pip:

pip install django-table-sort

Second, add the app to your INSTALLED_APPS setting:

INSTALLED_APPS = [
    ...,
    "django_table_sort",
    ...,
]

Usage

First, add the static to your Template:

<link rel="stylesheet" href="{% static 'django_table_sort.css' %}"/>

django-sort-table uses by default Font Awesome 6 to display the icons, so you might need to add it too.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Second, Use django-table-sort to display your tables.

In your view.py file:

class ListViewExample(ListView):
    model = Person
    template_name: str = "base.html"
    ordering_key = "o"

    def get_ordering(self) -> tuple:
        return self.request.GET.getlist(
            self.ordering_key, None
        )  # To make Django use the order

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["table"] = TableSort(
            self.request,
            self.object_list,
            sort_key_name=self.ordering_key,
            table_css_clases="table table-light table-striped table-sm",
        )
        return context

In your template.html file:

{{ table.render }}

Result:

The table is render with 2 link, one to Toggle the sort direction and another to remove the sort.

You can filter by each field you declare as a column.