Is it possible to add attributes to the links in the th?

[spapas]

I've seen the docs https://django-tables2.readthedocs.io/en/latest/pages/column-attributes.html#column-attributes on how it is possible to add custom attributes to the th/td elements. However, I'd like to add some attribute on the inside the (that's used for sortable columns). Is this possible? I tried something like

attrs = {
  "th": {
    "a": {
      "up-target": ".table"
    }
  }
}

but didn't work. After taking a peek at the source I understand that it ain't supported since th is

<th {{ column.attrs.th.as_html }} scope="col">

vs the inside the th:

<a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a>

Is there some other way to implement that feature (except using a custom template) that I don't know of ? Would you feel that such a feature would be useful? I can try providing a PR.

I need this functionality to integrate my table with unpoly (a framework similar to intercooler, htmx etc). Also please notice that the same thing would be useful for the pagination links.

Since I am planning to also use HTMX or Unpoly (haven't figured out yet which one, if you have any insight into this I'd be interested to hear) in the near future I am also interested in this.

Personally, I'd prefer having support for adding extra attributes to the a in th vs. having to copy-and-paste the template to add this.

For HTMX it seems there might be a few more attributes required: https://enzircle.com/responsive-table-with-django-and-htmx

[spapas]

Hey @mschoettle my understanding is that adding a way to pass the options to the proper element in the header or pagination should cover the requirements of both unpoly and htmx or intercooler.

Now on using unpoly vs htmx I have chosen unpoly because it is simpler to integrate and debug (it doesn't really need anything on the server-side since all requests will retrieve the full response) and I really like the Unpoly overlays feature (https://unpoly.com/up.layer) because it allows opening modals more or less for "free" (if you use bootstrap at least).

[mschoettle]

Thanks for the explanation! I'll have to give it a try again.

In the link above the HTMX attributes were added to the <th> tag instead of the <a> child. That should already be supported. Would that be an option for you?

[spapas]

Yes you are right, I saw it on the post. This is a good post btw but the fact that it needs so many changes on your project to integrate htmx makes it more or less impractical (that's mainly the reason I'd like to fix this issue).

Unfortunatley adding attrs on the th element doesn't work with unpoly: Since there's an element inside the any unpoly attrs I add on the will be ignored. Please notice that in the post it overrides the template to remove the and have only th .

Also even if it worked somehow, there's also the pagination problem :)

I don't see much movement on this issue. However, for people that want some kind of solution to that there's a simple one, use up.compile like this:

up.compiler('.pagination .page-item a.page-link', (link) => {
  link.setAttribute('up-follow', link.href)
  link.setAttribute('up-target', ".table-container")
})

up.compiler('th.orderable a[href]', (link) => {
  link.setAttribute('up-follow', link.href)
  link.setAttribute('up-target', ".table-container")
})

I'd still like a python solution for non-unpoly usage but if you're using unpoly this solution is the best!

[bblanchon]

I'm also very interested in adding attributes to links in orderable columns. In my case, it would be to add HTMX's hx-get attribute to allow reloading only the table instead of the whole page.

PS: I just realized I could achieve a similar result with hx-boost="true" and hx-swap="show:none" on the thead.