pep-un / Oxomium

Simple cybersecurity conformity tool for SECOPS and CISCO
https://www.oxomium.org
GNU General Public License v3.0
13 stars 2 forks source link

Implement riche table #44

Open pep-un opened 1 year ago

pep-un commented 1 year ago

Implement sorted and filtered table.

https://django-tables2.readthedocs.io/en/latest/

pep-un commented 3 months ago

Certainly! Here's how you can implement sortable, filterable tables in Django using ModelForm and ModelView, utilizing tools like Django Tables2 and Django Filter.

1. Django Tables2

Django Tables2 helps in creating HTML tables in Django with built-in support for sorting and pagination.

Installation

First, install Django Tables2:

pip install django-tables2

Configuration

Add 'django_tables2' to your INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
    ...
    'django_tables2',
]

Model and Table

Create your model, if you haven't already:

from django.db import models

class ControlePoint(models.Model):
    name = models.CharField(max_length=255)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

Next, define a Table class using django_tables2.Table:

import django_tables2 as tables
from .models import ControlePoint

class ControlePointTable(tables.Table):
    class Meta:
        model = ControlePoint
        template_name = "django_tables2/bootstrap.html"
        fields = ("name", "description", "created_at")

ModelView

You can then create a ModelView using Django's generic ListView combined with django_tables2.SingleTableMixin:

from django_tables2.views import SingleTableView
from .models import ControlePoint
from .tables import ControlePointTable

class ControlePointListView(SingleTableView):
    model = ControlePoint
    table_class = ControlePointTable
    template_name = "controle_point_list.html"

Template

In your template, render the table using {% render_table %}:

{% load render_table from django_tables2 %}
{% render_table table %}

2. Django Filter

Django Filter adds filtering functionality to your Django views, which is particularly useful for list views.

Installation

Install Django Filter:

pip install django-filter

Configuration

Add 'django_filters' to your INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'django_filters',
]

FilterSet

Create a FilterSet for your model:

import django_filters
from .models import ControlePoint

class ControlePointFilter(django_filters.FilterSet):
    class Meta:
        model = ControlePoint
        fields = ['name', 'description', 'created_at']

ModelView with Filtering

Combine django_filters.FilterView with Django's ListView:

from django_filters.views import FilterView
from django_tables2.views import SingleTableMixin
from .models import ControlePoint
from .tables import ControlePointTable
from .filters import ControlePointFilter

class ControlePointListView(SingleTableMixin, FilterView):
    model = ControlePoint
    table_class = ControlePointTable
    template_name = "controle_point_list.html"
    filterset_class = ControlePointFilter

Template

Render the filter form and the table in your template:

<form method="get">
    {{ filter.form.as_p }}
    <button type="submit">Filter</button>
</form>

{% render_table table %}

3. Django Crispy Forms

To enhance the presentation of your filter forms (like those used with Django Filter), you can use Django Crispy Forms.

Installation

pip install django-crispy-forms

Configuration

Add 'crispy_forms' to INSTALLED_APPS and specify the style in settings.py:

INSTALLED_APPS = [
    ...
    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Putting it All Together

By combining Django Tables2, Django Filter, and optionally Django Crispy Forms, you can create powerful, user-friendly, sortable, and filterable tables within your Django project using ModelForm and ModelView. Here's a summary of the setup:

These tools seamlessly integrate with Django's class-based views and provide a comprehensive solution for displaying and interacting with data in a Django application.