Skip to main content

Render a data table with Django and htmx..

Project description

django-data-table

Render a data table with Django and htmx.

release python django pipeline codecov license pre-commit Code style: black chat

!! This Django app is currently in development and not yet ready for production use !!

Contents

Features

  • Fundamentals
    • Renders a data table widget on a webpage
    • The widget is updated by user actions (e.g. next page) without page reloads
    • All data is processed server side
  • UI
    • User can navigate pages
    • User can order by columns
    • User can change how many entries are shown
    • User can do an active text search
    • User can apply filters to the entries.
  • Developer features
    • Can show data from model field, a calculated DB field or calculated by Python function
    • Custom header labels
    • Custom formatter can be applies for each column (e.g. numeric)
    • Optional generated totals footer
    • Supports CSS styling of table via stable HTML table ID
    • Styled using Bootstrap 3 & Font Awesome 5

Screenshots

Here is an example:

Example

Comparison with DataTables JS

This component aims to be a replacement for the popular DataTables JS:

  • Fast rendering of large tables compared to DataTables with server side processing
  • Easier implementation (e.g. not requiring any additional JavaScript code)
  • Provides most of same basic features (e.g. Paging, Selectable page size, search, ...)

How to use

Here is a simple example for creating a data table for users of a Django site:

settings.py

Add this Django app to your site:

  INSTALLED_APPS = [
    ...
    "htmx_datatables",
    ...
  ]

views.py

Create a view:

from htmx_datatables.views import HtmxDataTableView

class MyDataTable(HtmxDataTableView):
    model = User
    columns = ["username", "date_joined", "is_superuser"]
    paginate_by = 10

For more information about features and configuration please see the source code for HtmxDataTableView.

urls.py

Add the new view to your urls:

  from .views import MyDataTable

  ...

  urlpatterns = [
    ...
    path("users_data_table/", MyDataTable.as_view(), name="users_data_table"),
    ...
  ]

index.html

Finally, include the new data table in your Django template:

  {% load htmx_datatables %}
  {# ... #}
  {% render_htmx_datatable url="my_app:users_data_table" %}
  {# ... #}
  {% enable_htmx_js %}

The render_htmx_datatable template tag creates the widget.

The enable_htmx_jstemplate tag loads and enables htmx for this particular Django page (incl. error handling).

Live example

To see how this widget works in practice you can check out out live example here: Live example website.

The code for the live example can be found on the repo in the folder example-app.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django_htmx_datatables-0.1.0a1.tar.gz (94.8 kB view hashes)

Uploaded Source

Built Distribution

django_htmx_datatables-0.1.0a1-py3-none-any.whl (87.2 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page