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 <[email protected]> * Remove blank line Co-authored-by: K2 <[email protected]> * Remove blank line Co-authored-by: K2 <[email protected]> * Removed white space. Co-authored-by: K2 <[email protected]> * 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 <[email protected]> * Update django_tables2_column_shifter/tests/test_base.py Co-authored-by: K2 <[email protected]> * Update django_tables2_column_shifter/tests/test_base.py Co-authored-by: K2 <[email protected]> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <[email protected]> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <[email protected]> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <[email protected]> * Update django_tables2_column_shifter/tables.py Co-authored-by: K2 <[email protected]> * 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 <[email protected]>
djk2 · May 3, 2023 · 92a49e6 · 92a49e6
1 parent e80b34d
commit 92a49e6
Show file tree

Hide file tree

Showing 16 changed files with 393 additions and 209 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -1,6 +1,16 @@
 CHANGELOG
 ===========
 
+v. 2.2.0
+--------
+
+    * Add new classes:
+        * ``ColumnShiftTableBootstrap4Responsive`` - only for django-tables2 >= 2.5.0
+        * ``ColumnShiftTableBootstrap5Responsive`` - only for django-tables2 >= 2.5.3
+
+      Classes able to use responsive tables with Bootstrap v4 and v5
+      Author: @mpibpc-mroose
+
 v. 2.1.1
 --------
 

diff --git a/README.rst b/README.rst
@@ -33,8 +33,10 @@ Using JQuery, Bootstrap3 or Bootstrap4 or Bootstrap5 and Django >=1.9.
 
   * for bootstrap2 - ColumnShiftTableBootstrap2,
   * for bootstrap3 - ColumnShiftTableBootstrap3,
-  * for bootstrap4 - ColumnShiftTableBootstrap4,
-  * for bootstrap5 - ColumnShiftTableBootstrap5,
+  * for bootstrap4 - ColumnShiftTableBootstrap4
+  * for bootstrap4 in responsive mode - ColumnShiftTableBootstrap4Responsive (only for django-tables2 >= 2.5)
+  * for bootstrap5 - ColumnShiftTableBootstrap5
+  * for bootstrap5 in responsive mode - ColumnShiftTableBootstrap5Responsive (only for django-tables2 >= 2.5.3)
 
 **Tested by tox with:**
 
@@ -218,11 +220,16 @@ Bootstrap4 :
 If you use Bootstrap v4 in your project then table class has to inherit from `ColumnShiftTableBootstrap4`
 imported from `django_tables2_column_shifter.tables`.
 
+Alternatively if you want to use `table-responsive` your table class has to inherit from
+ColumnShiftTableBootstrap4Responsive (only for django-tables2 >= 2.5).
+
 Bootstrap5:
 --------------------------------------
 If you use Bootstrap v5 in your project then table class has to inherit from `ColumnShiftTableBootstrap5`
 imported from `django_tables2_column_shifter.tables`.
 
+Alternatively if you want to use `table-responsive` your table class has to inherit from
+ColumnShiftTableBootstrap5Responsive (only for django-tables2 >= 2.5.3).
 
 
 Warnings:

diff --git a/django_tables2_column_shifter/__init__.py b/django_tables2_column_shifter/__init__.py
@@ -1,2 +1,2 @@
-VERSION = (2, 1, 1)
+VERSION = (2, 2, 0)
 __version__ = ".".join(str(i) for i in VERSION)
diff --git a/django_tables2_column_shifter/tables.py b/django_tables2_column_shifter/tables.py
@@ -1,8 +1,9 @@
 import django_tables2 as tables
 
+dt_version = tuple(map(int, tables.__version__.split(".")[:3]))
 
-class ColumnShiftTable(tables.Table):
 
+class ColumnShiftTable(tables.Table):
     # If button for shifting columns is visible
     shift_table_column = True
 
@@ -89,9 +90,47 @@ class ColumnShiftTableBootstrap4(ColumnShiftTable):
     shifter_template = "django_tables2_column_shifter/bootstrap4.html"
 
 
+class ColumnShiftTableBootstrap4Responsive(ColumnShiftTable):
+    """
+    Table class compatible with Bootstrap 4 and using "table-responsive" css class.
+    """
+    shifter_template = "django_tables2_column_shifter/bootstrap4-responsive.html"
+
+    def __init__(self, *args, **kwargs):
+        if dt_version < (2, 5):
+            raise AssertionError(
+                "ColumnShiftTableBootstrap4Responsive require django-tables2 >= 2.5 "
+                "your current version is {}".format(tables.__version__)
+            )
+        super(ColumnShiftTableBootstrap4Responsive, self).__init__(*args, **kwargs)
+
+
 class ColumnShiftTableBootstrap5(ColumnShiftTable):
     """
     Table class compatible with bootstrap 5
     """
     dropdown_button_css = "btn btn-light btn-sm"
     shifter_template = "django_tables2_column_shifter/bootstrap5.html"
+
+    def __init__(self, *args, **kwargs):
+        if dt_version < (2, 5):
+            raise AssertionError(
+                "ColumnShiftTableBootstrap5 require django-tables2 >= 2.5 "
+                "your current version is {}".format(tables.__version__)
+            )
+        super(ColumnShiftTableBootstrap5, self).__init__(*args, **kwargs)
+
+
+class ColumnShiftTableBootstrap5Responsive(ColumnShiftTableBootstrap5):
+    """
+    Table class compatible with Bootstrap 5 and using "table-responsive" css class.
+    """
+    shifter_template = "django_tables2_column_shifter/bootstrap5-responsive.html"
+
+    def __init__(self, *args, **kwargs):
+        if dt_version < (2, 5, 3):
+            raise AssertionError(
+                "ColumnShiftTableBootstrap5Responsive require django-tables2 >= 2.5.3 "
+                "your current version is {}".format(tables.__version__)
+            )
+        super(ColumnShiftTableBootstrap5Responsive, self).__init__(*args, **kwargs)
diff --git a/...umn_shifter/templates/django_tables2_column_shifter/_partials/bootstrap4_table_block.html b/...umn_shifter/templates/django_tables2_column_shifter/_partials/bootstrap4_table_block.html
@@ -0,0 +1,80 @@
+{% load trans from i18n %}
+{% load static %}
+
+
+
+
+
+            <div class="btn-group">
+                <button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
+                        data-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                >
+                    <img
+                        src="{% static "django_tables2_column_shifter/img/cols.png" %}"
+                        alt="Columns"
+                        style="
+                            width:20px;
+                            height:16px;
+                            margin-right:5px;
+                            opacity:0.7;"
+                    />
+                    {% trans "Visible columns" %}
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" style="min-width:350px; padding:5px; cursor:pointer;">
+                    {% for column in table.columns %}
+                        {% if column.attrs.td.class not in table.get_column_excluded %}
+                            {% if column.attrs.td.class in table.get_column_default_show %}
+                                <li class="btn-shift-column"
+                                    data-td-class="{{ column.attrs.td.class }}"
+                                    data-state="on"
+                                    {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
+                                    data-table-class-container="{{ table.uniq_table_class_name }}">
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/check.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
+                                        class="ico check"
+                                    />
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
+                                        class="ico uncheck"
+                                    />
+                                    {{ column.header }}
+                                </li>
+                            {% else %}
+                                <li class="btn-shift-column"
+                                    data-td-class="{{ column.attrs.td.class }}"
+                                    data-state="off"
+                                    {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
+                                    data-table-class-container="{{ table.uniq_table_class_name }}">
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/check.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
+                                        class="ico check"
+                                    />
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
+                                        class="ico uncheck"
+                                    />
+                                    {{ column.header }}
+                                </li>
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            </div> {# End  btn-group#}
+
+            {# Loader default is show #}
+            <div class="loader" style="text-align:center;" >
+                <img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
+                {% trans "Table content is loading..."%}
+            </div> {# End loader #}
+
diff --git a/...umn_shifter/templates/django_tables2_column_shifter/_partials/bootstrap5_table_block.html b/...umn_shifter/templates/django_tables2_column_shifter/_partials/bootstrap5_table_block.html
@@ -0,0 +1,79 @@
+{% load trans from i18n %}
+{% load static %}
+
+            <div class="btn-group">
+                <button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
+                        data-bs-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        id="btn_{{ table.uniq_table_class_name }}"
+                >
+                    <img
+                        src="{% static "django_tables2_column_shifter/img/cols.png" %}"
+                        alt="Columns"
+                        style="
+                            width:20px;
+                            height:16px;
+                            margin-right:5px;
+                            opacity:0.7;"
+                    />
+                    {% trans "Visible columns" %}
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu"
+                    style="min-width:350px; padding:5px; cursor:pointer;"
+                    aria-labelledby="btn_{{ table.uniq_table_class_name }}"
+                >
+                    {% for column in table.columns %}
+                        {% if column.attrs.td.class not in table.get_column_excluded %}
+                            {% if column.attrs.td.class in table.get_column_default_show %}
+                                <li class="btn-shift-column"
+                                    data-td-class="{{ column.attrs.td.class }}"
+                                    data-state="on"
+                                    {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
+                                    data-table-class-container="{{ table.uniq_table_class_name }}">
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/check.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
+                                        class="ico check"
+                                    />
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
+                                        class="ico uncheck"
+                                    />
+                                    {{ column.header }}
+                                </li>
+                            {% else %}
+                                <li class="btn-shift-column"
+                                    data-td-class="{{ column.attrs.td.class }}"
+                                    data-state="off"
+                                    {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
+                                    data-table-class-container="{{ table.uniq_table_class_name }}">
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/check.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
+                                        class="ico check"
+                                    />
+                                    <img
+                                        src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
+                                        alt="loader"
+                                        style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
+                                        class="ico uncheck"
+                                    />
+                                    {{ column.header }}
+                                </li>
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            </div> {# End  btn-group#}
+
+            {# Loader default is show #}
+            <div class="loader" style="text-align:center;" >
+                <img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
+                {% trans "Table content is loading..."%}
+            </div> {# End loader #}
diff --git a/...tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4-responsive.html b/...tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4-responsive.html
@@ -0,0 +1,17 @@
+{% extends "django_tables2/bootstrap4-responsive.html" %}
+
+{% block table %}
+{% if table.shift_table_column %}
+    <div id="{{ table.uniq_table_class_name }}" class="column-shifter-container">
+        {% include 'django_tables2_column_shifter/_partials/bootstrap4_table_block.html' %}
+
+        {# Wrapper default is hide #}
+        <div class="table-wrapper" style="display:none;">
+            {# Load default table content   #}
+            {{ block.super }}
+        </div> {# End table-wrapper #}
+     </div> {# End column-shifter-container #}
+{% else %}
+    {{ block.super }}
+{% endif %}
+{% endblock table %}
diff --git a/django_tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4.html b/django_tables2_column_shifter/templates/django_tables2_column_shifter/bootstrap4.html
@@ -1,95 +1,17 @@
 {% extends "django_tables2/bootstrap4.html" %}
-{% load trans from i18n %}
-{% load static %}
 
 {% block table %}
-
     {% if table.shift_table_column %}
-
         <div id="{{ table.uniq_table_class_name }}" class="column-shifter-container">
+            {% include 'django_tables2_column_shifter/_partials/bootstrap4_table_block.html' %}
 
-            <div class="btn-group">
-                <button type="button" class="{{ table.get_dropdown_button_css }} dropdown-toggle"
-                        data-toggle="dropdown"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                >
-                    <img
-                        src="{% static "django_tables2_column_shifter/img/cols.png" %}"
-                        alt="Columns"
-                        style="
-                            width:20px;
-                            height:16px;
-                            margin-right:5px;
-                            opacity:0.7;"
-                    />
-                    {% trans "Visible columns" %}
-                    <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu" style="min-width:350px; padding:5px; cursor:pointer;">
-                    {% for column in table.columns %}
-                        {% if column.attrs.td.class not in table.get_column_excluded %}
-                            {% if column.attrs.td.class in table.get_column_default_show %}
-                                <li class="btn-shift-column"
-                                    data-td-class="{{ column.attrs.td.class }}"
-                                    data-state="on"
-                                    {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
-                                    data-table-class-container="{{ table.uniq_table_class_name }}">
-                                    <img
-                                        src="{% static "django_tables2_column_shifter/img/check.png" %}"
-                                        alt="loader"
-                                        style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
-                                        class="ico check"
-                                    />
-                                    <img
-                                        src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
-                                        alt="loader"
-                                        style="width:20px; height:20px; margin-right:5px; display: none; opacity:0.7;"
-                                        class="ico uncheck"
-                                    />
-                                    {{ column.header }}
-                                </li>
-                            {% else %}
-                                <li class="btn-shift-column"
-                                    data-td-class="{{ column.attrs.td.class }}"
-                                    data-state="off"
-                                    {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
-                                    data-table-class-container="{{ table.uniq_table_class_name }}">
-                                    <img
-                                        src="{% static "django_tables2_column_shifter/img/check.png" %}"
-                                        alt="loader"
-                                        style="width:20px; height:20px; margin-right:5px; display:none; opacity:0.7;"
-                                        class="ico check"
-                                    />
-                                    <img
-                                        src="{% static "django_tables2_column_shifter/img/uncheck.png" %}"
-                                        alt="loader"
-                                        style="width:20px; height:20px; margin-right:5px; opacity:0.7;"
-                                        class="ico uncheck"
-                                    />
-                                    {{ column.header }}
-                                </li>
-                            {% endif %}
-                        {% endif %}
-                    {% endfor %}
-                </ul>
-            </div> {# End  btn-group#}
-
-            {# Loader default is show #}
-            <div class="loader" style="text-align:center;" >
-                <img src="{% static "django_tables2_column_shifter/img/loader.gif" %}" style="margin:5px auto;" alt="loader"/>
-                {% trans "Table content is loading..."%}
-            </div> {# End loader #}
-
-            {# Wrapper degault is hide #}
+            {# Wrapper default is hide #}
             <div class="table-wrapper" style="display:none;">
                 {# Load default table content   #}
                 {{ block.super }}
             </div> {# End table-wrapper #}
-
-        </div> {# End column-shifter-container #}
+         </div> {# End column-shifter-container #}
     {% else %}
         {{ block.super }}
     {% endif %}
-
 {% endblock table %}