DataTableMixin — sortable, filterable, paginated grid

Backed by the realtime.Order model from PR #1. Click a column header to sort. Use the search box to filter. Prev/next to page. All wired automatically by the mixin.

@action dj-form-pending @server_function dj-transition ActivityMixin WizardMixin dj_suspense defer() DataTableMixin dj-virtual dj-viewport UploadMixin

Orders

DataTableMixin

#	Customer	Total ($)	Status	Created

14	Globex Field Ops	199.0	pending	2026-05-07T22:43:11.182762+00:00
13	Globex Lab	149.0	pending	2026-05-07T22:43:11.179597+00:00
12	Globex Tower	99.0	pending	2026-05-07T22:43:11.176823+00:00
11	Acme East	199.0	pending	2026-05-07T22:43:11.173717+00:00
10	Acme West	149.0	pending	2026-05-07T22:43:11.171206+00:00

The whole pattern

from djust.components.mixins.data_table import DataTableMixin

class OrderDataTableView(DataTableMixin, LiveView):
    table_model = Order
    table_columns = [
        {'key': 'customer', 'label': 'Customer', 'sortable': True, 'filterable': True},
        {'key': 'total',    'label': 'Total',    'sortable': True},
        {'key': 'status',   'label': 'Status',   'sortable': True, 'filterable': True},
    ]
    table_page_size = 25
    table_default_sort = '-created_at'

    def mount(self, request, **kwargs):
        super().mount(request, **kwargs)
        self.init_table_state()
        self.refresh_table()

The mixin auto-decorates on_table_sort / on_table_page / on_table_filter with @event_handler(). The {% data_table %} template tag emits the <table> with click-to-sort handlers wired to those events. No per-view handler boilerplate.