Search code examples
django-tables2

django tables2 display sort arrows on header (follow-on question)


Building off the question and answer in this prior question, what django-tables2 puts out comes out as: example table where heading text is the link and the arrows are not active. When I create the table, my template uses {% render_table table %}

The example in the twitter blog has a better UX because the entire table header cell is the link. How do I do that with django-tables2?

Thanks

Following up with some experimentation, I've been able to make table <td> cells work <a href="">label</a> via bootstrap, django-tables2 meta attrs, and render_col(). However, I cannot get the <th> to work. The th definition sets the container fine, but I cannot get the subtending <a> that django-tables2 generates to include reference to the bootstrap class. I can't find a render() for table headers.

Here's my code:


attrs = {"class": "table table-striped table-sm ",
                 "th": {"class": "col-md-2 position-relative",
                        "a": {"class": "stretched-link"},
                        },
                 "td": {"class": "col-md-2 position-relative"},
                 }

and here's what gets generated:

<th class="asc col-md-2 orderable position-relative" a="{'class': 'stretched-link'}">
   <a href="?sort=-first_name">First name</a>
</th>

Solution

  • Solved it this way after some experimentation and search. Turns out the key is a bootstrap utility (stretch-link) and putting this class on the link rather than the th elements. Open to better solutions.

    class StudentTable(tables.Table):
    
        class Meta:
            model = Student
            fields = ("first_name", "last_name", "nickname", "status")
            sequence = ("last_name", "first_name", "nickname", 'status')
            attrs = {"class": "table table-striped table-sm "}
    
        def make_string(self, value, record):
            temp = reverse('client:student_information', kwargs={'pk': record.id})
            the_str = f"<a href='{temp}' class='url-no-underline stretched-link'> {value} </a>"
            return the_str
    
        def render_first_name(self, value, record):
            return mark_safe(self.make_string(value, record))