Package: django-dnoticias-tables
dnoticias.pt - TablesThis package is used to a more dev-friendly datatable management.Datatable (new)The datatable package has been created trying to maintain a consistent logic between the django projects. This new module have the following files:datatable.py: Where all the backend logic is.datatable.js: The datatable JS init. This will use the data constructed by the datatable.py different classes to render the datatable.(optional) /datatable/html/{table-id}/index.js: This will contains all the extended functions used in the datatable.js rendering.How it worksTo use the new datatable module you need to import it into your django views.py file and declare the class:fromdnoticias_tables.datatableimportDatatable,ColumnclassMyCustomDatatable(Datatable):id=Column(name="ID",orderable=True,searchable=True)email=Column(name="Email",searchable=True,width=150)model=Usertable_id="user"classMeta:sortable=TrueAnd then you need to define the view request path in your urls.py file:from.importviewsurlpatterns=[...path("datatable/",views.MyCustomDatatable.as_view(),name="datatable-list"),]And now its done, if you access tohttp://example.com/datatable/the datatable is already rendering!ClassesMetaThe Meta class is used to redefine custom general variables used in the datatable.Variables that you can define:create_url_name=None# Create url used in the datatable top corner buttondelete_url_name=None# Delete url used in each datatable row to delete an entryupdate_url_name=None# Update url used in each datatable row to update an entry# Permissions (this uses the django permissions (i.e: "user.change_user"))# Need to be a strcreate_permission=Noneupdate_permission=Nonedelete_permission=None# Defines if the datatable can be sortable or not (even if you create any row with# the orderable attribute in True, if the sortable variable is set to False, the# table will not be sortable)sortable=FalseColumnUsed to define a row in the datatable. The variable where the Column class is allocated need to have the same name as the object attribute you want to retrieve. i.e:Having the following code:...id=Column(name="ID",orderable=True,searchable=True)email=Column(name="Email",searchable=True,width=150)model=User...Means that the User model has the id and email attributes.Parameters:name:Optional[str]=None,# Name showed on the table headersearchable:Optional[bool]=False,# Define if the row can be searchablesearch_type:Optional[str]=FilterType.ICONTAINS,# Filter typevisible:Optional[bool]=True,# Define if the row is visible or notauto_hide:Optional[bool]=False,# Define if the row will autohide on responsiveorderable:Optional[bool]=False,# Define if the row can be orderabledatetime_format:Optional[str]="%d/%m/%Y %H:%M",# Datetime format in case if the row is a datetimewidth:Optional[int]=100,# Table row widthalign:Optional[str]="left"# Table row alignColumnMethodAlmost the same asColumnbut this uses a custom method instead of an object attribute.This works like DRF serializer method do. You just need to create a method inside the view class
called get_attribute(self, obj) where obj is the current row.You can  define a custom method using themethodparameterParameters:method:Optional[str]=None,# Method name (uses get_{attribute}) by defaultname:Optional[str]=None,visible:Optional[bool]=True,searchable:Optional[bool]=True,search_value:Optional[str]=None,auto_hide:Optional[bool]=False,orderable:Optional[bool]=False,datetime_format:Optional[str]="%d/%m/%Y %H:%M",width:Optional[int]=100,align:Optional[str]="left",ColumnChoiceAnd again, almost the same asColumnbut this is used to display a choice field.
The only difference between this class and Column is that this class will receive a choices parameter and will return the choice label
used to display the data on the datatable. This will worksonly and onlywith the django choice classes.I.E: MyCustomStatusChoices.choiceschoices:Optional[Iterable[tuple]]=None,name:Optional[str]=None,searchable:Optional[bool]=False,search_type:Optional[str]=FilterType.ICONTAINS,visible:Optional[bool]=True,auto_hide:Optional[bool]=False,orderable:Optional[bool]=False,width:Optional[int]=100,align:Optional[str]="left",ResponseThe response data can be used on custom functions (extend.js) so i think is important to
you know the structure.{"meta":{"page":1,// Actual page"pages":34,// Total pages"perpage":"10",// Items shown per page (defined on datatable)"total":334,// Total items"sort":"asc",// Current sort type"field":"title"// Current sort field},"data":[{"DT_RowId":1,// DT row id"email_name":"Título",// Column name defined on view"email_visible":true,// Column visible defined on view"email_auto_hide":false,// Autohide defined on view"email_width":200,// Column width defined on view"email":"example@mail.com",// Column value for 'email'"status_choice_label":"Confirmado",// Choice label (returned only on ColumnChoice!)"status_name":"Estado","status_visible":true,"status_auto_hide":false,"status_width":100,"status":"confirmed","created_at_name":"Data de criação","created_at_visible":true,"created_at_auto_hide":false,"created_at_width":100,"created_at":"21/04/2021 13:24"},...]}Using custom HTML per rowTo define a custom html for any row, you need to create a file called extend.js on the following path:/your-project/templates/datatable/html/{table-id}/index.jswhere table-id is the same as you defined on the view class.The extend.js structure is quite simple, you just need to define a function that will return the html used for that row.i.e:functionget_status_html(data){switch(data.status){case"pending":return'<span class="btn btn-bold btn-sm btn-font-sm btn-pill btn-label-brand">'+data.status_choice_label+'</span>';case"confirmed":return'<span class="btn btn-bold btn-sm btn-font-sm btn-pill btn-label-success">'+data.status_choice_label+'</span>';}}The function need to be called as "get_attribute_html(data)" where attribute is the attribute row you want to modify.Note that the 'data' parameter will contain all the row data, not only the required one.TO-DO[] Allow using custom filters like select