1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
Customizing table style
=======================
.. _css:
CSS
---
In order to use CSS to style a table, you'll probably want to add a
``class`` or ``id`` attribute to the ``<table>`` element. django-tables2 has
a hook that allows arbitrary attributes to be added to the ``<table>`` tag.
.. sourcecode:: python
>>> import django_tables2 as tables
>>>
>>> class SimpleTable(tables.Table):
... id = tables.Column()
... age = tables.Column()
...
... class Meta:
... attrs = {"class": "mytable"}
...
>>> table = SimpleTable()
>>> # renders to something like this:
'<table class="mytable">...'
By default, django-tables2 looks for the ``DJANGO_TABLES2_TABLE_ATTRS``
setting which allows you to define attributes globally for all tables.
For example, to have a Bootstrap5 table with hoverable rows
and a light table header define it as follows:
.. sourcecode:: python
DJANGO_TABLES2_TABLE_ATTRS = {
'class': 'table table-hover',
'thead': {
'class': 'table-light',
},
}
You can also specify ``attrs`` attribute when creating a column. ``attrs``
is a dictionary which contains attributes which by default get rendered
on various tags involved with rendering a column. You can read more about
them in :ref:`column-attributes`. django-tables2 supports three different
dictionaries, this way you can give different attributes
to column tags in table header (``th``), rows (``td``) or footer (``tf``).
.. sourcecode:: python
>>> import django_tables2 as tables
>>>
>>> class SimpleTable(tables.Table):
... id = tables.Column(attrs={"td": {"class": "my-class"}})
... age = tables.Column(attrs={"tf": {"bgcolor": "red"}})
...
>>> table = SimpleTable()
>>> # renders to something like this:
'<tbody><tr><td class="my-class">...</td></tr>'
>>> # and the footer will look like this:
'<tfoot><tr> ... <td class="age" bgcolor="red"></tr></tfoot>''
.. _available-templates:
Available templates
-------------------
We ship a couple of different templates:
========================================= ======================================================
Template name Description
========================================= ======================================================
django_tables2/table.html Basic table template (default).
django_tables2/bootstrap.html Template using bootstrap 3 structure/classes
django_tables2/bootstrap-responsive.html Same as bootstrap, but wrapped in ``.table-responsive``
django_tables2/bootstrap4.html Template using bootstrap 4 structure/classes
django_tables2/bootstrap4-responsive.html Same as bootstrap4, but wrapped in ``.table-responsive``
django_tables2/bootstrap5.html Template using bootstrap 5 structure/classes
django_tables2/bootstrap5-responsive.html Same as bootstrap5, but wrapped in ``.table-responsive``
django_tables2/semantic.html Template using semantic UI
========================================= ======================================================
By default, django-tables2 looks for the ``DJANGO_TABLES2_TEMPLATE`` setting
which is ``django_tables2/table.html`` by default.
If you use bootstrap 5 for your site, it makes sense to set the default to
the bootstrap 5 template::
DJANGO_TABLES2_TEMPLATE = "django_tables2/bootstrap5.html"
If you want to specify a custom template for selected tables in your project,
you can set a ``template_name`` attribute to your custom ``Table.Meta`` class::
class PersonTable(tables.Table):
class Meta:
model = Person
template_name = "django_tables2/semantic.html"
You can also use the ``template_name`` argument to the ``Table`` constructor to
override the template for a certain instance::
table = PersonTable(data, template_name="django_tables2/bootstrap-responsive.html")
For none of the templates any CSS file is added to the HTML. You are responsible for
including the relevant style sheets for a template.
.. _custom-template:
Custom Template
---------------
And of course if you want full control over the way the table is rendered,
ignore the built-in generation tools, and instead pass an instance of your
`.Table` subclass into your own template, and render it yourself.
You should use one of the provided templates as a basis.
|
