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 details)

Uploaded Source

Built Distribution

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

Uploaded Python 3

File details

Details for the file django_htmx_datatables-0.1.0a1.tar.gz.

File metadata

File hashes

Hashes for django_htmx_datatables-0.1.0a1.tar.gz
Algorithm Hash digest
SHA256 7d5a54da826a9628e5445e5773216ff44d6b048c3b6684de6fb613d313d81a42
MD5 c30f965ac847df99b9d853eee482fa87
BLAKE2b-256 769953fb2c782267a2c6bb712bdefdbb8c82d1b6f1408f44c5a152156282281a

See more details on using hashes here.

File details

Details for the file django_htmx_datatables-0.1.0a1-py3-none-any.whl.

File metadata

File hashes

Hashes for django_htmx_datatables-0.1.0a1-py3-none-any.whl
Algorithm Hash digest
SHA256 d4221dafa73c62e2f6e023ec5df693b5dd466c6263b3b8f63f6324a064cffc05
MD5 e3d493de2753d5c894a39bafb799d594
BLAKE2b-256 8620902270d1fbc288e7d56808385a6b220a289bbc95995a760f34afee85507c

See more details on using hashes here.

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