Skip to content

Commit 92a49e6

Browse files
mpibpc-mroosedjk2
mpibpc-mroose
and
djk2
authored
PR for issue 28 (#33)
* Added extra table classes to support responsive tables. Fixes #28. * Added extra table classes to support responsive tables. Fixes #28. * Added extra table classes to support responsive tables. Fixes #28. * Added extra table classes to support responsive tables. Fixes #28. * Added extra table classes to support responsive tables. Fixes #28. * Added extra table classes to support responsive tables. Fixes #28. * Implemented extra classes for support of responsive tables in Bootstrap v4 and v5. Fixes #28. * remove whitespace Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Remove blank line Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Remove blank line Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Removed white space. Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Bumped version to 2.2.0 and documented changes. * Added responsive versions of the tables to the test project. * Changed the layout of the table choose buttons in the test project. * Update django_tables2_column_shifter/tests/test_base.py Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Update django_tables2_column_shifter/tests/test_base.py Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Update django_tables2_column_shifter/tests/test_base.py Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <grzegorz.tezycki@gmail.com> * Solved linting issue. * Bumped version. * Fixed whitespace. * Added description about responsive table usage. * Solved linting issues. * Re-defined test cases. * Changed import of dt_version. Updated test cases to support major, minor and sub-minor version. * Moved import of dt_version. --------- Co-authored-by: K2 <grzegorz.tezycki@gmail.com>
1 parent e80b34d commit 92a49e6

File tree

16 files changed

+393
-209
lines changed

16 files changed

+393
-209
lines changed

‎CHANGELOG.rst

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
CHANGELOG
22
===========
33

4+
v. 2.2.0
5+
--------
6+
7+
* Add new classes:
8+
* ``ColumnShiftTableBootstrap4Responsive`` - only for django-tables2 >= 2.5.0
9+
* ``ColumnShiftTableBootstrap5Responsive`` - only for django-tables2 >= 2.5.3
10+
11+
Classes able to use responsive tables with Bootstrap v4 and v5
12+
Author: @mpibpc-mroose
13+
414
v. 2.1.1
515
--------
616

‎README.rst

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,10 @@ Using JQuery, Bootstrap3 or Bootstrap4 or Bootstrap5 and Django >=1.9.
3333

3434
* for bootstrap2 - ColumnShiftTableBootstrap2,
3535
* for bootstrap3 - ColumnShiftTableBootstrap3,
36-
* for bootstrap4 - ColumnShiftTableBootstrap4,
37-
* for bootstrap5 - ColumnShiftTableBootstrap5,
36+
* for bootstrap4 - ColumnShiftTableBootstrap4
37+
* for bootstrap4 in responsive mode - ColumnShiftTableBootstrap4Responsive (only for django-tables2 >= 2.5)
38+
* for bootstrap5 - ColumnShiftTableBootstrap5
39+
* for bootstrap5 in responsive mode - ColumnShiftTableBootstrap5Responsive (only for django-tables2 >= 2.5.3)
3840

3941
**Tested by tox with:**
4042

@@ -218,11 +220,16 @@ Bootstrap4 :
218220
If you use Bootstrap v4 in your project then table class has to inherit from `ColumnShiftTableBootstrap4`
219221
imported from `django_tables2_column_shifter.tables`.
220222

223+
Alternatively if you want to use `table-responsive` your table class has to inherit from
224+
ColumnShiftTableBootstrap4Responsive (only for django-tables2 >= 2.5).
225+
221226
Bootstrap5:
222227
--------------------------------------
223228
If you use Bootstrap v5 in your project then table class has to inherit from `ColumnShiftTableBootstrap5`
224229
imported from `django_tables2_column_shifter.tables`.
225230

231+
Alternatively if you want to use `table-responsive` your table class has to inherit from
232+
ColumnShiftTableBootstrap5Responsive (only for django-tables2 >= 2.5.3).
226233

227234

228235
Warnings:

‎django_tables2_column_shifter/__init__.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
VERSION = (2, 1, 1)
1+
VERSION = (2, 2, 0)
22
__version__ = ".".join(str(i) for i in VERSION)

‎django_tables2_column_shifter/tables.py

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import django_tables2 as tables
22

3+
dt_version = tuple(map(int, tables.__version__.split(".")[:3]))
34

4-
class ColumnShiftTable(tables.Table):
55

6+
class ColumnShiftTable(tables.Table):
67
# If button for shifting columns is visible
78
shift_table_column = True
89

@@ -89,9 +90,47 @@ class ColumnShiftTableBootstrap4(ColumnShiftTable):
8990
shifter_template = "django_tables2_column_shifter/bootstrap4.html"
9091

9192

93+
class ColumnShiftTableBootstrap4Responsive(ColumnShiftTable):
94+
"""
95+
Table class compatible with Bootstrap 4 and using "table-responsive" css class.
96+
"""
97+
shifter_template = "django_tables2_column_shifter/bootstrap4-responsive.html"
98+
99+
def __init__(self, *args, **kwargs):
100+
if dt_version < (2, 5):
101+
raise AssertionError(
102+
"ColumnShiftTableBootstrap4Responsive require django-tables2 >= 2.5 "
103+
"your current version is {}".format(tables.__version__)
104+
)
105+
super(ColumnShiftTableBootstrap4Responsive, self).__init__(*args, **kwargs)
106+
107+
92108
class ColumnShiftTableBootstrap5(ColumnShiftTable):
93109
"""
94110
Table class compatible with bootstrap 5
95111
"""
96112
dropdown_button_css = "btn btn-light btn-sm"
97113
shifter_template = "django_tables2_column_shifter/bootstrap5.html"
114+
115+
def __init__(self, *args, **kwargs):
116+
if dt_version < (2, 5):
117+
raise AssertionError(
118+
"ColumnShiftTableBootstrap5 require django-tables2 >= 2.5 "
119+
"your current version is {}".format(tables.__version__)
120+
)
121+
super(ColumnShiftTableBootstrap5, self).__init__(*args, **kwargs)
122+
123+
124+
class ColumnShiftTableBootstrap5Responsive(ColumnShiftTableBootstrap5):
125+
"""
126+
Table class compatible with Bootstrap 5 and using "table-responsive" css class.
127+
"""
128+
shifter_template = "django_tables2_column_shifter/bootstrap5-responsive.html"
129+
130+
def __init__(self, *args, **kwargs):
131+
if dt_version < (2, 5, 3):
132+
raise AssertionError(
133+
"ColumnShiftTableBootstrap5Responsive require django-tables2 >= 2.5.3 "
134+
"your current version is {}".format(tables.__version__)
135+
)
136+
super(ColumnShiftTableBootstrap5Responsive, self).__init__(*args, **kwargs)

‎django_tables2_column_shifter/templates/django_tables2_column_shifter/_partials/bootstrap4_table_block.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{% load trans from i18n %}
2+
{% load static %}
3+
4+
5+
6+
7+
8+
<div class="btn-group">
9+
<button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
10+
data-toggle="dropdown"
11+
aria-haspopup="true"
12+
aria-expanded="false"
13+
>
14+
<img
15+
src="{% static "django_tables2_column_shifter/img/cols.png" %}"
16+
alt="Columns"
17+
style="
18+
width:20px;
19+
height:16px;
20+
margin-right:5px;
21+
opacity:0.7;"
22+
/>
23+
{% trans "Visible columns" %}
24+
<span class="caret"></span>
25+
</button>
26+
<ul class="dropdown-menu" style="min-width:350px; padding:5px; cursor:pointer;">
27+
{% for column in table.columns %}
28+
{% if column.attrs.td.class not in table.get_column_excluded %}
29+
{% if column.attrs.td.class in table.get_column_default_show %}
30+
<li class="btn-shift-column"
31+
data-td-class="{{ column.attrs.td.class }}"
32+
data-state="on"
33+
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
34+
data-table-class-container="{{ table.uniq_table_class_name }}">
35+
<img
36+
src="{% static "django_tables2_column_shifter/img/check.png" %}"
37+
alt="loader"
38+
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
39+
class="ico check"
40+
/>
41+
<img
42+
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
43+
alt="loader"
44+
style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
45+
class="ico uncheck"
46+
/>
47+
{{ column.header }}
48+
</li>
49+
{% else %}
50+
<li class="btn-shift-column"
51+
data-td-class="{{ column.attrs.td.class }}"
52+
data-state="off"
53+
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
54+
data-table-class-container="{{ table.uniq_table_class_name }}">
55+
<img
56+
src="{% static "django_tables2_column_shifter/img/check.png" %}"
57+
alt="loader"
58+
style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
59+
class="ico check"
60+
/>
61+
<img
62+
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
63+
alt="loader"
64+
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
65+
class="ico uncheck"
66+
/>
67+
{{ column.header }}
68+
</li>
69+
{% endif %}
70+
{% endif %}
71+
{% endfor %}
72+
</ul>
73+
</div> {# End btn-group#}
74+
75+
{# Loader default is show #}
76+
<div class="loader" style="text-align:center;" >
77+
<img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
78+
{% trans "Table content is loading..."%}
79+
</div> {# End loader #}
80+

‎django_tables2_column_shifter/templates/django_tables2_column_shifter/_partials/bootstrap5_table_block.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
{% load trans from i18n %}
2+
{% load static %}
3+
4+
<div class="btn-group">
5+
<button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
6+
data-bs-toggle="dropdown"
7+
aria-haspopup="true"
8+
aria-expanded="false"
9+
id="btn_{{ table.uniq_table_class_name }}"
10+
>
11+
<img
12+
src="{% static "django_tables2_column_shifter/img/cols.png" %}"
13+
alt="Columns"
14+
style="
15+
width:20px;
16+
height:16px;
17+
margin-right:5px;
18+
opacity:0.7;"
19+
/>
20+
{% trans "Visible columns" %}
21+
<span class="caret"></span>
22+
</button>
23+
<ul class="dropdown-menu"
24+
style="min-width:350px; padding:5px; cursor:pointer;"
25+
aria-labelledby="btn_{{ table.uniq_table_class_name }}"
26+
>
27+
{% for column in table.columns %}
28+
{% if column.attrs.td.class not in table.get_column_excluded %}
29+
{% if column.attrs.td.class in table.get_column_default_show %}
30+
<li class="btn-shift-column"
31+
data-td-class="{{ column.attrs.td.class }}"
32+
data-state="on"
33+
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
34+
data-table-class-container="{{ table.uniq_table_class_name }}">
35+
<img
36+
src="{% static "django_tables2_column_shifter/img/check.png" %}"
37+
alt="loader"
38+
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
39+
class="ico check"
40+
/>
41+
<img
42+
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
43+
alt="loader"
44+
style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
45+
class="ico uncheck"
46+
/>
47+
{{ column.header }}
48+
</li>
49+
{% else %}
50+
<li class="btn-shift-column"
51+
data-td-class="{{ column.attrs.td.class }}"
52+
data-state="off"
53+
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
54+
data-table-class-container="{{ table.uniq_table_class_name }}">
55+
<img
56+
src="{% static "django_tables2_column_shifter/img/check.png" %}"
57+
alt="loader"
58+
style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
59+
class="ico check"
60+
/>
61+
<img
62+
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
63+
alt="loader"
64+
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
65+
class="ico uncheck"
66+
/>
67+
{{ column.header }}
68+
</li>
69+
{% endif %}
70+
{% endif %}
71+
{% endfor %}
72+
</ul>
73+
</div> {# End btn-group#}
74+
75+
{# Loader default is show #}
76+
<div class="loader" style="text-align:center;" >
77+
<img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
78+
{% trans "Table content is loading..."%}
79+
</div> {# End loader #}

‎django_tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4-responsive.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% extends "django_tables2/bootstrap4-responsive.html" %}
2+
3+
{% block table %}
4+
{% if table.shift_table_column %}
5+
<div id="{{ table.uniq_table_class_name }}" class="column-shifter-container">
6+
{% include 'django_tables2_column_shifter/_partials/bootstrap4_table_block.html' %}
7+
8+
{# Wrapper default is hide #}
9+
<div class="table-wrapper" style="display:none;">
10+
{# Load default table content #}
11+
{{ block.super }}
12+
</div> {# End table-wrapper #}
13+
</div> {# End column-shifter-container #}
14+
{% else %}
15+
{{ block.super }}
16+
{% endif %}
17+
{% endblock table %}

‎django_tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4.html

Lines changed: 3 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,17 @@
11
{% extends "django_tables2/bootstrap4.html" %}
2-
{% load trans from i18n %}
3-
{% load static %}
42

53
{% block table %}
6-
74
{% if table.shift_table_column %}
8-
95
<div id="{{ table.uniq_table_class_name }}" class="column-shifter-container">
6+
{% include 'django_tables2_column_shifter/_partials/bootstrap4_table_block.html' %}
107

11-
<div class="btn-group">
12-
<button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
13-
data-toggle="dropdown"
14-
aria-haspopup="true"
15-
aria-expanded="false"
16-
>
17-
<img
18-
src="{% static "django_tables2_column_shifter/img/cols.png" %}"
19-
alt="Columns"
20-
style="
21-
width:20px;
22-
height:16px;
23-
margin-right:5px;
24-
opacity:0.7;"
25-
/>
26-
{% trans "Visible columns" %}
27-
<span class="caret"></span>
28-
</button>
29-
<ul class="dropdown-menu" style="min-width:350px; padding:5px; cursor:pointer;">
30-
{% for column in table.columns %}
31-
{% if column.attrs.td.class not in table.get_column_excluded %}
32-
{% if column.attrs.td.class in table.get_column_default_show %}
33-
<li class="btn-shift-column"
34-
data-td-class="{{ column.attrs.td.class }}"
35-
data-state="on"
36-
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
37-
data-table-class-container="{{ table.uniq_table_class_name }}">
38-
<img
39-
src="{% static "django_tables2_column_shifter/img/check.png" %}"
40-
alt="loader"
41-
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
42-
class="ico check"
43-
/>
44-
<img
45-
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
46-
alt="loader"
47-
style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
48-
class="ico uncheck"
49-
/>
50-
{{ column.header }}
51-
</li>
52-
{% else %}
53-
<li class="btn-shift-column"
54-
data-td-class="{{ column.attrs.td.class }}"
55-
data-state="off"
56-
{% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
57-
data-table-class-container="{{ table.uniq_table_class_name }}">
58-
<img
59-
src="{% static "django_tables2_column_shifter/img/check.png" %}"
60-
alt="loader"
61-
style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
62-
class="ico check"
63-
/>
64-
<img
65-
src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
66-
alt="loader"
67-
style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
68-
class="ico uncheck"
69-
/>
70-
{{ column.header }}
71-
</li>
72-
{% endif %}
73-
{% endif %}
74-
{% endfor %}
75-
</ul>
76-
</div> {# End btn-group#}
77-
78-
{# Loader default is show #}
79-
<div class="loader" style="text-align:center;" >
80-
<img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
81-
{% trans "Table content is loading..."%}
82-
</div> {# End loader #}
83-
84-
{# Wrapper degault is hide #}
8+
{# Wrapper default is hide #}
859
<div class="table-wrapper" style="display:none;">
8610
{# Load default table content #}
8711
{{ block.super }}
8812
</div> {# End table-wrapper #}
89-
90-
</div> {# End column-shifter-container #}
13+
</div> {# End column-shifter-container #}
9114
{% else %}
9215
{{ block.super }}
9316
{% endif %}
94-
9517
{% endblock table %}

0 commit comments

Comments
 (0)