[PYTHON][DJANGO][TUTORIAL] Criando uma table automática com django-components

Usando Django Components ao seu favor

Eai galera, tudo bem? Estou bem também, estive aqui estudando um pouco mais sobre django, e estava pesquisando sobre componentização com django-components, cara,muito bom, mescando isso ao htmx, a quantidade de código reduzida é extrema.

Primeiramente vamos lá, para que eu conseguisse chegar no resultado desejado, eu precisei transformar o component em algo modular, onde eu pudesse utilizar qualquer aplicativo do meu projeto e qualquer um dos modelos criados.

Para isso utilizei o apps do django.apps para pegar o modelo a partir do nome do seu app e e da tabela que no caso seria o modelo.

Também, fez-se necessário criar um classe para utilizar fazer as querys baseado no modelo.

Mais pra frente quero fazer ela com paginação e estilos diferente.

GenericTable

class GenericTable(object):
  def __init__(self, cls):
    self.__cls = cls
    
  def get_columns(self):
    return [field.verbose_name for field in self.__cls._meta.fields]
    
  def filter_query_set(self,*args,**kwargs):
    return self.__cls.objects.filter(**kwargs)

Component

components.py

from django.apps import apps
from django_components import component

@component.register('table')
class Table(component.Component):
    template_name = 'table/table.html'
    
    def get_context_data(self, app: str, table: GenericTable):
        ModelClass = apps.get_model(f'{app}', table)
        data = GenericTable(ModelClass)
        context = {
            'columns': data.get_columns(),
            'object_list': data.filter_query_set()
        }
        return context
    
    class Media:
        css = 'table/table.css'
        js = 'table/table.js'

table.html

{% load custom_filters %}
<table class="table-component">
  <thead>
    <tr>
      {% for col in columns %}
      <th scope="row">
        {{ col }}
      </th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for obj in object_list %}
    <tr>
      {% for col in columns %}
      <td>
        {{ obj|get_attribute:col  }}
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

table.css

.table-component {
  background-color: rgb(44, 44, 44);
  border-radius: 5px;
}

.table-component thead {
  background-color: rgb(26, 25, 25);
  color: white;
}

.table-component thead tr th {
  padding: 10px;
}

.table-component tbody {
  background-color: #fff;
  text-align: center;
}

filter

from django import template

register = template.Library()

@register.filter
def get_attribute(obj, attr):
    try:
        field = None
        for field_obj in obj._meta.fields:
            if field_obj.verbose_name == attr:
                field = field_obj
                break
        if field:
            return getattr(obj, field.name)
        else:
            return None
    except AttributeError:
        return None

Component

• App: de qual aplicação está vindo seu modelo
• Table: modelo utilizado

{% component "table" app="library" table="Books"%}

Resultado

At.te
Igor Lopes Ribeiro
[email protected]

Procurando minha primeira vaga!